webgl进阶Shader篇（基于Three.js）——第一个简单的Shader

一.从一个shader开始  

  Three.js已经简化了很多写shader的工作，最主要的工作就是他把一些常用的矩阵已经作为一个常量提供给我们。

    首先来看Three.js官网的说明，一些常用参数已经和几何元素、相机等关联在一起，我们只需要拿来用即可。

    来看第一个shader，通过shader改变几何体表面的颜色，效果还是很炫酷的。

然后再来分析代码，看是如何实现的。

1）先看vertexshader，这个简单明了，gl_Position=mvp，然后将UV坐标传递到fragmentshader中，在fragmentshader中定义一个time参数，然后点的颜色随着时间和位置的变化而变化。

2）接下来在创建几何物体的时候，取到time这个参数，几何体中的材料采用shaderMaterial（）；

3）最后在animation里随着时间改变time这个参数。

二.简化shader

在片面着色器中，如果y坐标大于0，那么颜色为红色，如果y坐标小于0，颜色为绿色。我们只需要在上述基础上修改下片元着色器，然后从顶点传进来一个坐标pos。

最后结果：

三、进一步完善效果，这个时候发现两个颜色界限太明显，如果能够柔和过渡一下效果可能会更好一些。

根据这种想法，我们把过渡段的正负100的位置加上条件判断，从而确定过渡段的颜色。这里的一个关键点是用了mix这个内置函数。

最终效果：