Three.js着色器教程与实用技巧

本文深入浅出地讲解了如何在Three.js中编写高性能自定义着色器，涵盖GLSL基础、ShaderMaterial的实战用法、uniforms与attributes的数据传递机制，并通过彩色渐变球体等生动示例手把手演示顶点与片段着色器的协同工作原理；同时分享了移动端适配、精度控制、性能优化及调试技巧等关键经验，助你突破原生材质限制，轻松实现火焰、水流、噪声动画等炫酷视觉效果，真正释放Web 3D图形编程的无限潜力。

Three.js 是一个强大的 JavaScript 3D 库，它让开发者可以在浏览器中轻松创建和展示三维内容。当你需要更精细地控制物体的外观时，原生材质可能无法满足需求，这时就需要编写自定义着色器（Shader）。着色器是运行在 GPU 上的小程序，用 GLSL（OpenGL Shading Language）编写，分为顶点着色器（vertex shader）和片段着色器（fragment shader）。本文将带你了解如何在 Three.js 中编写自定义着色器。

理解着色器基础

在 Three.js 中使用自定义着色器，你需要了解两个核心部分：

• 顶点着色器：处理每个顶点的位置、法线、纹理坐标等属性，决定模型在屏幕上的形状和位置。
• 片段着色器：计算每个像素的颜色，决定物体表面的视觉效果，如颜色、光照、纹理等。

着色器代码使用 GLSL 编写，语法类似 C 语言。注意版本差异：WebGL 1 使用 precision mediump float; 声明精度，而 WebGL 2 支持更高精度和更多特性。

在 Three.js 中创建 ShaderMaterial

Three.js 提供了 ShaderMaterial 类，允许你传入自定义的顶点和片段着色器代码。

定义顶点着色器：

const vertexShader = \`
void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
\`;

定义片段着色器：

const fragmentShader = \`
uniform float time;
void main() {
  vec3 color = 0.5 + 0.5 * sin(time + gl_FragCoord.x * 0.01, time + gl_FragCoord.y * 0.01, time);
  gl_FragColor = vec4(color, 1.0);
}
\`;

创建材质并应用到几何体：

const material = new THREE.ShaderMaterial({
  vertexShader,
  fragmentShader,
  uniforms: {
    time: { value: 0.0 }
  }
});
<p>const geometry = new THREE.SphereGeometry(1, 32, 32);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);</p>

在动画循环中更新 uniform：

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

使用 Uniforms 和 Attributes 传递数据

Uniforms 是全局变量，在整个渲染过程中保持不变（除非手动更新），适合传递时间、光照参数、颜色等。

Attributes 是每个顶点独有的数据，如顶点位置、法线、颜色等，通常由几何体自动提供。

常见内置 attributes：

• position：顶点位置
• normal：法线向量
• uv：纹理坐标

Three.js 自动将这些属性传入顶点着色器，你只需声明即可使用。

高级技巧与性能建议

编写高效着色器需要注意以下几点：

• 避免在片段着色器中进行复杂循环或递归计算，这会显著降低性能。
• 使用 uniforms 缓存频繁变化的数据，减少 CPU 到 GPU 的传输开销。
• 合理设置精度，移动端推荐使用 mediump 或 lowp 提高兼容性。
• 利用 Three.js 内置变量如 modelViewMatrix、projectionMatrix 简化矩阵运算。

调试着色器时，可逐步注释代码段，观察输出变化，或使用 gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 测试是否执行到某行。

基本上就这些。掌握着色器编写后，你可以实现火焰、水流、溶解、噪声动画等高级视觉效果，极大提升 3D 场景的表现力。

今天关于《Three.js着色器教程与实用技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！