WebGL中着色器shader的处理方法

关于着色器

WebGL中，所谓的固定渲染管线是不存在的。估计会有人问，什么是固定渲染管线？先来简单说明一下。

固定渲染管线，简单来说，就是3d渲染所进行的一连串的计算流程，就像流水线一样。（说的有点太简单了。）

固定渲染管线中，上次所说的模型，视图，投影的坐标变换都会替我们完成。不需要理解细节，只需要知道所有的这些坐标变换都包含在里面，都会帮我们计算好。

如果有了固定渲染管线，编写程序就比较容易了，因为所有的变换都是由固定渲染管线来完成的，但是缺点就是自由度低。固定渲染管线只能完成一些最基本的操作，如果想要做一些特殊的处理，就比较麻烦了。

好了，固定渲染管线就说到这里了。

前面说了，WebGL中不存在固定渲染管线。也就是说，坐标变换必须全部由自己来做。而且，这个记述了坐标变换的机制就叫做着色器(Shader)。

这样可以由程序员控制的机制叫做可编辑渲染管线。而着色器又有 处理几何图形顶点的顶点着色器和处理像素的片段着色器两种类型。

由于WebGL中没有固定管线，所以必须准备好顶点着色器和片段着色器。

固定渲染管线与可编程渲染管线的区别： https://www.cnblogs.com/lihonglin2016/p/6270771.html

着色器的处理方法

顶点着色器和片段着色器要怎么准备呢？

实际上，着色器的添加可以有多种做法。着色器是由程序员自己编写的，而且着色器的代码就是简单的字符串而已。所以，不管用什么方法，只要把这个着色器字符串传给程序就可以了。

最简单的方法，就是把着色器记录在HTML中。使用这种方法的话，是利用HTML的script标签来做的。下面是一个简单的例子。

写在HTML中：