Webgl on NicoLabs

Coni中的程序化音频与WebGL WebAssembly体验

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

仅在过去的24小时内，我们就突破了Coni WebAssembly生态系统的边界，制作了整套程序化视听网络体验。通过将Coni宏系统与原始WebGL及WebAudio API相结合，我们成功地在浏览器中原生搭建、编译和部署了复杂的图形和音乐系统，并且绝对零外部资产依赖。

让我们来看看我们构建的这五个新应用。您可以在Coni WASM Gallery的浏览器中原生体验它们。

1. 极简Techno视觉化工具 (Minimal Techno Visualizer)

主题: 黑暗、充满驱动力的算法俱乐部能量。 链接: Minimal Techno App

我们想要证明Coni能够编排实时的程序化音乐生成，并将其与繁重的3D几何渲染完美同步。

音频引擎: 定制的140 BPM时间线引擎在16分音符的弱拍上触发模拟风格的锯齿波低音线，搭配808风格的合成底鼓，并在高潮段（Drop）引入清脆的基于噪声的军鼓/拍手声。
WebGL细节: 我们映射了5,000个在16小节“Breakdown”期间反转重力的下落雨粒，以及一个致密脉动的3D几何核心，它在每次底鼓敲击时猛烈绽放，并根据音序器状态从冷青色转变为火橙色。

2. 999Hz 神圣无限 (Divine Infinity 999Hz)

主题: 空灵的数学疗愈。 链接: Divine Infinity 999Hz

这个应用以神圣频率疗愈的概念为核心，是纯粹数学与环境音频的完美结合。

音频引擎: 它生成999Hz的“天使频率”正弦波，并辅以微妙的8Hz Theta双耳节拍，以诱导深度放松。
WebGL细节: 我们在GLSL顶点着色器中使用纯三角函数，将500,000个粒子映射到“伯努利双纽线”（无限大符号）上。它在3D空间中完美渲染，带有微妙的环境光晕和基于深度的不透明度渐隐。

3. 清除脑雾 40Hz (Clear Brain Fog 40Hz)

主题: 几何的清晰与专注。 链接: Clear Brain Fog 40Hz

旨在驱散精神杂念，此应用使用令人着迷的几何图形搭配接地频率。

音频引擎: 通过微调两个振荡器（左耳432Hz，右耳472Hz）创建的纯40Hz双耳节拍。
WebGL细节: 我们在顶点着色器中编程了一个拥有5片旋转花瓣的3D繁花曲线。复杂的重叠曲线产生了一种不断向前运动的错觉，而摄像机实际上根本没有移动，使眼睛陷入一种心流状态。

4. WebGL呼吸引导应用 (WebGL Guided Breathing App)

主题: 控制下的节奏感冥想。 链接: Breathing App

WebGL呼吸引导: 6-2-6的交互式体验

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

在当今快节奏的数字世界中，心理健康和专注力至关重要。继我们的脑波同步应用取得成功后，我们决定解决幸福感的另一个方面：有意识的呼吸。

我们很高兴揭晓我们最新的Coni WASM应用程序：WebGL呼吸应用 (WebGL Breathing App)。这是一个从零开始构建的视听体验，旨在引导您完成一段平静的6-2-6呼吸练习（吸气6秒，屏息2秒，呼气6秒）。

打造栩栩如生的UI

与仅仅显示一个不断变大圆圈的传统呼吸计时器不同，我们希望构建一些让人感觉有生命力的东西。我们设计了一个交互式菜单，您可以在其中设置您的心境 (Mood)——从平静 Calm（青色）、温暖 Warm（橙色）或专注 Focus（紫色）中选择。

当您开始练习时，背景环境噪音和程序生成的铃声开始播放。这些声音完全由Web Audio API驱动，并由原生Coni函数无缝调度。通过将逻辑与标准JS运行时的卡顿隔离开来，音频保持完美的连贯性且没有抖动。

GPU的力量

在底层，应用程序生成一个由30,000个几何粒子组成的簇，这些粒子在WebAssembly中原生计算和缓存。我们将这些点连同您选择的心境颜色以及一个连续的 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体验，感觉非常自然，而不是机械生硬的。

针对Coni原生Float32数组的硬核混沌测试

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

当您在浏览器中构建高性能应用程序时，JavaScript通用的 Number 类型通常是不够的。您需要原始的、连续的内存数组。在Coni WASM中，我们在计算最密集的应用程序上严重依赖原生的WebAssembly float32 数组。

Float32在Coni中到底用在哪里？

原生 float32 数组（make-float32-array、f32-set!、f32-get）是Coni性能层的绝对主干。您会发现它们驱动着：

WebGL几何体: 在我们的 deep-focus-webgl 应用中，我们使用 float32 数组在原生层面通过数学方式塑造一个拥有80,000个顶点的大脑矩阵（240,000个浮点数！），然后通过 js/float32-buffer 将其一次性发送给GPU。
游戏引擎粒子系统: 对于像 flappy-bird 或 neon-boids 这样的游戏，并行的 float32 数组无需垃圾回收的停顿，即可跟踪数以千计的X/Y坐标、速度和生命周期。
原始DSP音频: 我们的 sound-nodes 合成器在将复杂的脉冲响应和噪声波形映射到WebAudio通道之前，使用 float32 数组在原生层面计算它们。

错误所在：类型强制转换与 `f64.reinterpret_i64`

因为这些数组极其关键，它们中的任何错误都将是灾难性的。最近，我们发现了一个问题：将一个精确的整数（如 150）传入 f32-set! 时，会莫名其妙地产生 0.0。

到底发生了什么？在较早版本的WASM编译器中，将整数传递给浮点数setter会导致编译器错误地使用 f64.reinterpret_i64 来解释这些位，从而完全扰乱了底层的值。

解决方案：Float32混沌测试 (Chaos Testing)

我们修补了编译器，以便在插入内存之前将整数正确地强制转换为浮点数，但我们需要一个保证，确保它永远不会再次退化。于是，混沌测试登场了。

在新的 float32_coercion_test.coni 测试套件中，我们构建了一个硬核的混沌测试。我们不是仅仅测试几个顺利通过的数字，而是分配了一个巨大的数组，并用确定性的、伪随机的循环来猛烈敲击它。

(deftest test-f32-chaos
  "针对float32数组边界和类型转换的硬核混沌测试。"
  (let [size 1000
        arr (make-float32-array size)]
    (loop [i 0]
      (if (< i size)
        (let [
          ;; 混合生成极端边缘用例：
          val (if (= (mod i 4) 0) (- 0 i)                   ;; 负整数
                (if (= (mod i 4) 1) (* i 10000)             ;; 大正整数
                  (if (= (mod i 4) 2) (+ i 0.5)             ;; 精确的float32小数
                    0)))                                    ;; 零（整数）
        ]
          (f32-set! arr i val)
          (recur (+ i 1)))
        nil))
    ;; ... 验证循环 ...

通过故意将极端正整数、负边界值、纯零和带有小数的浮点数这种残酷的混合物向 f32-set! 函数抛出1,000次，我们保证了能避免WASM陷阱（traps），并且类型强制转换变得坚不可摧。

用纯Coni Lisp编写WebGL着色器！

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

在上一篇文章中，我们通过编排一个由80,000个粒子组成的WebGL矩阵展示了Coni WASM的原始威力。但在WebGL流水线中，始终存在一个挥之不去的烦恼：着色器本身。

如果您写过WebGL代码，您一定深有体会。您最终会将顶点着色器和片段着色器写成庞大、混乱的字符串字面量，散布在整个代码库中。您失去了语法高亮、格式化，而且——对于Lisp黑客来说最悲惨的是——您失去了结构化编辑（Paredit/Slurp/Barf）。

今天，我们非常高兴地宣布，我们通过新的 libs/webgl/src/glsl.coni 库征服了最后的这个前沿阵地。

您现在完全可以使用Coni的原生Lisp语法编写您的GLSL着色器了。

`defshader` 登场

通过利用Coni强大的AST（抽象语法树）和宏系统，我们构建了 defshader。它接受标准的Lisp形式、类型和数学运算，并在它们到达GPU之前，自动将它们转译为严格的GLSL。

看看为我们的Amplifocus粒子引擎编写的这个片段着色器是多么优雅：

(require "libs/webgl/src/glsl.coni" :all)

(defshader fs-src
  (precision mediump float)
  (varying vec4 v_color)
  
  (defn void main []
    ;; 原生数学运算与坐标映射！
    (set vec2 coord (- gl_PointCoord (vec2 0.5 0.5)))
    (set float dist (length coord))
    
    (if (> dist 0.5)
      (discard))
    
    ;; 使用Lisp S-表达式进行发光（Glow）计算
    (set float glow (- 1.0 (* dist 2.0)))
    (set vec4 final_color (* v_color glow))
    (set gl_FragColor final_color)))

为什么这能颠覆游戏规则？

不再有字符串字面量: 您的着色器是一等代码。它们与应用程序的其余部分格式完美统一。
AST级别的验证: Coni编译器可以在它尝试于浏览器中编译WebGL程序之前，就解析并验证您的着色器结构。
结构化编辑: 您可以使用标准的Lisp结构化编辑工具来slurp、barf和操作复杂的GPU数学计算。试着用C风格的GLSL字符串做这些试试！
无缝集成: 将其编译成可用的WebGL着色器极其简单，只需调用我们的 core-gl/gl-shader 函数即可：(core-gl/gl-shader gl (.-FRAGMENT_SHADER gl) fs-src)。

专为浏览器打造的全栈Lisp

有了这次更新，整个流水线终于完整了。从使用 reframe 的DOM操作，到WebAudio合成，到WASM浮点缓冲，再到现在实际的GPU顶点变换——100%都是Coni。

在Coni WASM中构建40Hz认知专注应用

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

浏览器中的WebAssembly一直承诺提供令人难以置信的性能，但将其与WebAudio和WebGL等Web API顺畅连接有时感觉像是在解谜。今天，我们非常高兴地展示Coni生态系统如何通过引入两个专为认知专注而设计的全新Web应用来优雅地解决这个问题。

这两个应用程序使用双耳节拍生成40Hz伽马频率——一种与深度专注、记忆唤起和认知提升相关的特定脑波频率。但真正的魔力在底层：它们完全是用Coni WASM编写的。

40Hz伽马波的科学

在深入探讨技术之前，为什么选择40Hz？伽马波是脑波频率中最快的。研究表明，当大脑在40Hz范围内运作时，它与敏锐的感知、问题解决能力和巅峰的注意力相关联。

通过在左耳播放60Hz的正弦波，在右耳播放100Hz的正弦波，大脑会感知到恰好40Hz的频率差“节拍”。这个过程被称为脑波同步（brainwave entrainment），它会温和地将您的认知状态推入伽马频率。

为了展示Coni架构在提供这种体验方面的灵活性，我们构建了该应用的两个截然不同的版本：

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桥梁。

下面看看我们在原生浮点缓冲中塑造3D几何体并将其发送给GPU是多么毫不费力：

;; 在WASM内存中处理8万个顶点，一次性发送给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*))

我们只需分配一次浮点数组，原生处理几何数据，然后通过单一缓冲操作将其瞬间送至GPU。