戻る

3D Audio Visualizer

新型コロナウィルスの影響で家にいる時間が多くなり、たまたまネットでThree.js (*1)という3D(に見える)コンテンツを作れるjavascriptライブラリの存在を知り、試しに簡単なサンプルをコピーして張り付けてみたら動いた。

3D表示は、コンテンツそのものも箱型、球体、ドーナツ形など様々な形が用意されており当然自分でも好きなようにも作れる。コンテンツの色だけではなく画像を張り付けれる。仮想のカメラがありカメラの位置や角度、縦横比、コンテンツを照らす照明の角度や色、全体の環境色などが自由に設定でき、いじっていると際限がなくなる。

最初は単純にメッシュ状の球体を回していたが、すぐに飽きてくるので音楽をbgmにしてみた。そのうち曲によって3Dコンテンツの動きが合わなくなり次のステップとして音楽の強弱によって動きをコントロールしてみた。

それも物足りなくなって、色々なサンプルを試しているうちにオーデイォデータを高速フーリエ変換(FFT)し画面に音の波を表示するのがあった。

直感的にFFTで音源を分解して個々のコンテンツを制御(動かす)してみるとよさそうと思った。


 

ということでthree.js 、XML(*2)にのめり込んでしまった。

色々なサンプルをconsoleログをとりながらトレースしてようやく動いた。よく分からないままでとりあえずよしとしたが、自分の思い通りにしようとなると個々の記述の意味を理解しなくてはならない。

3D Audio Visualizerとは勝手につけたネーミングだが、音楽を視覚的に表示することではハズれてはいないと解釈した。


* 新しい順
タイトル仕様link(click)
㉗ 「3D クラシック音楽選集 ver.7」Audioデータに同期した32個のメッシュ球体をコンテナー上に配置し、中央に関連する楽器など画像を配置。球体表示を改良LINK
㉖ 「町田の冬」2022年 1 , 2 月 町田市薬師池公園 etc2022年1月、2月に撮影した写真のスライドLINK
㉕ 「雪と野鳥」2022年 1 月 町田市薬師池公園 etc」2022年1月に撮影した写真のキュービックスライドLINK
㉔ 「2021Four Season Album」2021年に撮影した写真から厳選64枚のスライドLINK
㉓「町田ダリア園」2021/10/14 訪問の記録LINK
㉒ 「太陽系モデル」太陽系の惑星と衛星(pc稼働)LINK
㉑ 「ハス写真スライド」2021年6月末から7月17日までのカワセミと大賀ハスの写真を球体に貼り付け2組に分けて配列LINK
⑳ 「ハス写真スライド」2011年からの蓮の写真。写真を都度ランダムに候補から選ぶ。中央に球体画像LINK
⑲ 「2021年前半写真スライド」写真画像をコンテナー上に配置。写真を都度ランダムに候補から選ぶ(暫定版)LINK
⑱ 「野津田公園 新ばら広場 (町田市)」写真画像をコンテナー上に配置、2021年春バラ最終版LINK
⑰ Audioデータに同期した3D球体を制御背景ボール、4スポットライト、64に球体追加LINK
⑯ 「野津田公園 新ばら広場 (町田市)」写真画像をコンテナー上に配置、中央に関連する楽器など画像、内部コーディング整理LINK
⑮ 「3D クラシック音楽選集 ver.5」Audioデータに同期した写真画像表示、写真画像をコンテナー上に配置し中央に関連する楽器など画像LINK
⑭ 「3D クラシック音楽選集 ver.4 (パソコン用)」Audioデータに同期した3D画像表示、球体に画像をmapping 、重いのでパソコン専用LINK
⑬ 「3D クラシック音楽選集③」Audioデータに同期した3D画像表示、中央に関連する楽器など画像LINK
⑪ 「身近な野鳥 (町田市薬師池公園)」Audioデータを変換(FFT : Fast Fourier Transform)野鳥写真(30個)と音楽を同期LINK
⑩ 「3D クラシック音楽選集②」Audioデータを変換(FFT : Fast Fourier Transform)し個別に3D球体などを制御。球体を32個に増やしある程度同期させた。LINK
⑨ 「2021年 桜 30選」Audioデータを変換(FFT : Fast Fourier Transform)し個別に3D球体などを制御。
桜の画像を球体に張り付けた(texture map)
LINK
⑧「3D クラシック音楽選集」 Audioデータを変換(FFT : Fast Fourier Transform)し個別に3D球体などを制御。
カメラの回転やスポットライトを試した。
LINK
⑦ 3D球体をAudioデータで個別に動かす。全くランダムに動かすのは多分出来るが、音楽に合った動きにしたい。LINK
⑥ 3D球体をAudioデータで円周上に配置し動かす。XML、曲目選択、マウスでカメラ回転LINK
⑤ 3D球体をAudioデータで動かす。XMLLINK
* 「演歌など別ジャンル 音楽 著作権に配慮 id , password付き ==> abc/abc LINK


~以下プログラミング メモ~

(*1)Three.jsは、ウェブブラウザで3次元コンピュータグラフィックスを表示させるWebGLを使いやすくしたもの。

(*2)XMLはExtensible Markup Languageのこと。通常のウエブブラウザ表示はhtmlという言語で書くが、映像や音データの在り処は表示するが処理はしない。XMLは一歩進んでウェブ上でデータそのものを処理する。今回は音楽データの処理にこれを使った。

XMLHttpRequestオブジェクトによってサーバーから受けた音データを、createAnalyser()メソッドで高速フーリエ変換(FFT)した配列(array)データにして受け取る。配列の長さは1024個で中身は0~256の数値。これでデジタル処理が出来る。

最初16個の球体に配列を割り当て動きをコントロールする。全部を同じ方向に回転させるとおもしろくないので反転や角度に変化を持たせる。

元の音データを変換したものを使うので、これまでとは違った動きで音楽に同期した3D映像を表現できるようになった。

実際には音声データは非常に細かいのでそのまま可視化すると単に震えたり見た目には留まって見えたりするので、他にも様々な見映えをよくする工夫をした。

フーリエ変換は学生時代に習った記憶があったが、半世紀以上を経てリマインドしてみて良い資料があったのでメモしておく。角周波数とは物が回転するときに1秒間に進む角度で「回転の速さ」のこと。
 参考: ロボット・IT雑食日記


詳細プログラミングノート



戻る