深入理解 Three.js 中 Shader 的使用及示例

在 Three.js 的世界里，Shader 是一个强大的工具，它允许开发者对图形渲染进行更底层的控制，实现各种炫酷的视觉效果。本文将跳过基础部分，直接深入探讨 Shader 在 Three.js 中的实际应用及示例。

Shader 基础回顾

Shader 本质上是运行在 GPU 上的小程序，分为顶点着色器（Vertex Shader）和片段着色器（Fragment Shader）。顶点着色器负责处理顶点相关的操作，比如位置变换；片段着色器则专注于处理每个像素的颜色计算。在 Three.js 中使用 Shader，我们需要创建自定义的着色器材质（ShaderMaterial）。

使用 ShaderMaterial 创建自定义材质

首先，我们来看如何在 Three.js 中使用 ShaderMaterial 创建一个简单的自定义材质。

js 复制代码

// 顶点着色器代码
const vertexShader = `
  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;
// 片段着色器代码
const fragmentShader = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;
// 创建ShaderMaterial
const material = new THREE.ShaderMaterial({
  vertexShader: vertexShader,
  fragmentShader: fragmentShader
});
// 创建一个几何体，这里以平面为例
const geometry = new THREE.PlaneGeometry(1, 1);
// 创建Mesh
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

在上述代码中，顶点着色器简单地将顶点位置进行了标准的矩阵变换，使其正确显示在屏幕上。片段着色器则直接将每个像素的颜色设置为红色（rgba (1, 0, 0, 1)）。通过 ShaderMaterial 将这两个着色器关联起来，并应用到一个平面几何体上，我们就得到了一个红色的平面。

传递 Uniform 变量

Uniform 变量是一种在 Shader 中使用的全局变量，可以在 JavaScript 中动态修改。这在实现各种动态效果时非常有用。

js 复制代码

// 顶点着色器代码，增加uniform变量
const vertexShader = `
  uniform float time;
  void main() {
    vec3 newPosition = position;
    newPosition.y += sin(newPosition.x * 10.0 + time) * 0.1;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
  }
`;
// 片段着色器代码不变
const fragmentShader = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;
// 创建ShaderMaterial，并设置uniform变量
const material = new THREE.ShaderMaterial({
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  uniforms: {
    time: { value: 0 }
  }
});
// 在动画循环中更新uniform变量
function animate() {
  requestAnimationFrame(animate);
  material.uniforms.time.value += 0.01;
  renderer.render(scene, camera);
}
animate();

在这个示例中，我们在顶点着色器中添加了一个time的 uniform 变量。通过在 JavaScript 的动画循环中不断更新这个变量的值，我们可以实现平面在 y 轴方向上的动态波动效果。

总结

通过上述示例，我们展示了在 Three.js 中如何使用 ShaderMaterial 创建自定义材质，以及如何通过传递 Uniform 变量实现动态效果。Shader 的应用非常广泛，从简单的颜色修改到复杂的特效模拟，都能通过它实现。希望这篇文章能帮助你更深入地理解和应用 Three.js 中的 Shader。