今日拆解 · Infinite Liquid Glass

• Live: https://infinite-liquid-glass.shader.se/（同站别名 https://infinite-jelly-glass.shader.se/ 亦 200）
• Author: Shader Development Studio（Filip Kantedal / Jacob / Simon）
• Source / 教程: https://tympanus.net/codrops/2026/09/08/building-an-infinite-liquid-glass-grid-with-three-js-webgpu-and-tsl/
• Bundle: Next.js App Router 产物 /_next/static/immutable/chunks/*.js（含 turbopack-*.js）
• 证据：对本页 HTML + 主 chunk（含 REVISION:"185"、WebGPURenderer、@pmndrs/glyph、window.next.version:"16.3.0"）的抓取核对；Codrops 教程作对照

为何选它

8 条里它视觉冲击最强：一整面「果冻玻璃」视频卡片，拖一下会像布料一样晃、折射、色散，却没有任何场景灯光。Codrops 2026-09-08 刚拆完，社交向热度也在；比精美落地页更值得当今日最炫。

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

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

1. WebGPU + TSL 假玻璃（确认）

卡片是细分平面，不是厚玻璃网格。用圆角矩形 SDF 算到边缘的距离，再做成高度/法线，在 MeshBasicNodeMaterial 的 colorNode 里做折射采样、Fresnel 环境反射和边缘 rim。场景里没有灯——「亮」全是假出来的。

2. 视频当折射内容（确认）

折射采样的是卡片自己的视频纹理（教程：HLS 流作纹理）。多 tap、不同 IOR → 色边色散。TSL 里用 JS for 展开 tap 次数。

3. 「无限」网格其实在球面上（确认 · 教程 + 结构）

平面坐标 wrap 后映射到大球表面，中间正对你、边缘侧倾缩小；拖出边界的卡片会从另一边接回来。推测：实例化或对象池复用卡片 mesh。

4. 拖拽弹簧（确认库 · 细节推测）

Motion 的 motionValue / pan 手势在 chunk 中出现；教程写 position/velocity 存在 React 外，R3F 帧循环直读、拖拽时零 re-render。

5. 真的「液」——GPU 布料（确认）

教程更新：XPBD cloth，TSL compute。Bundle 里有 viscosity、bending、anchorDamping 与 compute pass。卡片坐在布料补丁上，拖网格会滞后、起涟漪再回弹。文字后来改用 @pmndrs/glyph MSDF，跟着玻璃变形（确认 integration 字符串）。

6. 伪代码（忠实于教程 + bundle 符号）

boot:
  renderer = new WebGPURenderer(...)          # Three r185
  // R3F Canvas on WebGPU
  material = MeshBasicNodeMaterial({ colorNode: fakeGlassTSL(...) })
  labels = pmndrs/glyph MSDF on cards

fakeGlassTSL(uv):
  d = roundedBoxSDF(uv)
  height = bevelHeight(d)
  normal = finiteDifference(height)
  color = chromaticRefract(videoTex, normal, ior, dispersionTaps)
  color = mix(color, envSample(reflect), fresnel) + rim(d)
  return color

cloth (each frame, GPU):
  XPBD / constraint step: distance + bending + anchors + viscosity
  write card positions on sphere patch
  drag force from Motion pan velocity

drag:
  Motion pan → motionValue(x,y) → frame loop reads (no React re-render)

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

1. Next.js + R3F，主路径只用 three/webgpu + TSL。
2. 先做平面卡片 + SDF 假玻璃 + 视频折射（单 pass，不开灯）。
3. wrap 网格映射到球面；Motion pan 驱动偏移。
4. 再加 TSL compute 布料（粘度、弯曲、锚点）。
5. 标签用 @pmndrs/glyph MSDF，避免 DOM 跟不上布料形变。
6. 用 ?debug 暴露白边、IOR、粘度等参数。