WebGL と Web Audio API のデモのまとめ

Ilmari Heikkinen

ここでは、ここ数週間で目にした WebGL と Web Audio API の優れたデモをご紹介します。

EVE Online ship Viewer は、WebGL で構築された優れた外観のオンライン船ビューアプリです。ゲームの世界でアート作品を紹介する絶好の方法です。

Web Audio API のサンプルページでは、この API を使って音声処理を行う方法について、わかりやすい例がいくつか紹介されています。WebGL City は、サンプルページからリンクされているデモの一つです。夜の街並みをヘリコプターが飛んでいる小さなデモです。ヘリコプター(「M」を押して音楽を無効にし、「n」を押してヘリコプター音声を有効にします)は、Web Audio API の空間オーディオ機能を使用して、一方のスピーカーから他方のスピーカーへヘリコプターの音声をパンします。

好奇心の旺盛な人たちの中には、GLSL SandboxWebGL フラグメント シェーダーだけを使ってスネークゲームを実装した人もいます。びっくりです。

Big Bang」は他の WebGL パーティクル アニメーションと同じように見えるかもしれませんが、パーティクル シミュレーションは GPU 上で実行されます。シミュレータは、テクスチャから以前のパーティクルの位置を読み取り、新しいパーティクルの位置を FBO テクスチャに書き込むフラグメント シェーダーです。

Blocky Earth は、Google Earth のデータを MineCrafts に取り込み、高さの違いがうまく伝わります。たとえば、オーストラリアと南極の氷床を調べたところ、大陸の氷の厚さが数キロメートルあることがわかります。

Midem Music Machine は、Mr.doob と Paul Lamere による楽しい音楽デモです。ボールで弾けるオルゴールのようなものです。CreativeJS についての優れた記事が公開されていますので、ぜひご覧ください。

コンピュータ音楽の可視化テーマに続けて、最近 bytebeat に関するこちらのページを見つけました。これは、ミニマルなコード公式によって生成される音楽の一種です。このページは、音楽の WebGL による可視化にリンクされています。Gregg Tavares はこのアイデアを採用し、独自のバイトビート トラックをブラウザから作成、共有できる bytebeat サンドボックスを構築しました。