今日拆解 · Lumin Hands

• Live: https://luminhands.netlify.app/
• Author: Mathis Biabiany
• Source / 教程: https://tympanus.net/codrops/2026/09/07/drawing-with-light-an-exploration-of-lit-gpu-tubes-with-tsl-and-webgpu/
• Bundle: Vite 产物 /assets/index-CFuvyyFx.js（HTML 含 /vite.svg、type="module"）
• 证据：对本页 HTML + 主 bundle（含 const _0="185"、WebGPURenderer、MeshStandardNodeMaterial、positionNode、UnrealBloomPass、SMAANode、StorageBuffer、instanceIndex）的抓取核对；Codrops 教程作对照

为何选它

8 条里它视觉冲击最强：两只「手」不是建模出来的实体，而是成百上千条发光丝线（lit GPU tubes）织成的轮廓——点击会炸开冲击波与光晕，像在黑暗里用电光描边。Codrops 2026-09-07 刚拆完 WebGPU/TSL 管线，比静态酷站更值得当今日最炫。

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

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

1. WebGPU + Three.js r185 主路径（确认）

页面用 WebGPURenderer 启动；data-engine 写成 three.js r185 webgpu。没有走经典 WebGL 主渲染器。

2. 发光丝线 = 实例化 lit tubes（确认 · TSL）

每条「丝」是一根细管。材质走 MeshStandardNodeMaterial，用 positionNode（以及 normalNode）在 TSL 里算管壁上的点——所以管子可以沿手的轮廓弯曲、发光，而不必为每根丝准备独立静态几何。

3. StorageBuffer + instanceIndex 铺开成百上千根（确认）

丝线数量很大时，位置/参数放进 StorageBuffer，着色器里用 instanceIndex 取自己的那一份。这是「两只手由大量相似丝线组成」的 GPU 侧实现。

4. frustumCulled 必须关掉（确认）

顶点位置由 shader/positionNode 改写后，CPU 侧的包围盒不再可靠；bundle 多次出现 frustumCulled。不关就会出现丝线莫名消失。

5. 发光：UnrealBloomPass + emissive / MRT（确认类名）

UnrealBloomPass 与 mrtNode、大量 emissive 符号同在。管子本身偏自发光，bloom 只把亮部「晕」出去，所以黑暗背景上丝线像霓虹。

6. SMAA 后处理（确认）

SMAANode 做抗锯齿，细管边缘才不会锯成毛刺。

7. 指针与点击冲击波（确认有 Pointer；冲击波细节 = 教程）

Bundle 里 Pointer / click 极多，说明交互主路径是指针。Codrops 教程写明点击会产生冲击波并驱动光晕——具体波前如何改 positionNode / 亮度，以教程为准（标为教程细节）。

8. 伪代码（忠实于 bundle 符号 + 教程结构）

boot:
  renderer = new WebGPURenderer(...)     # Three.js r185
  mat = MeshStandardNodeMaterial({
    positionNode: tubePositionTSL(...),  # 弯曲管子
    normalNode: ...,
    // emissive 路径供 bloom
  })
  strands: StorageBuffer + instanceIndex  # 成百上千根
  mesh.frustumCulled = false

post:
  UnrealBloomPass (emissive / mrtNode)
  SMAANode

pointer:
  Pointer + click → shockwave / glow     # 教程细节
  Tweakpane 调参（debug）

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

1. Vite + three/webgpu，锁定 Three.js r185，主路径只用 WebGPURenderer。
2. 先做单根 lit tube：MeshStandardNodeMaterial + positionNode 弯管。
3. 用 StorageBuffer / instanceIndex 铺成手形轮廓；关掉 frustumCulled。
4. 加 UnrealBloomPass（emissive）和 SMAANode。
5. Pointer 点击写冲击波，用 Tweakpane 暴露管径、bloom、波强度。
6. 用较新的 Chrome / Edge 验证 WebGPU；对照 Codrops 2026-09-07 教程补交互手感。