THREEjs中的定点着色器

什么是着色器

着色器是用 GLSL 编写的程序，发送到 GPU。它们用于定位几何体的每个顶点并为几何体的每个可见像素着色。术语“像素”并不准确，因为渲染中的每个点并不一定与屏幕的每个像素相匹配，这就是为什么我们用“片段”这个词的原因。

顶点着色器

顶点着色器的目的是确定几何体的顶点位置。我们需要发送顶点位置、网格变换（如位置、旋转和缩放）、相机信息（如位置、旋转和视野）。然后，GPU 将遵循顶点着色器中的指令来处理所有这些信息，以便将顶点投影到一个 2D 空间，也就是我们的渲染器——换句话说，就是我们的屏幕。

在使用顶点着色器时，它的代码将应用于几何体的每个顶点。但是，像顶点位置这样的数据在每个顶点之间会发生变化。这种在顶点之间发生变化的数据被称为属性（attribute）。然而，有些数据在每个顶点之间并不需要改变，比如网格的位置。这种在顶点之间不发生变化的数据被称为统一变量（uniform）。

const material = new THREE.RawShaderMaterial({
  vertexShader: `
    uniform mat4 projectionMatrix;
    uniform mat4 viewMatrix;
    uniform mat4 modelMatrix;
    attribute vec3 position;
    void main()
    {
      gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    precision mediump float;
    void main()
    {
      gl_