http://blog.hellonico.info/zh/tags/health/ Recent content in Health on NicoLabs Hugo zh Mon, 29 Jun 2026 23:35:00 +0900 http://blog.hellonico.info/zh/posts/coni/breathing-app-webgl/ Mon, 29 Jun 2026 23:35:00 +0900 http://blog.hellonico.info/zh/posts/coni/breathing-app-webgl/ <p>在当今快节奏的数字世界中，心理健康和专注力至关重要。继我们的脑波同步应用取得成功后，我们决定解决幸福感的另一个方面：<strong>有意识的呼吸</strong>。</p> <p>我们很高兴揭晓我们最新的Coni WASM应用程序：<strong>WebGL呼吸应用 (WebGL Breathing App)</strong>。这是一个从零开始构建的视听体验，旨在引导您完成一段平静的6-2-6呼吸练习（吸气6秒，屏息2秒，呼气6秒）。</p> <h3 id="打造栩栩如生的ui">打造栩栩如生的UI</h3> <p>与仅仅显示一个不断变大圆圈的传统呼吸计时器不同，我们希望构建一些让人感觉有生命力的东西。我们设计了一个交互式菜单，您可以在其中设置您的<strong>心境 (Mood)</strong>——从<em>平静 Calm</em>（青色）、<em>温暖 Warm</em>（橙色）或<em>专注 Focus</em>（紫色）中选择。</p> <p><img class="lazyload" src="http://blog.hellonico.info/svg/loading.min.svg" data-src="../breathe_in_01.png" data-srcset="../breathe_in_01.png, ../breathe_in_01.png 1.5x, ../breathe_in_01.png 2x" data-sizes="auto" alt="../breathe_in_01.png" title="Breathing App Interface - Calm" /></p> <p>当您开始练习时，背景环境噪音和程序生成的铃声开始播放。这些声音完全由Web Audio API驱动，并由原生Coni函数无缝调度。通过将逻辑与标准JS运行时的卡顿隔离开来，音频保持完美的连贯性且没有抖动。</p> <h3 id="gpu的力量">GPU的力量</h3> <p>在底层，应用程序生成一个由<strong>30,000个几何粒子</strong>组成的簇，这些粒子在WebAssembly中原生计算和缓存。我们将这些点连同您选择的心境颜色以及一个连续的 <code>u_breath_factor</code> 传递给WebGL着色器。</p> <p>当您吸气时，球体膨胀，其半径动态缩放，同时其顶点通过直接在顶点着色器中应用的三角正弦和余弦操作而轻柔起伏。颜色强度也会增加，模拟能量的扩张。</p> <p>当您呼气时，球体收缩成一个紧凑的核心。</p> <p><img class="lazyload" src="http://blog.hellonico.info/svg/loading.min.svg" data-src="../breathe_in_02.png" data-srcset="../breathe_in_02.png, ../breathe_in_02.png 1.5x, ../breathe_in_02.png 2x" data-sizes="auto" alt="../breathe_in_02.png" title="Breathing App WebGL Particle Sphere" /></p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-clojure" data-lang="clojure"><span style="display:flex;"><span><span style="color:#75715e">;; 我们完全在WASM中计算阶段</span> </span></span><span style="display:flex;"><span>(<span style="color:#66d9ef">defn </span>update-phase [t phase-text] </span></span><span style="display:flex;"><span> (<span style="color:#66d9ef">let </span>[cycle-time (<span style="color:#a6e22e">fmod</span> t <span style="color:#ae81ff">14000.0</span>) </span></span><span style="display:flex;"><span> inhale-time <span style="color:#ae81ff">6000.0</span> </span></span><span style="display:flex;"><span> hold-time <span style="color:#ae81ff">2000.0</span> </span></span><span style="display:flex;"><span> exhale-time <span style="color:#ae81ff">6000.0</span>] </span></span><span style="display:flex;"><span> (<span style="color:#66d9ef">if </span>(&lt; cycle-time inhale-time) </span></span><span style="display:flex;"><span> <span style="color:#75715e">;; ... 平滑扩展的数学逻辑</span> </span></span></code></pre></div><p>通过将视觉变换卸载到GPU，并在WASM中原生保持严格的状态同步，我们实现了如丝般顺滑的60fps体验，感觉非常自然，而不是机械生硬的。</p>