WebAudio と WebGL を見事に融合したデモンストレーションでボクセルライブを楽しもう
HTML5 技術との合わせ技
WebGL は高いインタラクションと、他の次世代 HTML 技術との親和性が特徴の技術です。
音楽を取り込んで動的に加工したりといった、ユーザーのアクションに即座に反応するコンテンツを配信するのに、今後 WebGL はどんどん需要が高まっていくでしょう。
少し前のデモですが、WebAudio を利用してジャズライブを再現したデモがありますのでご紹介します。
ボクセル空間は独特の柔らかな雰囲気
デモが開始されると、マインクラフトなどとはまたちょっと違った、独特のボクセル風レンダリングされた世界が映し出されます。
マウスや、キーの入力によって視点を移動することができるようになっています。
空の様子や、オブジェクトを照らすライティング、うっすらと掛かる影の表現など、いずれもこの柔らかい雰囲気の演出に一役買っています。
全体的な統一感もあり、見た目は非常にきれいですね。
また、シーンの中は自由に歩き回ることができます。ただ、衝突判定などはあまり厳密には行われていないようです。
露店ではスイカが売られていました。
WebAudio を利用したジャズライブ
シーンの中ではジャズバンドが演奏を行っていて、これが BGM にもなっています。
キャラクターがどれもかわいらしいですね。
画面上の左隅を見るとわかると思いますが、この部分でサウンドをリアルタイムに調整することができるようになっています。
クリックすると、簡易的なメニューのようなものが表示され、各種パラメータを変更したり調整したりすることができます。
このサウンドメニューを表示すると、演奏しているキャラクターの足元には、イコライザのようなものが表示されるようになります。
いろいろと、細かいところまで作りこまれている印象を受けますね。
若干、デモとしては負荷が高いかなと思いますが、それに見合った完成度の高いデモになっています。
興味のある方はご覧になってみてはいかがでしょうか。
