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

Ilmari Heikkinen

ここ数週間に見てきた、WebGL と Web Audio API の優れたデモを見てみましょう。

EVE Online ship Viewer は、WebGL で構築された、見栄えの良いオンライン船舶ビューア アプリです。ゲームの世界でアート作品を紹介する素晴らしい方法です。

Web Audio API サンプル ページには、このライブラリを使用した音声処理の方法に関する説得力のある例が記載されています。WebGL City は、サンプルページからリンクされているデモの 1 つです。都市景観の夜空を飛行するヘリコプターの小さなデモです。ヘリコプター([M] を押して音楽を無効にし、[N] を押してヘリコプターのサウンドを有効にする)は、Web Audio API の空間オーディオ機能を使用して、ヘリコプターの音声を一方のスピーカーからもう一方のスピーカーにパンします。

一部の新進気鋭の人たちは、GLSL SandboxWebGL フラグメント シェーダーだけを使ってヘビゲームを実装しました。びっくりする。

ビッグバンは他の WebGL 粒子アニメーションに似ていますが、粒子シミュレーションは実際には GPU で実行されます。シミュレータは、テクスチャから以前のパーティクルの位置を読み取り、新しいパーティクルの位置を FBO テクスチャに書き込むフラグメント シェーダーです。

Blocky Earth は Google Earth のデータを MineCrafts で取得します。身長の違いがうまく伝わります。たとえば、オーストラリアと南極の氷床を見ていたのですが、大陸の氷の厚さが数キロメートルあることがわかります。

Midem Music Machine は、Mr.doob と Paul Lamere による楽しい音楽デモです。これはボール駆動のオルゴールで、ボールがバウンドしてあります。CreativeJS には優れた記事があるので、チェックしてみてください。

コンピュータ ミュージックの可視化について続けて、先日、bytebeat に関するこのページを目にしました。これは、ミニマルなコード フォーミュラによって生成される一種の音楽です。このページは、音楽の優れた WebGL による可視化にリンクされています。Gregg Tavares は、このアイデアに取り組み、独自のバイトビート チューンをブラウザから直接作成して共有できる bytebeat サンドボックスを開発しました。