Js on NicoLabs

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

Thu, 02 Jul 2026 12:00:00 +0900

過去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

WebGLによるガイド付き呼吸法: 6-2-6のインタラクティブ体験

Mon, 29 Jun 2026 23:35:00 +0900

ペースの速い今日のデジタル世界において、メンタルヘルスと集中力は非常に重要です。脳波同調（ブレインウェーブ・エントレインメント）アプリケーションの成功に続き、私たちはウェルビーイングのもう一つの側面である「意識的な呼吸」に取り組むことにしました。

私たちの最新のConi WASMアプリケーション、WebGL Breathing Appを発表できることを嬉しく思います。これは、落ち着きをもたらす6-2-6の呼吸エクササイズ（6秒吸って、2秒止め、6秒吐く）をガイドするためにゼロから構築された、視覚的および聴覚的な体験です。

生きたUIを作成する

単に拡大する円を表示する従来の呼吸タイマーとは異なり、私たちは「生きている」と感じられるものを作りたいと考えました。そこで、Calm（シアン）、Warm（オレンジ）、Focus（パープル）からムードを設定できるインタラクティブなメニューを設計しました。

エクササイズを開始すると、バックグラウンドの環境ノイズとプロシージャルに生成されたチャイムが再生され始めます。これらのサウンドはWeb Audio APIのみによって駆動され、ネイティブのConi関数によってシームレスにスケジューリングされます。ロジックを標準的なJSランタイムの遅延（ヒカップ）から分離することで、オーディオは完全に一貫性を保ち、ジッター（乱れ）のない状態を維持します。

GPUのパワー

内部では、アプリケーションはネイティブに計算され、WebAssemblyにキャッシュされた30,000個の幾何学的なパーティクルのクラスターを生成します。これらのポイントは、選択したムードカラーと連続的な u_breath_factor とともにWebGLシェーダーに渡されます。

息を吸うと、球体は拡大し、頂点シェーダーで直接適用される三角関数のサインとコサインの操作によって頂点が緩やかに波打ちながら、半径が動的に拡大します。色の強さも増し、エネルギーの膨張を模倣します。

息を吐くと、球体はタイトなコアへと収縮します。

;; フェーズを完全にWASM内で計算します
(defn update-phase [t phase-text]
  (let [cycle-time (fmod t 14000.0)
        inhale-time 6000.0
        hold-time 2000.0
        exhale-time 6000.0]
    (if (< cycle-time inhale-time)
      ;; ... 拡張をスムーズに緩和するための数学ロジック

視覚的な変換をGPUにオフロードし、厳格な状態の同期をネイティブにWASM内で維持することで、ロボット的ではなく有機的に感じられる、シルクのように滑らかな60fpsの体験を実現しました。

今すぐ試す

新しいアプリケーションを私たちのWASMアプリ環境にデプロイしました。こちらから直接アクセスできます：

Coni WASMによる40Hzの認知的集中アプリの構築

Sun, 28 Jun 2026 07:30:00 +0900

ブラウザ上のWebAssemblyは常に信じられないほどのパフォーマンスを約束してきましたが、WebAudioやWebGLといったWeb APIとスムーズに連携させることは、時にパズルを解くような感覚になることがあります。本日は、Coniエコシステムがこれをいかにエレガントに解決するかを、認知的集中のために設計された2つの新しいWebアプリを通じて紹介できることを嬉しく思います。

これら2つのアプリケーションは、バイノーラルビートを使用して、深い集中力、記憶の想起、認知機能の向上に関連する特定の脳波周波数である40Hzのガンマ波を生成します。しかし、本当の魔法はその裏側にあります。これらはすべて完全にConi WASMで書かれているのです。

40Hzガンマ波の科学

技術的な話に入る前に、なぜ40Hzなのでしょうか？ガンマ波は脳波の中で最も速い周波数です。研究によると、脳が40Hzの範囲で活動している時、それは知覚の高まり、問題解決、そしてピーク時の集中力と相関しています。

左耳に60Hz、右耳に100Hzのサイン波を流すことで、脳は正確に40Hzの周波数差（ビート）を知覚します。このプロセスは脳波の同調（ブレインウェーブ・エントレインメント）として知られ、あなたの認知状態を優しくガンマ波へと導きます。

この体験を提供する上でのConiアーキテクチャの柔軟性を実証するために、2つの異なるバージョンのアプリを構築しました。

1. Canvasエディション: `deep-focus-40hz`

最初のアプリケーションは、従来の2D CanvasとDOM APIに依存しています。私たちは独自のreframe_wasmライブラリを活用し、WebAssemblyから直接HiccupスタイルのDOM生成を行うことでUIの状態とレンダリングを処理しました。

オーディオエンジンは、オシレーターをネイティブに近い速度で完全に管理しています。さらに、その場でエンベロープを変調する自動ジェネレーティブ・チャイムシステムを構築し、JSのオーバーヘッドを完全に回避しました。

;; JSバインディング不要の表現力豊かなWebAudioエンベロープ！
(doto (.-gain gain)
  (.linearRampToValueAtTime 0.15 (+ now 2.0))
  (.exponentialRampToValueAtTime 0.001 (+ now 8.0)))

これは、純粋なConiでリアクティブで高性能なオーディオエンジンを構築する完璧な例です。

2. WebGLパワーハウス: `deep-focus-webgl`

Canvasバージョンも素晴らしいですが、Coniのネイティブ処理能力をどこまで押し上げることができるか試してみたくなりました。そこで登場したのがdeep-focus-webgl（社内呼称：Amplifocus）です。

2D Canvasに依存するのではなく、このバージョンは純粋なWebGLを使用して80,000パーティクルのブレイン・マトリックスをレンダリングします。何がそんなにエキサイティングなのでしょうか？

100%純粋なConi: GPUで加速される頂点変換と大規模なパーティクル配列のロジックは、Coni WASM内でネイティブに処理されます。
数学計算のJSオーバーヘッド・ゼロ: Coniの数学ライブラリ（libs/math）を使用することで、高価なJS-WASMブリッジを渡ることなく、数万の頂点に対する複雑な三角関数の変換を計算します。

ネイティブのFloatバッファで3Dジオメトリを形成し、それをGPUに送るのがいかに簡単かをご覧ください。

;; WASMメモリ内で80kの頂点を計算し、一気にGPUへ送信！
(f32-set! *base-points* idx final-x)
(f32-set! *base-points* (+ idx 1) final-sy)
(f32-set! *base-points* (+ idx 2) (* z 1.1))

;; 静的ジオメトリを一度だけアップロード
(gl/upload-static-data @*gl-state* (js/float32-buffer *base-points*))

Float配列を一度割り当て、ネイティブにジオメトリを計算し、バッファリングされた一撃でGPUに転送します。