Three.js Shader实战：从点光源到动态光圈的扫光动画原理详解

Three.js Shader实战：从点光源到动态光圈的扫光动画原理详解

当我们在数字世界中构建城市景观时，如何让冰冷的建筑群焕发生机？扫光动画正是这样一种魔法——它让光线如同涟漪般在城市表面扩散，所到之处建筑被瞬间点亮又缓缓淡去。这种效果不仅用于数据可视化中的焦点提示，在游戏场景过渡、AR导航指引等场景也大有用武之地。

要实现这种效果，传统做法可能需要复杂的粒子系统或多层后期处理。但通过Three.js的Shader编程，我们可以用更优雅的数学方式实现。本文将带你深入理解如何将基础的点光源光照模型，升级为具有渐变效果的动态光圈系统。

1. 光波扩散的数学本质

任何光效的本质都是数学函数的可视化表达。扫光效果的核心在于两个关键计算：距离判定和颜色插值。

1.1 距离计算的三维几何

在片元着色器中，我们通过length(v_position - center)计算当前片元到光源中心的距离。这里的v_position是经过模型矩阵变换后的世界坐标，而center是光圈中心的uniform变量。

// 计算当前片元到中心的距离 float dis = length(v_position - center);

这个简单的距离公式背后隐藏着重要的优化考量：

• 坐标系选择：使用世界坐标而非屏幕坐标，确保物体移动时效果稳定
• 性能权衡：length()内部是开平方运算，在移动端可考虑用distance()替代
• 归一化处理：将距离值映射到[0,1]区间，便于后续混合计算

1.2 光圈边界的平滑过渡

粗糙的硬边分界会产生锯齿感。我们通过内外半径定义环形区域，在边界处使用平滑step函数：

float innerRadius = innerCircleWidth; float outerRadius = innerCircleWidth + circleWidth; float fade = smoothstep(innerRadius, outerRadius, dis);

参数对比表：

2. 颜色混合的艺术

光波扫过时的颜色变化效果，核心在于如何混合原始颜色和高亮颜色。这需要深入理解GPU的混合机制。

2.1 mix函数的底层原理

GLSL的mix()函数实际上是线性插值：

vec3 result = original * (1.0 - t) + highlight * t;

但在实际应用中，我们更关注：

• 色彩空间选择：RGB/HSV不同空间混合效果差异显著
• 非线性插值：通过修改t值实现缓动效果
• alpha混合：处理透明物体的叠加顺序

2.2 进阶混合技巧

基础线性混合可能产生颜色发灰问题。改进方案包括：

• 叠加混合模式：

  vec3 blendOverlay(vec3 base, vec3 blend) { return mix( 1.0 - 2.0 * (1.0 - base) * (1.0 - blend), 2.0 * base * blend, step(base, vec3(0.5)) ); }

• HSL空间调整：

  vec3 hsl = rgb2hsl(original); hsl.z += t * 0.3; // 提高亮度 gl_FragColor = vec4(hsl2rgb(hsl), 1.0);

3. 动态属性的动画控制

静态的光圈缺乏生气，我们需要让参数随时间变化产生动画效果。

3.1 Uniform变量的动态更新

在JavaScript端，通过requestAnimationFrame循环修改uniforms：

function animate() { requestAnimationFrame(animate); material.uniforms.innerCircleWidth.value += speed; // 循环逻辑 if(material.uniforms.innerCircleWidth.value > maxRadius) { material.uniforms.innerCircleWidth.value = -circleWidth; } }

3.2 高级动画曲线

线性变化显得机械，可以引入：

• 缓动函数：

  function easeOutQuad(t) { return t * (2 - t); } uniforms.innerCircleWidth.value = start + change * easeOutQuad(progress);

• 噪声扰动：

  float noise = cnoise(v_position * 0.1 + time); float animatedRadius = innerCircleWidth + noise * 10.0;

4. 效果定制与性能优化

掌握了基本原理后，我们可以从多个维度扩展效果。

4.1 形状变异技巧

突破圆形限制，实现更多样化的扫光形态：

4.2 多光圈叠加

通过多个uniform控制独立的光圈，产生复杂干涉效果：

uniform vec3 centers[3]; uniform float radii[3]; for(int i=0; i<3; i++) { float dis = length(v_position - centers[i]); // 混合计算... }

4.3 移动端优化策略

在性能受限环境下：

• 降低精度：使用mediump float
• 减少分支：重构if语句为step/mix组合
• 简化计算：预计算不变部分
• 实例代码：

  // 优化前 if(dis < outer && dis > inner) { // 复杂计算... } // 优化后 float inZone = step(inner, dis) * step(dis, outer); vec3 result = mix(base, highlight, inZone * fade);

在实现城市扫光效果时，地面的处理需要特别注意法线方向。将地面plane的rotation.x设为-PI/2时，要确保着色器中的距离计算与建筑物采用相同的坐标系。实际项目中遇到过因坐标系不匹配导致的光圈错位问题，最终通过统一使用世界坐标解决。