什么是着色器？
固定渲染管线 ——这是标准的几何&光照(T&L)管线，功能是固定的，它控制着世界、视、投影变换及固定光照控制和纹理混合。T&L管线可以被渲染状态控制，矩阵，光照和采制参数。
如果有了固定渲染管线，编写程序就比较容易了，因为所有的变换都是由固定渲染管线来完成的，但是缺点就是自由度低。固定渲染管线只能完成一些最基本的操作，如果想要做一些特殊的处理，就比较麻烦了。
WebGL中不存在固定渲染管线，坐标变换必须全部由自己来做，这个记述了坐标变换的机制就叫做着色器(Shader)。
这样可以由程序员控制的机制叫做可编辑渲染管线。而着色器又有 处理几何图形顶点的顶点着色器和处理像素的片段着色器两种类型。
由于WebGL中没有固定管线，所以必须准备好顶点着色器和片段着色器。
着色器的处理方法
顶点着色器和片段着色器要怎么准备呢？
实际上，着色器的添加可以有多种做法。着色器是由程序员自己编写的，而且着色器的代码就是简单的字符串而已。所以，不管用什么方法，只要把这个着色器字符串传给程序就可以了。
最简单的方法，就是把着色器记录在HTML中。使用这种方法的话，是利用HTML的script标签来做的。下面是一个简单的例子。
写在HTML中：
<script id="vshader" type="x-shader/x-vertex">
※顶点着色器
</script>
<script id="fshader" type="x-shader/x-fragment">
※片段着色器
</script>
canvas也一样，为了在javascript中可以调用，给script标签加上了id属性。另外，type属性是和javascript不同的，不要误认为是javascript代码。
指定type属性的理由
type属性指定了［x-shader/x-vertex］和［x-shader/x-fragment］，这并不是HTML中定义的正式的写法。但是一般的浏览器如果遇到不识别的标签的话会无视掉的，浏览器不会认为这是javascript代码的。浏览器只会把它当成无意义的字符串，而程序中则可以使用标签里面的内容。
另一个，也可以不使用script标签来做。
主要是因为着色器的代码就是简单的字符串，可以直接在javascript内部定义字符串。这样的话，着色器被定义在了javascript文件中，HTML的代码就变的简单多了，并不是说，这种做法比前一种做法好。
通俗讲，其实就是在script标签中，定义了属性type=“x-shader/x-fragment”，浏览器就不会认为这是一个单独的新的script标签（js文件），而是一段用script首尾标签包含起来的普通字符串文本，在程序代码中可以通过id属性来访问到script里的这段文本，可以优化代码结构。
着色器材质
threejs所谓的材质对象Material本质上就是着色器代码和需要传递的uniform数据(光源、颜色、矩阵…)。
很多时候如果想写一些特效，往往需要编写着色器代码GLSL，如果不熟悉着色器语言，自然需要学习着色器语言语法，如果有着色器语言基础，直接使用Threejs引擎的ShaderMaterial或RawShaderMaterial API编写就可以。相比较在原生WebGL代码中编写着色器要方便的多，在threejs中想着色器传递数据不需要像WebGL中要使用WebGL API来传递，threejs会自动处理。
RawShaderMaterial
和原生WebGL中一样，顶点着色器、片元着色器代码基本没有任何区别，
不过顶点数据和uniform数据可以通过threejs的API快速传递，要比使用WebGL原生的API与着色器变量绑定要方便得多。
ShaderMaterial
ShaderMaterial比RawShaderMaterial更方便些，着色器中的很多变量不用声明，threejs系统会自动帮你设置，比如顶点坐标变量、投影矩阵、视图矩阵…