Three.js溶解动画着色器 - 噪声驱动消融效果详解

溶解动画效果预览

简介

本示例展示如何使用Three.js实现物体溶解动画效果。通过噪声函数和阈值控制，创造出物体从实体逐渐消融成粒子的视觉效果，常用于游戏中的死亡特效、物质转化动画等场景。

在线演示地址 | 完整源代码

核心技术栈

技术 说明 难度等级
Three.js WebGL 3D渲染引擎 ⭐⭐⭐
ShaderMaterial 自定义着色器材质 ⭐⭐⭐
噪声函数 3D Perlin噪声 ⭐⭐⭐⭐
阈值控制 溶解边界 ⭐⭐⭐
边缘发光 消融边缘效果 ⭐⭐⭐

算法原理解析

1. 3D噪声函数

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 简化的3D Perlin噪声
float noise3D(vec3 p) {
    vec3 i = floor(p);
    vec3 f = fract(p);

    // 平滑插值
    vec3 u = f * f * (3.0 - 2.0 * f);

    // 角落值
    float a = dot(random3(i), f);
    float b = dot(random3(i + vec3(1,0,0)), f - vec3(1,0,0));
    float c = dot(random3(i + vec3(0,1,0)), f - vec3(0,1,0));
    float d = dot(random3(i + vec3(1,1,0)), f - vec3(1,1,0));
    float e = dot(random3(i + vec3(0,0,1)), f - vec3(0,0,1));
    float f2 = dot(random3(i + vec3(1,0,1)), f - vec3(1,0,1));
    float g = dot(random3(i + vec3(0,1,1)), f - vec3(0,1,1));
    float h = dot(random3(i + vec3(1,1,1)), f - vec3(1,1,1));

    return mix(mix(mix(a, b, u.x), mix(c, d, u.x), u.y),
               mix(mix(e, f2, u.x), mix(g, h, u.x), u.y), u.z);
}

2. 溶解着色器

GLSL
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
uniform float uDissolve;  // 溶解进度 0-1
uniform float uTime;
varying vec3 vPosition;
varying vec3 vNormal;

void main() {
    // 计算3D噪声值
    float noise = noise3D(vPosition * 3.0 + uTime * 0.1);

    // 溶解阈值
    float threshold = uDissolve;

    // 低于阈值的部分被丢弃
    if (noise < threshold) {
        discard;
    }

    // 边缘发光
    float edgeWidth = 0.05;
    float edge = smoothstep(threshold - edgeWidth, threshold, noise);

    // 边缘颜色（橙红色）
    vec3 edgeColor = vec3(1.0, 0.4, 0.1);

    // 基础颜色
    vec3 baseColor = vec3(0.8, 0.3, 0.2);

    // 光照计算
    vec3 lightDir = normalize(vec3(1.0, 1.0, 1.0));
    float diff = max(dot(vNormal, lightDir), 0.0);

    vec3 color = baseColor * diff;
    color = mix(edgeColor, color, edge);

    gl_FragColor = vec4(color, 1.0);
}

3. 粒子化消融效果

GLSL
1
2
3
4
5
6
7
8
// 在临界点生成粒子
vec3 particles = vec3(0.0);
float particleThreshold = threshold - 0.01;

if (noise < threshold && noise > particleThreshold) {
    float particleIntensity = 1.0 - (noise - particleThreshold) / 0.01;
    particles = vec3(particleIntensity) * edgeColor;
}

学习要点总结

入门级知识点

  1. 3D噪声：理解噪声在3D空间中的应用
  2. discard：着色器中的像素丢弃
  3. 阈值控制：溶解边界的实现

进阶级知识点

  1. 边缘检测：基于阈值的边缘识别
  2. 颜色混合：边缘与内部颜色的平滑过渡
  3. 时间动画：溶解进程的动态控制

高级知识点

  1. 3D噪声优化：Simplex噪声的高效实现
  2. GPU粒子：在着色器中生成粒子效果
  3. 物理模拟：基于物理的消融过程

相关学习资源

结语

溶解着色器是游戏和视觉特效中非常实用的技术。通过本示例的学习，你将掌握噪声驱动消融效果的实现方法，为创建更复杂的特效动画打下基础。

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。