Zui近在重温《33号远征队》的时候，那个令人屏息的过场动画 击中了我——文字仿佛有了生命，在风中逐渐瓦解，化作无数花瓣与尘埃消散在虚空中。这种视觉上的诗意，对于每一个前端开发者或者图形爱好者来说简直就是一种无法抗拒的召唤。你可Neng会想，这种级别的特效，是不是只有游戏引擎才Neng驾驭？其实不然今天我们就来用 Three.js 和 TSL扒一扒这背后的技术实现，kankanNeng不Neng在浏览器里复刻这份感动。

说实话，刚开始动手的时候，我其实心里也没底。毕竟要处理大量的粒子运动，还要保证文字边缘的锐利度，这对性Neng的要求可不是开玩笑的。但当你真正拆解开来会发现这其实是一场关于数学、纹理和时间的精妙协奏。

一、 文字的基石：为什么是 MSDF？

在开始那些花里胡哨的特效之前，我们得先解决一个Zui基础的问题：怎么在 3D 空间里显示文字？

Ru果你直接用 `FontLoader` 加载字体，然后生成 `ShapeGeometry`，你会发现顶点数量多到离谱。每一个笔画，每一个弯曲，dou需要大量的三角形来描绘。这对于简单的静态展示或许还Neng凑合，但一旦我们要Zuo溶解、粒子化这种高频操作，GPU 就会发出惨叫。这时候，MSDF就该登场了。

MSDF 的核心思想非常聪明：它不在贴图里存储颜色，而是存储距离。它利用图片的 R、G、B 三个通道分别存储不同的距离场信息。通过这三个通道的交集运算，GPU Ke以在渲染时实时“计算”出极其锐利的边缘。这意味着，无论你把文字放多大，它始终如矢量般清晰，而顶点成本却极低。这简直就是为我们的需求量身定Zuo的。

要生成 MSDF 文字，我们需要借助 `msdf-bmfont-xml` 这个工具。你Ke以通过命令行把 TTF 字体转换成 JSON 数据和一张 PNG 纹理图。

msdf-bmfont ZhiMangXing-Regular.ttf \
-f json \
-o ZhiMangXing.png \
--font-size 96 \
--distance-range 4 \
--texture-padding 4 \
--border 2 \
--smart-size

kan着生成的这张黑白灰的纹理图，你可Neng觉得其貌不扬，但它里面蕴含的信息量却是巨大的。接下来我们在 Three.js 中加载它：

import {MSDFTextGeometry, MSDFTextNodeMaterial} from "three-msdf-text-utils";
const response = await fetch;
const fontData = await response.json;
// 创建文字几何体
const textGeometry = new MSDFTextGeometry({
    text: "春风若有怜花意，可否许我再少年",
    font: fontData,
    width: 10,
    align: "center",
});
const textureLoader = new THREE.TextureLoader;
const fontAtlasTexture = await textureLoader.loadAsync;
// 关键设置：颜色空间和过滤模式
fontAtlasTexture.colorSpace = THREE.NoColorSpace;
fontAtlasTexture.minFilter = THREE.LinearFilter;
fontAtlasTexture.magFilter = THREE.LinearFilter;
fontAtlasTexture.wrapS = THREE.ClampToEdgeWrapping;
fontAtlasTexture.wrapT = THREE.ClampToEdgeWrapping;
fontAtlasTexture.generateMipmaps = false;
const textMaterial = new MSDFTextNodeMaterial({
    map: fontAtlasTexture,
    transparent: true,
});
textMaterial.alphaTest = 0.5;
const mesh = new THREE.Mesh;

这时候，屏幕上应该Yi经出现了那行诗。别急，好戏还在后头。

二、 溶解的艺术：噪声与阈值

文字有了现在我们要让它“消失”。但不是简单的淡出，而是要像被风侵蚀一样，边缘变得不规则，逐渐剥落。这就需要用到噪声纹理。

我们准备一张 Perlin 噪声图，把它作为蒙版。在 Shader 中，我们根据噪声的值来决定像素的透明度。Ru果噪声值低于某个阈值，我们就把像素丢弃。

这里我们使用 TSL来构建材质节点，这比直接写 GLSL 要直观得多，也geng容易维护。

createTextMaterial {
    const textMaterial = new MSDFTextNodeMaterial;
    // 获取每个字符的 UV 坐标
    const glyphUv = attribute;
    // 采样噪声纹理
    const perlinTextureNode = texture;
    // 增强对比度，让边缘geng硬朗
    const boostedPerlin = pow;
    // 核心逻辑：step 函数Zuo阈值判断
    const dissolve = step;
    textMaterial.colorNode = boostedPerlin;
    const msdfOpacity = textMaterial.opacityNode;
    // Zui终透明度 = 原始透明度 * 溶解蒙版
    textMaterial.opacityNode = msdfOpacity.mul;
    return textMaterial;
}

这里有个小细节，`uProgress` 是一个 uniform 变量，我们通过改变它的值来控制溶解的进度。`step` 函数就像一个无情的守门员，只有当噪声值大于进度值时才允许像素显示。

不过直接用噪声值有时候效果不够理想，因为噪声的值域分布可Neng不均匀。这时候我们Ke以Zuo一个“归一化”处理，把噪声值从 映射到 。

const perlinRemap = clamp(
    perlinTextureNode.sub.div),
    0.0, 
    1.0
);
const dissolve = step;

这行代码本质上是一个线性插值函数的逆运算，它Neng让我们geng精确地控制溶解的起始点和结束点，避免文字还没怎么动就突然全黑了或者拖泥带水不肯消失。

三、 粒子灰尘：模拟风的流动

文字溶解了剩下的物质去哪了？变成了灰尘和花瓣。这部分是整个效果Zui“费显卡”的地方，也是ZuiNeng体现物理感的地方。

为了性Neng，我们肯定不Neng为每一粒灰尘dou创建一个 Mesh。Three.js 提供了 `InstancedMesh`，允许我们一次渲染成千上万个相同的物体。我们需要自定义每个实例的属性，比如出生位置、生命周期、随机种子和大小。

async initialize {
    const dustGeometry = new THREE.PlaneGeometry;
    // 预分配内存，避免运行时 GC
    this.spawnPos = new Float32Array;
    this.birthLifeSeedScale = new Float32Array;
    this.currentDustIndex = 0;
    dustGeometry.setAttribute(
        "aSpawnPos",
        new THREE.InstancedBufferAttribute
    );
    // 把出生时间、生命周期、随机种子、缩放打包进一个 vec4
    dustGeometry.setAttribute(
        "aBirthLifeSeedScale",
        new THREE.InstancedBufferAttribute
    );
    const material = this.createDustMaterial;
    this.dustMesh = new THREE.InstancedMesh;
    return this.dustMesh;
}

注意kan `aBirthLifeSeedScale`，我们把四个 float 数据打包在了一起，这是一种常见的 Shader 优化手段，Neng减少 attribute 的绑定次数。

接下来是材质部分。我们要让粒子动起来。运动的核心公式hen简单：位移 = 速度 × 时间。但为了模拟真实的风，我们需要加上一些随机扰动。

createDustMaterial {
    const material = new THREE.MeshBasicMaterial({
        map: dustTexture,
        transparent: true,
        depthWrite: false, // 关闭深度写入，防止透明遮挡问题
        depthTest: false,
    });
    const aSpawnPos = attribute;
    const aBirthLifeSeedScale = attribute;
    // 解包数据
    const aBirth = aBirthLifeSeedScale.x;
    const aLife = aBirthLifeSeedScale.y;
    const aSeed = aBirthLifeSeedScale.z;
    const aScale = aBirthLifeSeedScale.w;
    // 定义风力参数
    const uWindDirection = uniform.normalize);
    const uWindStrength = uniform;
    const uRiseSpeed = uniform;
    // 计算粒子存在了多久
    const dustAge = time.sub;
    // 基础的风力位移
    const windImpulse = uWindDirection.mul.mul;
    // 向上飘的力
    const rise = vec3, 0);
    // 简单的位移组合
    const driftMovement = windImpulse.add;
    material.positionNode = aSpawnPos
        .add
        .add); // 加上局部偏移
    return material;
}

现在粒子会向左上方飘了。但是这kan起来太整齐了像阅兵一样，一点dou不自然。我们需要给它们加点“性格”，也就是随机的旋转和湍流。

我们Ke以利用噪声纹理来生成随机的力场。根据粒子的位置和出生时间，去采样噪声图，得到一个随时间变化的偏移量。

const uNoiseScale = uniform;
const uNoiseSpeed = uniform;
const uWobbleAmp = uniform;
const randomSeed = vec2, aSeed.mul);
// 噪声采样坐标
const noiseUv = aSpawnPos.xz
    .mul
    .add
    .add));
const noiseSample = texture.x;
const noiseSampleBis = texture)).x;
// 将 0~1 映射到 -1~1
const turbulenceX = noiseSample.sub.mul;
const turbulenceY = noiseSampleBis.sub.mul;
// 生成漩涡力
const swirl = vec3(
    clamp, -1.0, 1.0), 
    turbulenceY.mul, 
    0.0
).mul;
// 把漩涡力加到总位移里
const driftMovement = windImpulse.add.add;

这里我们用了两次噪声采样，第二次的 UV 偏移了一点点，用来模拟 X 轴和 Y 轴方向上的不同湍流。`lifeInterpolation` 是粒子的生命周期进度，我们用它来控制湍流的强度，让粒子在刚出生和快消失时比较平稳，中间阶段Zui活跃。

Zui后别忘了控制粒子的渐隐渐现。我们用 `smoothstep` 来Zuo一个平滑的过渡。

const lifeInterpolation = clamp, 0.0, 1.0);
// 缩放动画：从小变大
const scaleFactor = smoothstep, float, lifeInterpolation);
// 透明度动画：Zui后阶段淡出
const fadingOut = float.sub(
    smoothstep, float, lifeInterpolation)
);
material.opacityNode = fadingOut;

四、 花瓣：赋予几何体生命

灰尘只是前菜，花瓣才是这道视觉大餐的主菜。花瓣和灰尘的逻辑大体一致，dou是基于 `InstancedMesh`，但花瓣有自己的几何模型，而且不Neng像灰尘那样只是简单的平面移动，它需要旋转、弯曲，甚至受光照影响。

我们要让花瓣kan起来是软的。我们Ke以通过修改顶点的位置来实现“弯曲”的效果。假设花瓣的根部在 Y=0，尖端在 Y=1，我们Ke以让 Y 值越大的地方，受风力弯曲的程度越大。

createPetalMaterial {
    const material = new THREE.MeshBasicNodeMaterial({
        transparent: true,
        side: THREE.DoubleSide,
    });
    // 定义旋转矩阵函数
    function rotX {
        const c = cos;
        const s = sin;
        const ns = s.mul;
        return mat3;
    }
    // ... rotY, rotZ 同理
    // 获取当前顶点的 UV 坐标
    const y = uv.y;
    // 越靠近尖端，弯曲权重越大
    const bendWeight = pow);
    // 动态计算弯曲角度
    const bend = bendWeight.mul.mul.mul));
    // 应用弯曲矩阵
    const B = rotX;
    // geng新局部位置
    const positionLocalUpdated = B.mul;
    // ...后续位置计算
}

有了弯曲，还得有旋转。花瓣在空中是翻滚的。我们Ke以根据噪声值和生命周期来计算三个轴的旋转角度。

const baseX = aSeed.mul.mod.mul;
const baseY = aSeed.mul.mod.mul;
const baseZ = aSeed.mul.mod.mul;
const spin = dustAge.mul.mul;
const rx = baseX.add.mul));
const ry = baseY.add.mul));
const rz = baseZ.add);
// 组合旋转矩阵
const R = rotY.mul).mul);
// Zui终位置 = 旋转)
const finalPositionLocal = R.mul);

Zui后为了让花瓣geng有立体感，我们Ke以加一点简单的光照计算。虽然 `MeshBasicMaterial` 不受光照影响，但我们Ke以手动计算法线和光线的点积。

const uLightPosition = uniform);
// 计算经过旋转后的法线方向
const normalUpdate = normalize));
const worldPosition = aSpawnPos
    .add
    .add));
// 计算光照方向
const lightDirection = normalize);
// 计算受光强度
const facing = clamp), 0.0, 1.0);
// 混合颜色
const petalColor = mix.equal);
material.colorNode = petalColor.mul;

这里我们用 `instanceIndex` 来随机混合红色和白色，模拟花瓣颜色的多样性。`facing` 值决定了花瓣是亮是暗，这就产生了一种伪 3D 的光照效果。

五、 整合：让一切动起来

现在文字会溶解，灰尘会飞，花瓣会舞。Zui后一步，就是用 GSAP 把这些动作串联起来像指挥家一样控制整个流程。

我们需要一个触发函数，当用户点击或者时间到了就开始播放动画。

triggerGommage {
    // 防止重复触发
    if  return;
    this.uProgress.value = 0.0;
    // 1. 启动灰尘生成器
    this.spawnDustTween = gsap.to({}, {
        duration: this.dustInterval,
        repeat: -1,
        onRepeat:  => {
            // 在文字网格的随机位置生成一粒灰尘
            const p = this.msdfTextEntity.getRandomPositionInMesh;
            this.dustParticlesEntity.spawnDust;
        },
    });
    // 2. 启动花瓣生成器
    this.spawnPetalTween = gsap.to({}, {
        duration: this.petalInterval,
        repeat: -1,
        onRepeat:  => {
            const p = this.msdfTextEntity.getRandomPositionInMesh;
            this.petalParticlesEntity.spawnPetal;
        },
    });
    // 3. 推进溶解进度
    this.gommageTween = gsap.to(this.uProgress, {
        value: 1.0,
        duration: 3.0, // 持续3秒
        ease: "linear",
        onComplete:  => {
            // 动画结束，清理 Tween
            this.spawnDustTween?.kill;
            this.spawnPetalTween?.kill;
            this.spawnDustTween = null;
            this.spawnPetalTween = null;
            this.gommageTween = null;
        },
    });
}

这里的 `getRandomPositionInMesh` 是一个辅助函数，用来计算文字包围盒内的随机坐标，确保粒子和花瓣是从文字内部“长”出来的。

getRandomPositionInMesh {
    const min = this.worldPositionBounds.min;
    const max = this.worldPositionBounds.max;
    const x = Math.random *  + min.x;
    const y = Math.random *  + min.y;
    const z = Math.random *  + min.z;
    return new THREE.Vector3;
}

六、 ：代码与浪漫的共鸣

当你把这一大堆代码敲完，点击运行，kan着屏幕上的文字在风中一点点解构，化作漫天飞舞的花瓣，那种成就感是无与伦比的。这不仅仅是技术的展示，geng是一种浪漫的表达。

我们用冰冷的数学公式模拟了风的形状，用枯燥的二进制数据重现了生命的凋零与新生。这就是图形编程的魅力所在吧。虽然现在的效果可Neng还达不到《33号远征队》那种电影级的质感，但只要我们不断调整参数，优化着色器，甚至加入geng复杂的物理模拟，谁说浏览器里不Neng诞生奇迹呢？

所以Ru果你对代码还有疑问，或者对效果有新的想法，不妨自己动手试一试。毕竟Zui好的答案，往往就在你自己的屏幕上。

---