1.顶点着色器（vertexShader）

基元形状，比如一个球体，是由顶点构成的，顶点着色器被依次传入这些顶点中的一个顶点，然后处理它。如何处理每个顶点是可以自由定制的，但顶点着色器有一个必做的事，就是为一个名为 gl_Position （放置顶点坐标信息）的变量赋值，该变量是一个4维数组（vec4），表示该顶点最终在屏幕上的位置。但我们需要如何将一个三维坐标（一个具有x、y、z值得顶点）转化为，或者说投影到二维的屏幕上。Three.js提供了可以方便地访问到 gl_Position的工具 。

2.片元着色器（fragmentShader）

片元着色器用于处理颜色和光源、纹理，和顶点着色器类似，片元着色器有一项必须完成的任务：设置或消除变量 gl_FragColor（设置当前片点的颜色） ，也是一个四维浮点变量（vec4 RGBA color），也就是片元点最终的颜色。

什么是片元？想象一个具有三个顶点的三角形，片元就是经过这三个顶点计算后的，所有在三角形内部的点。因此，片元值由顶点的值内插生成。如果一个顶点的颜色是红色，相邻顶点的颜色是蓝色，那么我们可以观测到颜色从红色顶点附近渐变，由红色变成紫色，最终在蓝色顶点附近变成蓝色。

3.着色器变量

GLSL中的着色器变量，有三种：Uniforms，Attributes和Varyings。

  1)Uniforms变量(即用uniform修饰的变量)既可以传入顶点着色器，也可以传入片元着色器，它们包含了哪些在整个渲染过程中保持不变的变量，比如，一个点光源的位置。

  2)Attributes(即用attribute修饰的变量)变量对应于每个顶点，它们只可以传入顶点着色器中，比如每个顶点都具有一个颜色。Attributes变量和顶点的关系是一一对应的。

  3)Varyings(即用varying修饰的变量)变量是在顶点着色器中定义，并且准备传入给片元着色器的变量。为了确保这点，我们需要确保在两个着色器中变量的类型和命名完全一致。一个经典的应用是法线向量，因为在计算光照的时候需要用到法线。

示例一：给物体赋红色材质

编写着色器代码

		<!--顶点着色器-->
		<script id="vertexShader" type="x-shader/x-vertex">
			void main(){
				//最终顶点位置信息=投影矩阵*模型视图矩阵*每个顶点坐标
				gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);
			}
		</script>
		<!--片元着色器-->
		<script id="fragmentShader" type="x-shader/x-fragment">
			void main(){
				//将任意一个像素色设置为该颜色RGBA（红色）
				gl_FragColor=vec4(1.0,0.0,1.0,1.0);//r,g,b,a
			}
		</script>

将读取到的着色器代码字符添加到着色器材质中编译

				var shaderMaterial=new THREE.ShaderMaterial({
					vertexShader:document.getElementById("vertexShader").textContent,
					fragmentShader:document.getElementById("fragmentShader").textContent
				});

编译后的着色器将连接在创建的材质上，材质添加到mesh物体上，就可以看到效果

还可以向着色器材质添加另外两种属性：uniforms和attributes。他们可以是向量、整数或者浮点数，uniforms变量在计算所有点的过程中保持不变，所以它们更加可能是单一值，而attributes变量是对每个顶点而言的，所以他们应当是数组。在一个mesh中，attribute变量和顶点应当是一一对应的。