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アプリ環境にデプロイしました。こちらから直接アクセスできます：

Health on NicoLabs

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

生きたUIを作成する

GPUのパワー

今すぐ試す