three.js と dancer.js 駆使して作られたサウンドビジュアライザ! グリッチやノイズエフェクトも!
一見シンプルそうだが……
今回ご紹介するのは、WebGL では比較的よく見受けられるサウンドビジュアライザのデモンストレーションです。
今回のデモは一見して割とシンプルな見た目をしていますが、しばらく見ているとノイズをうまく利用したグリッチっぽいエフェクトなどが登場して、なかなか派手な演出になっていきます。
もしかするとまだベータ版かなという感じもしますがご紹介します。
動的に頂点を動かす
サウンドビジュアライザ系のデモというと、モデルを激しく動かすものが多いですよね。
今回ご紹介するデモでは、ライン状に並べられた、文字の形をしたモデルがサウンドに呼応して動きます。
再生は右上にある「play」ボタンを押すまでは開始されませんが、無音の状態では文字の形をしたライン上のモデルは直線的な見た目になっていることがわかります。
デフォルトの無音状態では黄色っぽいラインが見えますね。
このライン上のモデルは、サウンドの再生が始まると激しくそれに反応して振動します。
また、振動するだけでなく色も目まぐるしく変化するので、音の再生が始まると一気に見た目の印象が変化します。
静止画ではちょっとわかりにくいと思いますが、背景に散りばめられているキューブ状のモデルも、サウンドの起伏に合わせて動くようになっています。再生されている曲のテンションに呼応するように高速で動く場面もあります。
そしてしばらく眺めていると唐突に出てくるのがノイズを効果的に利用したグリッチエフェクト。
これがなかなかいいアクセントになっていて、思わず目を奪われます。
このノイズのエフェクトがすごくカッコいいです!
技術的なところでは、3D シーンのレンダリングには three.js を、そして音の解析には dancer.js というライブラリを使っているみたいですね。
WebAudio 周辺は結構罠が多そうなので、こういうライブラリを使うという選択肢も、たしかにありなのかもしれません。
あまり多彩な表情があるという感じではありませんが、エフェクトの効果的な使い方など参考になるという人もいるでしょう。気になる方はチェックしてみてください。
リンク:
Ziggurats ※WebGL ビジュアライザ
jsantell/dancer.js · GitHub ※デモに使われている dancer.js