three.js着色器

着色器是一段在GPU中执行的接近C语言的代码，顶点着色器对于每个顶点调用一次，片元着色器对于每个片元调用一次。

顶点着色器

<span style="font-size:24px;">varying vec2 vUv; </span>

<span style="font-size:24px;">void main() { </span>

<span style="font-size:24px;">// passing texture to fragment shader </span>

<span style="font-size:24px;">vUv = uv;</span>

<span style="font-size:24px;"> gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); </span>

<span style="font-size:24px;">}</span>

让我们一起来认识一下varing。它是WebGL定义的限定符（Qualifier），限定符用于数据类型（Type）之前，表明该变量的性质。 限定符共有四个：

1.   const ：这是我们熟悉的常量意思
2.   attribute：从 JavaScript代码传递到顶点着色器中，每个对应不同的值 代码传递到顶点着色器中，每个对应不同的值 
3.   uniform：每个顶点 ：每个顶点 /片元对应相同的值 
4.   varying：从顶点着色器传递到片元中
   

如果不写限定符，那么默认是只有在当前文件中能访问。

所以，varyingvec2 vUv;的意思是，声明了一个叫vUv的变量，它的类型为vec2，该变量是为了将顶点着色器中的信息传递到片元着色器中。那么它传递了什么信息呢？我们看到与之相关的只有vUv =uv;，可是uv都没声明过啊！这是哪里来的？ 其实，uv是Three.js帮你传进来的一个很有用的属性，它代表了该顶点在UV映射时的横纵坐标。简单地说，一个物体的模型可能很复杂，对其贴图的一个简单有效的方法就是UV映射，将每个面片贴的图统一映射到一张纹理上，记录每个面片贴图在纹理上对应的位置。

而之所以称为u和v，指的就是在纹理映射后的新坐标系。

我们也发现，uv变量的类型是vec2，顾名思义就是一个二维的向量，可以使用uv.x和uv.y分别访问到uv两个维度的值。

使用varyingvec2 vUv;将uv信息传递到片元着色器是因为片元着色器本身不能访问到uv信息，如果需要得到这一值的话，就需要从顶点着色器中传递过去，我们将其命名为vUv。

如何处理每个顶点是可以自由定制的，但顶点着色器有一个必做的事，就是为一个名为gl_Position 的变量赋值