从零开始学习three.js（18）：一文详解three.js中的着色器Shader

在WebGL和Three.js的3D图形渲染中，着色器（Shader） 是实现复杂视觉效果的核心工具。通过编写自定义的着色器代码，开发者可以直接操作GPU，实现从基础颜色渲染到动态光照、粒子效果等高级图形技术。本文将深入解析Three.js中着色器的核心概念、实现原理及实战应用，并结合代码示例帮助读者全面掌握这一关键技术。

核心特点​​：

---

一、着色器基础与分类

1.1 顶点着色器（Vertex Shader）

顶点着色器负责处理几何体的每个顶点，主要功能包括：

• 顶点位置变换 ：将模型空间坐标转换为屏幕空间坐标（通过 gl_Position 输出）

• 顶点属性计算：如法线变换、纹理坐标传递等

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

说明 ：projectionMatrix（投影矩阵）、modelViewMatrix（模型视图矩阵）由Three.js自动注入，position是顶点的原始坐标。

1.2 片元着色器（Fragment Shader）

片元着色器决定每个像素的最终颜色，通过 gl_FragColor 输出：

void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}

特性：颜色支持动态计算，如基于光照模型、纹理采样等。

1.3 着色器材质类型

Three.js提供两种自定义着色器材质：

• ​​ShaderMaterial​ ​：简化版材质，内置常用变量（如modelViewMatrix、projectionMatrix），适合快速开发。

• ​​RawShaderMaterial​ ​：需手动声明所有变量（如attribute、uniform），灵活性更高，适合深度优化。

​​示例代码：创建基础着色器材质​​

const material = new THREE.ShaderMaterial({  
  vertexShader: vertexShaderCode,  
  fragmentShader: fragmentShaderCode,  
  uniforms: {  
    time: { value: 0 },  
    color: { value: new THREE.Color(0xff0000) }  
  }  
});  

---

二、着色器变量类型

2.1 Uniforms

• 全局常量：所有顶点/片元共享同一值（如时间、光源位置）

• 传递方式 ：通过 ShaderMaterial 的 uniforms 属性设置

  const material = new THREE.ShaderMaterial({
  uniforms: {
  uTime: { value: 0 },
  uTexture: { value: new THREE.TextureLoader().load("texture.png") }
  }
  });

在着色器中声明 ：uniform float uTime;

2.2 Attributes

• 顶点属性：每个顶点独有的数据（如位置、颜色、法线）

• 典型应用：动态顶点动画（如波浪效果）

  geometry.setAttribute('displacement', new THREE.BufferAttribute(displacementArray, 1));

在顶点着色器中访问 ：attribute float displacement;

2.3 Varyings

• 插值变量：从顶点着色器向片元着色器传递数据（如UV坐标、颜色插值）

  // 顶点着色器
  varying vec2 vUv;
  void main() {
  vUv = uv;
  // ...
  }

  // 片元着色器
  varying vec2 vUv;
  void main() {
  vec4 color = texture2D(uTexture, vUv);
  }

注意：变量名需在两者中保持一致。

---

三、矩阵变换与坐标系统

3.1 核心矩阵解析

• 模型矩阵（modelMatrix） ：几何体的旋转、平移、缩放变换
• 视图矩阵（viewMatrix） ：相机的观察变换（等同于相机世界矩阵的逆矩阵）
• 投影矩阵（projectionMatrix） ：3D到2D的投影（如透视投影）

3.2 矩阵乘法顺序

顶点变换遵循 "右乘"顺序，确保坐标正确转换：

gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);

原理：从模型空间→世界空间→相机空间→裁剪空间逐步变换。

---

四、实战案例：动态波纹效果

4.1 着色器代码实现

顶点着色器（传递UV坐标）：

varying vec2 vUv;
void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

片元着色器（动态波纹计算）：

uniform float uTime;
varying vec2 vUv;

void main() {
    float ripple = sin(length(vUv - 0.5) * 10.0 - uTime * 2.0);
    float opacity = smoothstep(0.0, 0.2, abs(ripple));
    gl_FragColor = vec4(0.2, 0.5, 1.0, opacity);
}

4.2 JavaScript端配置

const material = new THREE.ShaderMaterial({
    uniforms: {
        uTime: { value: 0 }
    },
    vertexShader: vertexShaderCode,
    fragmentShader: fragmentShaderCode,
    transparent: true
});

// 动画循环中更新Uniform
function animate() {
    material.uniforms.uTime.value += 0.01;
    requestAnimationFrame(animate);
}

效果：实现以中心向外扩散的蓝色波纹。

---

五、高级技巧与优化

5.1 性能优化策略

1. 减少分支语句 ：GPU不擅长动态分支，可用 mix() 或 step() 替代 if-else
2. 向量化运算 ：优先使用 vec3/vec4 代替多个 float 计算
3. 纹理压缩：使用Mipmap和纹理图集减少采样开销

5.2 常见问题排查

• 变量未声明 ：检查Three.js版本是否支持特定语法（如 #version 300 es）
• 精度问题 ：在移动端明确指定精度（precision mediump float;）
• 矩阵顺序错误：确保模型→视图→投影的乘法顺序正确

---

六、扩展应用：后期处理通道

通过 EffectComposer 和 ShaderPass 实现屏幕后处理：

import { EffectComposer, ShaderPass } from 'three/examples/jsm/postprocessing';

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));

const customPass = new ShaderPass(customShaderMaterial);
composer.addPass(customPass);

典型效果：模糊、Bloom光效、颜色校正等。

---

结语

Three.js着色器为开发者打开了高性能图形编程的大门。通过深入理解GLSL语法、矩阵变换和变量传递机制，可以创造出从基础颜色变化到复杂物理模拟的全方位视觉效果。建议通过Shadertoy平台进行实时演练，结合Three.js文档探索更多可能性。