WebGL 和 Web Audio API 示範匯報

Ilmari Heikkinen

以下是過去幾週我看到的一些精彩 WebGL 和 Web Audio API 示範。

EVE Online 船隻檢視器是使用 WebGL 建構的線上船隻檢視器應用程式,外觀精美。這是在遊戲世界中展示藝術作品的絕佳方式。

Web Audio API 範例頁面提供幾個實用的範例,說明如何使用此 API 處理音訊。WebGL City 是從範例頁面連結的其中一個示範。這只是一個小小的示範,內容是直升機在夜間城市景觀中飛行。直升機 (按下「m」可停用音樂,按下「n」可啟用直升機音效) 會使用 Web Audio API 空間音訊功能,將直升機音效從一個喇叭平移到另一個喇叭。

有位有遠見的開發人員在 GLSL Sandbox 上,只使用 WebGL 片段著色器實作了蛇遊戲。我很驚訝。

Big Bang 看起來可能與其他 WebGL 粒子動畫相似,但粒子模擬實際上是在 GPU 上執行。模擬器是片段著色器,可從紋理讀取先前的粒子位置,並將新的粒子位置寫入 FBO 紋理。

Blocky Earth 會使用 Google 地球資料,並將其轉換為 Minecraft 格式。這張圖片清楚呈現高度差異。舉例來說,我正在查看澳洲和南極洲的冰層,您可以看到大陸冰層有多厚。

Midem Music Machine 是 Mr.doob 和 Paul Lamere 製作的音樂示範,它是一種以球為動力的音樂盒,球會彈跳並發出聲響。CreativeJS 有不錯的說明文章,請查看。

接著,我最近在電腦音樂視覺化主題中,發現這個關於 Bytebeat 的頁面,這是一種以極簡程式碼公式產生的音樂。這個頁面連結到音樂的一個很酷的 WebGL 可視化。Gregg Tavares 採用了這個想法,並建立了bytebeat 沙箱,讓您可以直接在瀏覽器中製作及分享自己的 bytebeat 曲目。