Coniにおけるプロシージャル・オーディオとWebGL WebAssemblyのエクスペリエンス

Author included in IT

2026-07-02 88 words One minute

Contents

過去24時間だけで、私たちはConi WebAssemblyエコシステムの限界を押し広げ、プロシージャル・オーディオビジュアルのウェブ体験スイート全体を作成しました。Coniのマクロシステムと生のWebGL、そしてWebAudio APIを組み合わせることで、複雑なグラフィックスと音楽システムを外部アセットへの依存を一切持たずに、ブラウザ上でネイティブに構築、コンパイル、展開することに成功しました。

今回構築した5つの新しいアプリケーションを見てみましょう。これらはすべてConi WASM Galleryで、ブラウザ上でネイティブに体験できます。

1. Minimal Techno Visualizer

テーマ: ダークでドライビングなアルゴリズミック・クラブエナジー。 リンク: Minimal Techno App

Coniがリアルタイムのプロシージャル音楽生成をオーケストレーションし、それを重い3Dジオメトリのレンダリングと完璧に同期できることを証明したかったのです。

オーディオエンジン: カスタムの140 BPMタイムラインエンジンが、16分音符の裏拍でアナログスタイルのノコギリ波ベースラインをトリガーし、808スタイルの合成キックと組み合わせ、ドロップ部分ではクリスピーなノイズベースのスネア/クラップを導入します。
WebGLの繊細さ: 16小節の「ブレイクダウン」中に重力を逆転させる5,000個の雨のパーティクルと、キックの打撃ごとにアグレッシブに広がる高密度の脈動する3Dジオメトリコアをマッピングしました。シーケンサーの状態に基づいて冷たいシアンから燃えるようなオレンジ色へと変化します。

2. Divine Infinity 999Hz

テーマ: エーテル的で数学的なヒーリング。 リンク: Divine Infinity 999Hz

神聖な周波数ヒーリングのコンセプトを中心に据えたこのアプリケーションは、純粋な数学とアンビエントオーディオの融合です。

オーディオエンジン: 深いリラクゼーションを誘発するために、微細な8Hzのシータ波バイノーラルビートで補完された999Hzの「エンジェル周波数」のサイン波を生成します。
WebGLの繊細さ: GLSLの頂点シェーダー内の純粋な三角関数を使用して、500,000個のパーティクルを「ベルヌーイのレムニスケート」（無限大の記号）上にマッピングしました。繊細なアンビエントグローと深度に基づいた不透明度のフェードにより、3D空間で完璧にレンダリングされます。

3. Clear Brain Fog 40Hz

テーマ: 幾何学的な明晰さと集中。 リンク: Clear Brain Fog 40Hz

精神的な混乱を払拭することを目的としたこのアプリは、魅惑的な幾何学とグラウンディング周波数を組み合わせています。

オーディオエンジン: 2つのオシレーター（左耳に432Hz、右耳に472Hz）をデチューンして作成された純粋な40Hzのバイノーラルビート。
WebGLの繊細さ: 頂点シェーダーに5枚の花びらが回転する3Dスピログラフをプログラムしました。複雑に重なり合う曲線が、カメラを全く動かすことなく前進し続ける錯覚を生み出し、目をフロー状態に引き込みます。

4. WebGL Guided Breathing App

テーマ: 制御されたリズミカルな瞑想。 リンク: Breathing App

6-2-6の呼吸法（6秒吸って2秒止め、6秒吐く）をガイドするように設計された機能的な瞑想ツールです。

WebGLの繊細さ: ビジュアルの核となるのは、正確な14秒のループタイムライン上で物理的に拡大と収縮を繰り返す巨大な光る円です。頂点シェーダーは半径をスムーズに補間し、カクつきを防ぎます。

5. Restore Inner Peace (432Hz)

テーマ: 静けさとバランス。 リンク: Restore Inner Peace

宇宙の標準ピッチである432Hzにチューニングされた、美しくゆっくりとしたジェネレーティブな環境です。

オーディオエンジン: 短いループに依存することなく、セッションが長くなっても常に新鮮に聞こえるように、複数のプロシージャル・オシレーターを重ねて、進化し続けるドローン的なサウンドスケープを作成しました。
WebGLの繊細さ: 極端な被写界深度でレンダリングされた浮遊する点の海が、広大で静かな空間の感覚をキャンバスに直接もたらします。

AOT WebAssemblyの力

これらのアプリケーションはすべて、Wasm-GCを利用してネイティブのWebAssemblyにAOTコンパイルされています。これは、配列バッファの割り当て、タイムラインの追跡、状態の変更などの重い処理がネイティブに近い速度で実行され、JavaScriptスレッドが1フレームも落とすことなく静かにレンダリング指示をGPUに引き渡せることを意味します。

Coni内でWebGLとWebAudioのロジックをネイティブに記述することが、どれほど表現豊かで強力なものになったか、私たちはとても誇りに思っています。WASM Galleryでぜひお試しください！