告别三角面片：用Three.js和体渲染打造你的第一个‘体积云’特效

体渲染Three.jsWebGL

于 2026-05-29 11:36:04 修改

·本内容遵循CC 4.0 BY-SA版权协议

用Three.js打造动态体积云：从噪声函数到光线步进的实战指南

想象一下，在网页中创建一片随风飘动的云层，阳光穿透云隙投下斑驳的光影——这种曾经需要专业游戏引擎才能实现的效果，现在通过WebGL和Three.js就能轻松达成。本文将带你从零开始，用体渲染技术打造逼真的体积云效果，完全摆脱传统三角面片的限制。

1. 为什么选择体渲染技术？

在传统的3D图形渲染中，云朵通常通过两种方式实现：一是使用带有透明通道的平面片元（Billboard）组合，二是采用复杂的粒子系统。这两种方法虽然性能较好，但都存在明显的局限性：

平面片元云：从特定角度观察时会出现穿帮，缺乏体积感
粒子系统云：难以表现云层内部的密度变化和光线散射效果
共同缺陷：无法真实模拟光线在云层中的吸收、散射现象

体渲染技术则完全不同，它通过模拟光线在介质中的传播过程来计算最终颜色。具体到云朵渲染，这意味着：

光线进入云层时会发生米氏散射（Mie scattering），这是云朵呈现白色的主要原因
光线穿透云层时会发生吸收，导致云层较厚部分看起来更暗
光线在云层内部会发生多次散射，产生柔和的边缘过渡

JAVASCRIPT

// 基础体渲染着色器结构示例

uniform sampler2D noiseTexture;

uniform vec3 lightDirection;

void main() {

vec3 rayStart = calculateRayStart();

vec3 rayEnd = calculateRayEnd();

vec3 rayDirection = normalize(rayEnd - rayStart);

// 光线步进循环

for(int i = 0; i < MAX_STEPS; i++) {

vec3 currentPos = rayStart + rayDirection * stepSize * float(i);

float density = sampleDensity(currentPos);

// 光线散射计算...

}

2. 构建云的基础形状：噪声函数应用

要创建自然的云朵形态，我们需要依赖噪声函数来生成有机的形状。Three.js中常用的噪声函数包括：

噪声类型	特点	适用场景
Perlin噪声	平滑连续，自然过渡	云朵主体形状
Worley噪声	细胞状结构	云朵细节边缘
Simplex噪声	计算效率高	实时动态变化

实际应用中，我们通常会混合多种噪声：

GLSL

float getCloudDensity(vec3 position) {

float perlin = cnoise(position * 0.5);

float worley = wnoise(position * 2.0);

float detail = cnoise(position * 8.0) * 0.1;

// 噪声混合公式

float baseShape = smoothstep(0.3, 0.6, perlin);

float detailShape = worley * detail;

return clamp(baseShape - detailShape, 0.0, 1.0);

}

提示：噪声函数的缩放系数（如上面的0.5、2.0等）需要根据场景大小调整，通常需要反复实验获得最佳效果

3. 光线步进算法实现

光线步进(Ray Marching)是体渲染的核心算法，其基本流程如下：

确定光线起点和终点：通常使用场景的边界盒作为体渲染范围
设置步长：需要在画质和性能间取得平衡（通常0.01-0.05单位）
累积颜色和透明度：使用alpha混合公式计算光线穿过介质的效果

JAVASCRIPT

const rayMarchSettings = {

steps: 64, // 步进次数

stepSize: 0.03, // 每一步的大小

densityScale: 0.8, // 密度缩放

lightAbsorption: 0.3, // 光吸收率

scatteringFactor: 0.7 // 散射系数

};

// 在着色器中使用的光线步进循环

for(int i = 0; i < MAX_STEPS; i++) {

vec3 samplePos = rayOrigin + rayDir * float(i) * stepSize;

float density = getDensity(samplePos);

if(density > 0.01) {

// 计算光照

float lightTransmission = calculateLight(samplePos);

vec3 scatteredLight = lightColor * lightTransmission * density;

// 累积颜色

accumulatedColor += scatteredLight * (1.0 - accumulatedAlpha);

accumulatedAlpha += density * densityScale;

if(accumulatedAlpha >= 0.99) break;

}

性能优化技巧：

使用线性步进：先以大步长检测，发现密度区域后再细化
早期终止：当累积透明度接近1时提前终止循环
降低分辨率：先以半分辨率渲染，再通过后处理锐化

4. 光照与阴影增强真实感

真实的云朵效果离不开精确的光照计算。我们需要模拟两种主要的光学现象：

方向性散射：光线主要沿原方向传播（类似毛玻璃效果）
环境光散射：云层对环境光的漫反射

GLSL

float calculateLightTransmission(vec3 samplePos, vec3 lightDir) {

float lightEnergy = 0.0;

float shadowSteps = 8.0; // 阴影步进次数

// 向光源方向步进检测遮挡

for(int i = 1; i <= SHADOW_STEPS; i++) {

vec3 shadowPos = samplePos + lightDir * float(i) * shadowStepSize;

lightEnergy += getDensity(shadowPos) * shadowDensity;

}

return exp(-lightEnergy * lightAbsorption);

}

光照参数调优建议：

高角度太阳光：产生明显的明暗对比
低角度光线：增强云层的体积感
多光源混合：结合方向光和环境光

5. 动态效果与性能平衡

要让云朵"活"起来，我们需要引入时间变量和风场效果：

GLSL

uniform float time;

vec3 applyWind(vec3 position) {

vec3 windDirection = vec3(1.0, 0.0, 0.5);

float windSpeed = 0.2;

float turbulence = cnoise(position * 0.1 + time * 0.05) * 0.3;

return position + windDirection * (time * windSpeed + turbulence);

}

性能与画质平衡策略：

设置项	高性能	高画质	平衡方案
步进次数	32	128	64
噪声采样	2层	4层	3层
分辨率	50%	100%	75%
阴影质量	简单	详细	中等

在移动设备上，可以考虑以下优化：

使用更简单的噪声函数
减少光线步进次数
禁用或简化阴影计算
使用WebGL 2.0的硬件加速特性

6. 完整实现流程

让我们总结创建体积云的完整步骤：

场景准备
- 设置Three.js基础场景
- 添加天空盒和环境光
- 创建全屏四边形用于后期处理
噪声纹理生成
- 使用JavaScript生成Perlin和Worley噪声
- 将噪声图上传为3D纹理（通过2D纹理模拟）
着色器编写
- 顶点着色器：计算屏幕坐标
- 片段着色器：实现光线步进算法
材质与渲染
- 创建自定义着色器材质
- 设置渲染目标（可选）
- 配置后期处理通道
交互优化
- 添加GUI控件调节参数
- 实现视差效果增强立体感
- 添加LOD（细节层次）系统

JAVASCRIPT

// Three.js中创建体积云材质的示例代码

const cloudMaterial = new THREE.ShaderMaterial({

uniforms: {

noiseTexture: { value: noiseTex },

lightDirection: { value: new THREE.Vector3(1, 1, 1).normalize() },

time: { value: 0 },

// 其他uniforms...

vertexShader: cloudVertexShader,

fragmentShader: cloudFragmentShader,

side: THREE.BackSide,

transparent: true,

depthWrite: false

});

// 在动画循环中更新

function animate() {

requestAnimationFrame(animate);

cloudMaterial.uniforms.time.value += 0.01;

renderer.render(scene, camera);

}

实际项目中，我发现云层边缘的处理最为关键——过于锐利会显得不自然，过于模糊又会失去形状。经过多次试验，采用噪声驱动的边缘渐变效果最为理想。另一个经验是，在场景中加入少许高度雾效，可以显著增强云层与场景的融合度。