今日拆解 · Liquid Geo

• Live: https://robert.leitl.dev/artifacts/liquid-geo/
• Author: Robert Leitl
• Source: https://github.com/robert-leitl/liquid-geo
• Bundle: /artifacts/liquid-geo/index-be83070f.js（约 540 KB）+ index-6ca6b2e6.css
• 资产：assets/bead.glb、assets/normal.png
• 证据目录：本文件夹（index.html、JS/CSS、package.json、README-upstream.md）

为何选它

8 条里它把《超人：钢铁之躯》里的液态几何界面搬进浏览器：球面上跑 SPH 流体，珠子可被指针拨动，再配合麦克风录 5 秒音频、失真回放，球壳跟着 FFT 鼓动。WebGL2 + twgl + Tone.js + loaders.gl 一条管线讲完，比漂亮落地页更值得拆。

实际在源码里找到的技术栈

package.json 还写明项目 version: 2.0.0。README 写明：SPH fluid on sphere surface、screen-space halo/bloom、Tone.js 录音与失真回放。

核心效果怎么工作（源码 + 标明推测）

1. WebGL2 场景启动（确认）

canvas.getContext("webgl2", { antialias: false, alpha: false })；用 twgl 编译/绑定 program；球体法线贴图走 assets/normal.png。

2. 球面 SPH + 珠子（确认 + 推测）

README：*SPH fluid simulation on sphere surface*（作者另有 gpgpu-2d-sph 仓库）。珠子网格来自 bead.glb（loaders.gl）。推测：粒子位置在 GPU/类 GPGPU 缓冲里更新，再实例化或逐珠绘制到球面；指针位移写入力场。

3. 录音 5 秒 + 失真回放（确认）

类字段：MAX_RECORD_LENGTH = 5、FFT_BUFFER_SIZE = 256；#record-button / #playback-button。getUserMedia → MediaRecorder 收集 audioChunks；回放路径走 Web Audio / Tone（bundle 含 Analyser、distortion、Player 等符号）。

4. 音频驱动球壳（确认 + 推测）

Analyser / FFT 相关符号密集；README：*the sphere responds to the audio signal*。推测：每帧把 frequency bin 能量映射到球面位移或噪声强度。

5. Halo / Bloom（确认）

README 写明 screen-space halo and bloom（参考 John Chapman pseudo lens flare）；bundle 内 halo ×16、bloom ×5、framebuffer ×5。

6. 伪代码（忠实于 README + bundle 结构）

boot:
  gl = canvas.getContext("webgl2", { antialias: false, alpha: false })
  programs = twgl.createProgramInfo(...)   # #version 300 es
  bead = await loaders.gl.load(bead.glb)
  normalTex = twgl.createTexture(gl, { src: "assets/normal.png" })
  audio = new AudioController(recordBtn, playbackBtn)
    # MAX_RECORD_LENGTH=5, FFT_BUFFER_SIZE=256

record:
  stream = await getUserMedia({ audio: true })
  mediaRecorder = new MediaRecorder(stream)
  // ≤5s → audioChunks → blob

playback:
  Tone / AudioContext graph: Player → distortion → Analyser(FFT 256) → Destination
  each frame: bins = analyser.getFrequencyData()
  displace sphere / particles by bins     # 推测映射细节
  SPH step on sphere surface
  pointer force on beads
  halo + bloom pass
  draw

如果我来重做（步骤清单）

1. Vite + twgl.js@5 + tone@14.7.77 + @loaders.gl/gltf，主路径只用 WebGL2。
2. 写球面 SPH（或先 CPU 弹簧粒子）+ 法线贴图球壳。
3. 加载 bead.glb，指针射线把力打到最近珠子。
4. MediaRecorder 录 ≤5s；Tone Player + Distortion + Analyser(fftSize=256) 回放。
5. 用 FFT 能量推球面位移；再加 Chapman 式 halo/bloom 后处理。
6. ?debug=true 时挂 tweakpane 调粘度、失真、bloom。