WebAudio をこれほど活用した WebGL デモは見たことない! 見た目はとっても簡素だけど……
音量注意! そしてヘッドホン推奨!
今回ご紹介するのは、WebGL というよりはむしろ、WebAudio のデモとして非常に秀逸な一作です。
3D ビューと 3D オーディオを組み合わせた今回のデモは、見た目については非常に簡素で、むしろおまけという感じの扱いです。
しかし驚くべきはそのサウンド効果。
これほど見事に立体的な音響を再現しているものは、あまりウェブ上では見かけませんね。非常に素晴らしい出来栄えのデモとなっています。
最初はフル音量で再生されるので注意
今回のデモは、WebAudio の初期化が完了するまでの僅かな間ですが、デモのページを開いた直後は結構音が大きめに鳴りますので注意してください。
WebAudio の初期化が終わると、一気に立体音響モードに切り替わるので、そこでヘッドホンやイヤホンといった、サウンドを直接味わえるデバイスを使って体験してみましょう。
3D のビジュアルは、本当に、なんというか簡単なものなのですが、とにかくこれだけの立体的なサウンド表現はほんとにすごいですね。
画面の中央に、いかにも無骨な……
というかあまりやる気の感じられないキューブ型のスピーカーがあります。この外見だけを見たらふざけてるのかと思ってしまうかもしれませんが、あくまでも、今回の場合はビューは脇役だと考えましょう。
スピーカーの位置が、前後左右に様々に変化するようにコントロールが割当てられており、このスピーカーのモデルのある位置からサウンドが聞こえてくる仕組みです。
その立体感は本当に驚くほどのクオリティです。
ちょっとびっくりするくらい、見事にスピーカーのあるべきところから音が聞こえてきます。
スピーカーが左に寄れば、そちらのほうから音が聞こえてくる。
今回のデモのちょっとした難点として、若干コントロールが難しいということが言えると思います。
マウスの左ボタンをホールドすると、これが前進になります。逆に右ボタンなら、位置が後退します。
さらに、マウスのスクリーン上での位置に応じて左右に方向が変化するようになっており、これが結構大きめのレンジで一気に動くので、ゆっくりとカーソルを動かすのがいいでしょう。
一応、キーボードからも WASD キーを使った位置の移動ができるようになっています。
距離を離してみたり、左右に視点を振ったりしてみると、効果がよりわかりやすいと思います。
今回のデモは、冒頭でも書いたようにあまり外見については品質を求めていません。
しかしその代わり、サウンド効果はかなりしっかりと作られていて、たぶん、イヤホンなどを使わなくても、ラップトップの内蔵スピーカーなどでも、ステレオ再生が可能なものであればその効果を感じることができると思います。
左右の振り分けだけでなく、距離感によって音量の大小が変化するなど、本当に本格的です。
今後、WebVR などが徐々に本流になっていくなかで、こういったサウンド効果にこだわる必要も出てくると思います。そういった意味でも、このデモの驚くべきサウンド効果は、一度体験しておくことをおすすめしたいところです。
ぜひチェックしてみてください。