今日拆解 · WebGPU Gommage

• Live: https://tympanus.net/Tutorials/WebGPUGommage/
• Article: https://tympanus.net/codrops/2026/01/28/webgpu-gommage-effect-dissolving-msdf-text-into-dust-and-petals-with-three-js-tsl/
• Author: Thibault Introvigne（Codrops / README）
• Source: https://github.com/WallabyMonochrome/WebGPU-clair-obscur-gommage-codrops
• Bundle: /assets/index-EDTSsNMI.js（约 1.99 MB）+ /assets/index-DLrsDo2-.css
• 证据目录：本文件夹（index.html、JS/CSS）

为何选它

8 条里它把《Clair Obscur: Expedition 33》里的「Gommage」消解瞬间搬到浏览器：MSDF 文字被噪声驱动的 TSL 着色器咬碎，同步喷出尘埃与旋转花瓣粒子，再用 MRT 选择性 bloom 收尾。WebGPU + TSL + InstancedMesh 一条管线讲完，比漂亮落地页更值得拆。

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

package.json 还写明：three: ^0.181.0，与 window.__THREE__="181" 一致。

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

1. WebGPU 场景启动（确认）

文章摘录：new THREE.WebGPURenderer({ antialias: true }); await this.#threejs.init();，tone mapping 用 ACESFilmicToneMapping。

2. MSDF 文字溶解（确认 + 推测）

用 three-msdf-text-utils 生成 MSDF mesh；片断/TSL 里用 noise（bundle 中 noise ×65）驱动 dissolve 阈值。推测：阈值之上的 texel 透明度归零，同时把同一噪声场喂给粒子发射，保证文字与粒子「同一刀」切开。

3. 尘埃 + 花瓣 InstancedMesh（确认）

文章目录步骤：

1. Create a noise-driven dissolve effect
2. Spawn and animate dust particles with InstancedMesh
3. Spawn petal particles with bend + spin
4. Add selective bloom with MRT nodes

花瓣用 GLB 模型（文章提到 public/models/petal.glb）。

4. 选择性 Bloom / MRT（确认）

文章写明 *selective bloom using MRT*；bundle 内 mrt ×20、bloom ×5。

5. 伪代码（忠实于教程结构）

boot:
  renderer = new WebGPURenderer({ antialias: true })
  await renderer.init()
  renderer.toneMapping = ACESFilmicToneMapping
  text = MSDFText(fontAtlas, "GOMMAGE…")   # three-msdf-text-utils
  dust  = new InstancedMesh(dustGeo, dustNodeMat, N)
  petals = new InstancedMesh(petalGeo, petalNodeMat, M)  # petal.glb

each frame / on trigger (GSAP 3.14.2 timeline):
  progress = gsapProgress  # 0→1
  textMat.dissolve = progress          # TSL Fn + noise
  emit dust/petals where noise crossed
  petal instances: bend + spin
  post = mrt bloom (selective)
  renderer.render(scene, camera)

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

1. Vite + three@0.181.0，主路径只用 WebGPURenderer + TSL（无适配器时给降级提示）。
2. 用 msdf-bmfont 生成字体图集；three-msdf-text-utils 出字。
3. 写 TSL Fn：Perlin/噪声采样 → dissolve mask。
4. 两个 InstancedMesh：dust（小四边形）+ petal（GLB）；用同一 progress 驱动发射与自旋。
5. MRT 选择性 bloom，只让亮粒子/边缘进光晕。
6. GSAP timeline 串起「静置 → 消解 → 粒子爆发 → 收束」。

一句话

WebGPU Gommage 用 Three r181 + TSL 把 MSDF 字咬碎成尘埃与花瓣，是今天技术浓度最高的一刀。