第一个 shader 程序

RawShaderMaterial#

THREE.RawShaderMaterial创建原始着色器,RawShaderMaterial 不会自动注入 Three.js 的内置着色器代码（如光照、矩阵变换等），开发者需要手动管理所有 Uniforms 和 Attributes。

分别创建vertex.glsl和fragment.glsl文件, 使用 vite-plugin-glsl或者vite-plugin-glslify插件，可以将大的着色器分割为小的模块，可以重用着色器块，以及可以使用其他开发者编写的着色器块.

1
 npm install vite-plugin-glsl

在vite.config.js中导入glsl

1
import glsl from 'vite-plugin-glsl'
2
export default {
3
  // ...
4
  plugins: [
5
    glsl(),
6
  ],
7
}

使用

1
// Geometry
2
const geometry = new THREE.PlaneGeometry(1, 1, 32, 32)
3

4
const count = geometry.attributes.position.count
5
const randoms = new Float32Array(count)
6
for (let i = 0; i < count; i++) {
7
  randoms[i] = Math.random()
8
}
9
geometry.setAttribute('aRandom', new THREE.BufferAttribute(randoms, 1))
10
// Material
11
const material = new THREE.RawShaderMaterial({
12
  vertexShader: testVertexShader,
13
  fragmentShader: testFragmentShader,
14
  transparent: true,
15
  side: THREE.DoubleSide,
16
  // wireframe: true,
17
  uniforms: {
18
    uFrequency: { value: new THREE.Vector2(10, 5) },
19
    uTime: { value: 0 },
20
    uColor: { value: new THREE.Color(0x7799cc) },
21
    uTexture: { value: flagTexture },
22
  },
23
})

在THREE.RawShaderMaterial中，THREEjs中的material同样可以使用wireframe, side, transparent, flatShading这些属性。但是像map，alphaMap,opacity等等都没法使用，因为这些事在顶点内部处理的，只有在fragmentShader中才能更改

1
const count = geometry.attributes.position.count
2
const randoms = new Float32Array(count)
3
for (let i = 0; i < count; i++) {
4
  randoms[i] = Math.random()
5
}
6
geometry.setAttribute('aRandom', new THREE.BufferAttribute(randoms, 1))

上面创建了一个随机生成的名为aRandom的attribute，添加在geometry的attribute上，在vertex.glsl中可以通过attribute float aRandom;接收。

因为new THREE.BufferAttribute(randoms, 1)为 1，表明一个为一组。所以是float类型

通过gui直接操作shader中数据，可以通过更改uniforms中的值

1
gui.add(material.uniforms.uFrequency.value, 'x').min(0).max(20).step(0.01).name('uFrequency.x')
2
gui.add(material.uniforms.uFrequency.value, 'y').min(0).max(20).step(0.01).name('uFrequency.y')
3
gui.addColor(material.uniforms.uColor, 'value').name('uColor')

vertex.glsl#

他会对每个顶点执行这段代码

1
uniform mat4 projectionMatrix;
2
uniform mat4 viewMatrix;
3
uniform mat4 modelMatrix;
4
uniform vec2 uFrequency;
5
uniform float uTime;
6

7
attribute vec3 position;
8
attribute vec2 uv;
9

10
varying vec2 vUv;
11
varying float vElevation;
12

13
void main() {
14
  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
15
  float elevation = sin(modelPosition.x * uFrequency.x - uTime) * 0.1;
16
  elevation += sin(modelPosition.y * uFrequency.y - uTime) * 0.1;
17
  modelPosition.z += elevation;
18

19
  vec4 viewPosition = viewMatrix * modelPosition;
20
  vec4 projectionPosition = projectionMatrix * viewPosition;
21

22
  gl_Position = projectionPosition;
23
  // gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
24

25
  vUv = uv;
26
  vElevation = elevation;
27
}

gl_Position 为什么是一个vec4?

这是因为我们的坐标实际上是在裁剪空间里，裁剪空间不是一个二维空间，是一个四维的投影变换，将3D场景转换为2D屏幕坐标。当我们从camera观察其中一个物体时，最终渲染是在2d的canvas上的，除了知道他的顶点坐标(x,y,z)，还需要知道他的深度，帮助计算机判断物体哪个顶点坐标在前，形成透视效果。在正交投影中，w 分量通常为 1，因此不影响结果。

1
uniform mat4 projectionMatrix;
2
uniform mat4 viewMatrix;
3
uniform mat4 modelMatrix;

uniform 变量是全局常量，在整个渲染过程中保持不变。它的作用是从 CPU 侧的应用程序向 GPU 中的着色器程序传递数据，例如变换矩阵、光照参数、时间等。uniform 变量可以同时在顶点着色器和片段着色器中使用，并且一旦设置，在一次渲染调用中，所有顶点和片段的 uniform 变量值都是相同的，且在着色器内部不能被修改。

上面三个矩阵都是 uniform 的，不会改变，对几何体的每个顶点都采用相同的矩阵运算

• uniform mat4 modelMatrix;

  模型矩阵，他将对每个顶点应用模型自身的变换（平移、旋转、缩放），将顶点从模型本地坐标系转换到世界坐标系。

  mesh.position.x = 1就会变换这个矩阵，只需要提供(position, rotation, scale)

• uniform mat4 viewMatrix;

  相机矩阵，他定义相机的位姿（位置和朝向），将顶点从世界坐标系转换到相机坐标系。

  同理，改变camera的 position, rotation, near, far都会变换这个矩阵

• uniform mat4 projectionMatrix;

  投影矩阵，它负责将3D场景从相机视角（观察空间）投影到2D裁剪空间。

也可以传递自定义的属性。

1
uniform vec2 uFrequency;
2
uniform float uTime;

在RawShaderMaterial中通过uniforms可以传递uniform类型的数据

1
const material = new THREE.RawShaderMaterial({
2
  // ...
3
  uniforms: {
4
    uFrequency: { value: new THREE.Vector2(10, 5) },
5
    uTime: { value: 0 },
6
    uColor: { value: new THREE.Color(0x7799cc) },
7
    uTexture: { value: flagTexture },
8
  },
9
})

上面就像顶点着色器和片段着色器传递了四个uniform类型的数据

attribute (属性)是顶点间变化的数据。主要功能是从顶点缓冲区读取每个顶点的数据。这些数据通常包含顶点的位置、法线、纹理坐标等信息。它是专门为顶点着色器设计的，因为它存储的是每个顶点特有的数据。在顶点着色器执行过程中，会逐个处理每个顶点的 attribute 数据。

1
attribute vec3 position;
2
attribute vec2 uv;

这个值从实例化的THREE.xxxGeometry中 geometry.attributes.position中的每个坐标点取得

attribute vec2 uv;同样的接收一个uv坐标，也可以通过geometry.setAttribute('random', new THREE.BufferAttribute(randoms, 1))添加一组名为 random的attribute,同样通过attribute float random;获取

1
varying vec2 vUv;
2
varying float vElevation;

varying 变量充当了顶点着色器和片段着色器之间的数据桥梁。顶点着色器会为每个顶点计算 varying 变量的值，在光栅化阶段，这些值会在三角形的各个片段之间进行插值。片段着色器会接收这些插值后的值，并以此进行后续的计算。简而言之，varying 变量将顶点级别的数据传递到了片段着色器。

上面代码就向片段着色器传递了 vec2 vUv和 float vElevation的值，在fragment.glsl中用相同的方式接收。

1
void main() {
2
  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
3
  float elevation = sin(modelPosition.x * uFrequency.x - uTime) * 0.1;
4
  elevation += sin(modelPosition.y * uFrequency.y - uTime) * 0.1;
5
  modelPosition.z += elevation;
6

7
  vec4 viewPosition = viewMatrix * modelPosition;
8
  vec4 projectionPosition = projectionMatrix * viewPosition;
9

10
  gl_Position = projectionPosition;
11
  // gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
12

13
  vUv = uv;
14
  vElevation = elevation;
15
}

main()函数是整个程序的入口，对每个顶点都会执行这段代码。

gl_Position是顶点着色器的内置输出变量，用于存储顶点的最终裁剪空间坐标。这个坐标会被后续的图形管线用于裁剪、透视除法和视口变换到屏幕空间。

每个矩阵都会对 gl_Position进行变换，最终时将顶点定位在裁剪空间内。所以在渲染时我们会应用不同的矩阵，直到获得裁剪空间的顶点坐标。

在每次顶点着色器运行结束时，OpenGL 期望坐标在特定范围内，并且任何超出此范围的坐标都将被剪裁。被剪切的坐标将被丢弃，因此剩余的坐标最终将在屏幕上显示为片段。这也是 clip space (裁剪空间)名称的由来。

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

因为矩阵乘法是右乘计算的，实际计算顺序：modelMatrix → viewMatrix → projectionMatrix。组合顺序不能变，等价于下面的代码

1
vec4 modelPosition = modelMatrix * vec4(position, 1.0);
2
vec4 viewPosition = viewMatrix * modelPosition;
3
vec4 projectionPosition = projectionMatrix * viewPosition;
4

5
gl_Position = projectionPosition;

fragment.glsl#

1
precision mediump float;
2

3
uniform vec3 uColor;
4
// 声明一个 uniform sampler2D，用于表示可以在片段着色器中采样的纹理
5
uniform sampler2D uTexture;
6

7
varying vec2 vUv;
8
varying float vElevation;
9

10
void main() {
11
    // 第一个参数是纹理，第二个参数是在纹理的哪个位置着色也就是uv坐标
12
    vec4 textrueColor = texture2D(uTexture, vUv);
13
    textrueColor.rgb *= vElevation * 2.0 + 0.5; // [0.3, 0.7]
14
    // gl_FragColor = vec4(uColor, 1.0);
15

16
    gl_FragColor = vec4(textrueColor);
17
}

1
precision mediump float;

定义浮点数的精度：highp，mediump，lowp

为什么需要？当你在处理非常大、非常小的数值时，或者需要大幅缩小场景，然后放大到场景中的一个很小的物体上，可能会影响渲染效果。

highp会影响性能，而且低端设备上可能无法支持；lowp可能因为缺乏精度引发错误。所以通常使用 mediump

1
uniform sampler2D uTexture;

申明一个 uniform的 sampler2D(2D textrue)类型，存储了纹理数据

1
varying vec2 vUv;
2
varying float vElevation;

从 vertex.glsl 中接收插值vec2 vUv和float vElevation

fragment shader 不能直接获取attribute，如果要获取uv坐标，需要通过 vertex shader，发送给 fragment shader 接收，并且要取别名不能重复声明变量。

1
vec4 textrueColor = texture2D(uTexture, vUv);

texture2D(sampler2D sampler, vec2 uv) 是一个用于从2D纹理中采样颜色值的内置函数，根据给定的纹理坐标从绑定的纹理中获取对应的颜色数据。为3D模型的每个顶点指定UV坐标，告诉渲染器：“将纹理图像中(u, v)位置的颜色，应用到该顶点对应的模型表面区域”。

输入两个参数，第一个参数是纹理，第二个参数是在纹理的哪个位置着色也就是uv坐标；输出一个 vec4 类型的颜色值（RGBA格式）

1
gl_FragColor = vec4(uColor, 1.0); // 应用 material.uniforms.uColor 的颜色
2

3
gl_FragColor = vec4(textrueColor); // 应用采样后的纹理颜色

gl_FragColor = vec4(r, g, b, a)给每个可见片段上色，直接决定了渲染到屏幕（或帧缓冲）的像素颜色。若要更改透明度(a)时，需要给material设置 transparent: true

如果想查看某些值，我们可以发送给gl_FragColor显示，例如查看uv gl_FragColor = vec4(vUv, 1.0, 1.0);

ShaderMaterial#

ShaderMaterial和RawShaderMaterial基本相同，只不过ShaderMaterial提前加入了一些声明：

1
uniform mat4 projectionMatrix;
2
uniform mat4 viewMatrix;
3
uniform mat4 modelMatrix;
4

5
attribute vec3 position;
6
attribute vec2 uv;
7

8
precision mediump float;

RawShaderMaterial中所有uniforms和attributes需用户手动声明和赋值。