Three.js 实现云状特效

大家好！我是 [数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！
开发领域：前端开发 | AI 应用 | Web3D | 元宇宙
技术栈：JavaScript、React、ThreeJs、WebGL、Go
经验经验：6 年+ 前端开发经验，专注于图形渲染和 AI 技术
开源项目：智简未来、晓智科技、数擎科技

在本文中，我们将从一个基于 GLSL 的云状特效 shader 出发，讲解 shader 的实现过程和所涉及的数学原理。

一、Shader 实现细节解析

1. 宏定义与时间控制

我们在 shader 开始部分定义了两个常用的数学常量：

#define PI2 6.28318530718
#define PI 3.1416

• 同时，iTime 作为 uniform 变量传入，使得图案能随时间动态变化，从而实现动画效果。

2. 坐标变换与周期函数

在 vorocloud 函数中，首先通过下面这行代码对输入坐标 p 进行周期性处理：

vec2 pp = cos(vec2(p.x * 14.0, (16.0 * p.y + cos(floor(p.x * 30.0)) + iTime * PI2)));

• 周期性函数：利用 cos 函数生成周期性变化，调整水平方向和垂直方向上的频率。
• 离散扰动：通过 floor 与 cos 的组合，引入了不规则性，使得最终效果更接近自然云彩的随机分布。
• 时间因子：引入 iTime，使图案随时间平滑过渡，产生动画效果。

3. 非线性空间扭曲

接下来对坐标 p 进行非线性扭曲：

p = cos(p * 12.1 + pp * 10.0 + 0.5 * cos(pp.x * 10.0));

这种多重余弦变换使得原始坐标发生复杂扰动，从而获得更为自然和丰富的纹理变化。

4. 计算距离并确定最小值

我们预设了 4 个参考点：

vec2 pts[4];
pts[0] = vec2(0.5, 0.6);
pts[1] = vec2(-0.4, 0.4);
pts[2] = vec2(0.2, -0.7);
pts[3] = vec2(-0.3, -0.4);

通过遍历这些点，并根据当前计算得到的 pp 坐标计算欧几里得距离：

float d = 5.0;
for(int i = 0; i < 4; i++){
pts[i].x += 0.03 _ cos(float(i)) + p.x;
pts[i].y += 0.03 _ sin(float(i)) + p.y;
d = min(d, distance(pts[i], pp));
}

数学上，我们使用的欧几里得距离公式为：

• 这里，d 表示当前点与各参考点中最接近的距离。

5. 指数衰减与量化

在获得最小距离后，通过以下公式计算最终的亮度因子：

f = 2.0 * pow(1.0 - 0.3 * d, 13.0);
f = min(f, 1.0);

数学公式推导如下：

• 线性衰减：首先计算 1.0 - 0.3 * d，使得距离越大，值越小。

• 非线性提升：对上述值取 13 次幂，公式为：

这种处理使得靠近目标区域的值迅速趋向于 1，而远离区域迅速衰减到 0。

放缩与截断：最终乘以 2.0 并用 min 限制最大值为 1.0，确保亮度值始终在 [0, 1] 区间内。

6. 最终图像构建

在 scene 函数中，我们通过两次调用 vorocloud 函数，在不同尺度上生成图案，并根据返回值对颜色通道进行混合：

vec4 col = vec4(0.0);
col.g += 0.02;

float v = vorocloud(p);
v = 0.2 _ floor(v _ 5.0);

col.r += 0.1 _ v;
col.g += 0.6 _ v;
col.b += 0.5 \* pow(v, 5.0);

v = vorocloud(p _ 2.0);
v = 0.2 _ floor(v \* 5.0);

col.r += 0.1 _ v;
col.g += 0.2 _ v;
col.b += 0.01 \* pow(v, 5.0);

• 量化效果：利用 floor 函数将连续值离散化，产生分级的视觉效果。
• 多层混合：在不同尺度下叠加效果，增强了图像的层次感和细节。

二、数学原理总结

1. 周期函数与坐标扭曲：

利用 cos 与 sin 函数，使得图案在各个方向上呈现出周期性和非线性变形效果。数学上，这是通过将线性坐标映射到周期函数上实现的，从而引入无限延展的波动性。

2. 欧几里得距离计算

使用基本的欧几里得距离公式确定当前像素与各参考点的最小距离，从而在空间中划分不同的影响区域。

3. 指数衰减与非线性变换

采用指数函数 𝑓=2×(1−0.3𝑑)13f=2×(1−0.3d)13 使得靠近参考点的区域迅速达到高亮，而远离区域则快速衰减到 0，为图像添加了锐利的边缘效果。

3 量化处理

通过对连续亮度值进行离散化处理，模拟出一种复古或艺术化的调色板效果，使得整体视觉更具层次和风格。

三、完整代码

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 创建场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);
camera.position.z = 1.5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const uniforms = {
  iTime: { value: 0.0 },
  iResolution: {
    value: new THREE.Vector2(window.innerWidth, window.innerHeight),
  },
};

const material = new THREE.ShaderMaterial({
  uniforms,
  vertexShader: `
        varying vec2 vUv;
        void main() {
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
  fragmentShader: `
        #define PI2 6.28318530718
        #define PI 3.1416
        
        uniform float iTime;
        uniform vec2 iResolution;
        
        varying vec2 vUv;
        
        float vorocloud(vec2 p){
            float f = 0.0;
            vec2 pp = cos(vec2(p.x * 14.0, (16.0 * p.y + cos(floor(p.x * 30.0)) + iTime * PI2)));
            p = cos(p * 12.1 + pp * 10.0 + 0.5 * cos(pp.x * 10.0));
            
            vec2 pts[4];
            pts[0] = vec2(0.5, 0.6);
            pts[1] = vec2(-0.4, 0.4);
            pts[2] = vec2(0.2, -0.7);
            pts[3] = vec2(-0.3, -0.4);
            
            float d = 5.0;
            
            for(int i = 0; i < 4; i++){
                pts[i].x += 0.03 * cos(float(i)) + p.x;
                pts[i].y += 0.03 * sin(float(i)) + p.y;
                d = min(d, distance(pts[i], pp));
            }
            
            f = 2.0 * pow(1.0 - 0.3 * d, 13.0);
            f = min(f, 1.0);
            
            return f;
        }
        
        void main() {
            vec2 UV = vUv;
            vec2 p = UV - vec2(0.5);
            
            vec4 col = vec4(0.0);
            col.g += 0.02;
            
            float v = vorocloud(p);
            v = 0.2 * floor(v * 5.0);
            
            col.r += 0.1 * v;
            col.g += 0.6 * v;
            col.b += 0.5 * pow(v, 5.0);
            
            v = vorocloud(p * 2.0);
            v = 0.2 * floor(v * 5.0);
            
            col.r += 0.1 * v;
            col.g += 0.2 * v;
            col.b += 0.01 * pow(v, 5.0);
            
            col.a = 1.0;
            
            gl_FragColor = col;
        }
    `,
});

const plane = new THREE.PlaneGeometry(2, 2);
const quad = new THREE.Mesh(plane, material);
scene.add(quad);

const controls = new OrbitControls(camera, renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  uniforms.iTime.value += 0.01;
  renderer.render(scene, camera);
}

animate();

window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  uniforms.iResolution.value.set(window.innerWidth, window.innerHeight);
});

总结

本文详细解析了如何利用数学工具（如周期函数、欧几里得距离、指数函数）构造出具有丰富层次和动态效果的云状特效。通过将 shader 实现我们可以轻松地将复杂的图形效果应用于 WebGL 项目中，同时也加深了对基于数学函数生成复杂图形原理的理解。