雰囲気重視のサウンドビジュアライザ！ ローカルにある MP3 ファイルを D＆D で再生可能！
シンプルなサウンドビジュアライザ
今回ご紹介するのは、WebGL とオーディオファイルを利用したサウンドビジュアライザです。
ローカルにある MP3 ファイルを再生しながら、WebGL によるサウンドの可視化を見ることができます。
サウンドビジュアライザとしては非常に外見はシンプルなタイプ。ただ、入力されてくるサウンドデータをビジュアルのどの部分に対して影響するようにするのかなど、見た目のシンプルさ以上に考えて実装されている感じのする作品となっています。
メタボールがウニボールに
今回のサイトは、ローカルファイルを使わないと見れないので、それはそれである意味ちょっと面倒ですね。デフォルトでサンプル用の音源を使うような感じになっててくれるといいんですが、そこは対応していないようです。
イントロ画面では、サウンドビジュアライザの品質（負荷）を選択することができるようになっており、好みのモードを選択すると、MP3 ファイルのドロップエリアが出てきます。
ブルーのラインに囲まれた矩形領域のなかに、好きなローカルファイルをドラッグ・アンド・ドロップしましょう。
音源ファイルの読み込みが完了すると、暗めのグレーを背景に、メタボールがひとつ浮いている状態のシーンが映しだされます。
このシーンになると画面の下のところに再生ボタンなどが出てきますが、再生ボタンがクリックされるまでの間は、勝手に始まってしまったりはしないようになっていますね。
この無音状態のときは、画面中央にはメタボールのようなものが浮いており、音楽の再生が始まると、これが音の再生に合わせて変化します。
メタボールがトゲトゲになるのと同時に、床面と思しきところからは波紋のようなワイヤーフレームのラインが浮き出してきます。
このラインで描かれるサークルの色合いが、なんとも美しいですね。
そして、その他にもパーティクルが画面内を飛ぶようになったり、ポストエフェクトが強めに掛かるようになったりと、見た目は結構かっこいい感じになります。
再生される音源をいろいろ変えてみたりしましたが、音の高低などに応じて、どのエフェクトが反応するのかは結構きちんと区別しているような感じがしました。
今回のサウンドビジュアライザは、登場するオブジェクトの種類自体は少ないですが、見せ方というかエフェクトの掛け方が上手だなと感じます。
色合いや、ぼかし具合などをうまく制御して、シンプルながら見た目にリッチな印象を持たせることに成功していますね。
サウンドビジュアライザ系の実装は結構数もありますし、すでにかなり完成度の高い作品も多くありますが、やっぱり一度はトライしてみたいテーマでもあると思います。
こういった作品に興味のある方や、シェーダでのエフェクトの掛け方に興味がある方は、ぜひ参考にしてみてください。
