Shader 介绍

什么是着色器

    实际上，着色器是 WebGL 的主要组件之一。如果我们在没有 Three.js 的情况下启动 WebGL，这将是我们必须学习的第一件事，这就是原生 WebGL 如此困难的原因。
    着色器是用 GLSL 编写的发送到 GPU 的程序。它们用于定位几何图形的每个顶点并为该几何图形的每个可见像素着色。术语“像素”并不准确，因为渲染中的每个点不一定与屏幕的每个像素匹配，这就是我们更喜欢使用术语“片段”的原因，因此如果您同时看到这两个术语，请不要感到惊讶。
    然后我们向着色器发送大量数据，例如顶点坐标、网格变换、有关相机及其视野的信息、颜色、纹理、灯光、雾等参数。 然后 GPU 进行处理所有这些数据都遵循着色器指令，我们的几何图形出现在渲染中。
    有两种类型的着色器，我们都需要它们。

顶点着色器

    顶点着色器的目的是定位几何体的顶点。这个想法是发送顶点位置、网格变换（比如它的位置、旋转和缩放）、相机信息（比如它的位置、旋转和视野）。然后，GPU 将按照顶点着色器中的指令处理所有这些信息，以便将顶点投影到将成为我们渲染的 2D 空间——换句话说，我们的画布。

    使用顶点着色器时，其代码将应用于几何体的每个顶点。但是有些数据比如顶点位置会在每个顶点之间发生变化。这种类型的数据——在顶点之间变化的数据——被称为**attributes**。但是有些数据不需要像网格的位置那样在每个顶点之间切换。是的，网格的位置会影响所有顶点，但方式相同。这种类型的数据——在顶点之间不会改变的数据——被称为**uniform**。稍后我们将回到**attributes**和**uniform**。

    顶点着色器首先发生。一旦放置了顶点，GPU 就知道几何体的哪些像素是可见的，并且可以继续执行片段着色器。

片段着色器

  片段着色器的目的是为几何体的每个可见片段着色。
  几何体的每个可见片段都将使用相同的片段着色器。我们可以使用uniforms像颜色一样向它发送数据——就像顶点着色器一样，或者我们可以将数据从顶点着色器发送到片段着色器。我们称这种类型的数据——从顶点着色器到片段着色器的数据——变化。我们稍后会回到这个话题。
  片段着色器中最直接的指令可以是用相同的颜色为所有片段着色。我们得到了[MeshBasicMaterial](https://threejs.org/docs/index.html#api/en/materials/MeshBasicMaterial)的等价物——如果我们只设置了**color**属性。
  或者我们可以向着色器发送更多数据，例如灯光位置。然后，我们可以根据人脸在光源前的位置为片段着色。我们会得到[MeshPhongMaterial](https://threejs.org/docs/index.html#api/en/materials/MeshPhongMaterial)等价物——如果我们在场景中有一个灯。

概括

在vertex shader的位置上渲染顶点。

所述fragment shader的颜色，几何的每个可见片段（或像素）。

所述片段着色器在之后执行的fragment shader。

每个顶点之间变化的数据（如它们的位置）称为attribute，只能在vertex shader中使用。

顶点之间不变的数据（如网格位置或颜色）称为uniform，可用于vertex shader和fragment shader。

我们可以使用变量将数据从vertex shader发送到fragment shader。