WebGL自学教程——WebGL示例：为三角形加上颜色

为三角形加上颜色

　

    上一章中，我讲解了绘画三角形的步骤。这个步骤也是我们绘画其他任何图形的步骤，无论绘画的最终效果有多绚丽、有多复杂。

    本章的目的，是给这个三角形上色。为此，我们需要为它指定颜色。为三角形指定颜色和指定顶点位置类似。在进行指定颜色之前，我首先说一下上章中着色器的源码（这也是上章缺少的内容）。

    先来看看顶点着色器的源码：

        <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 v3Position;
        void main(void)
        {
            gl_Position = vec4(v3Position, 1.0);
        }
        </script>

    script的部分不属于着色器源码，不管它。attribute vec3 v3Position;这句，定义了一个类型为vec3的属性，该属性的名称为v3Position。在上章中你可以看到，我们就是使用了这个“v3Position”，通过程序对象中的一个顶点属性的索引，将该属性和三角形的顶点数组数据关联了起来，使得该属性能够访问我们定义的三角形的各个顶点位置。顶点属性的索引像是一个自来水管道，拥有开关、进水口和出水口。我们使用enableVertexAttribArray控制管道的开和关；使用vertexAttribPointer将数据流接到管道的进水口；使用bindAttribLocation，将出水口接到了我们的顶点着色器的属性v3Position上。

    接下来是一个入口函数，就象C、C++那般。函数体只有一条语句，就是将我们从自来水管道中接到的每一滴水由vec3类型转换到vec4类型，然后赋值给gl_Position。此处的vec3和vec4是着色器中的内建类型（在后面你可能会在js中看到同样的类型。但它们不是一回事。js中的vec3和vec4是我们自己定义的function）。gl_Position是顶点着色器中的特殊的内建变量。它的值直接影响到对应的像素点（我们称之为片段）最终在屏幕上的显示位置。

    再来看看片段着色器的源码：

        <script id="shader-fs" type="x-shader/x-fragment">
        void main(void)
        {
            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
        }
        </script>

    这个比顶点着色器还要简单。入口函数和顶点着色器相同。它没有定义任何变量，只是简单地给片段着色器的内建变量gl_FragColor赋值。gl_FragColor的值，直接影响到片段最终在屏幕上的显示内容（颜色）。

    注意，gl_Position是顶点着色器特有的，不能在片段着色器中使用。同样gl_FragColor是片段着色器特有的，不能在顶点着色器中使用。另外，顶点属性变量是顶点着色器特有的，在片段着色器中定义的话会导致错误。顶点着色器和片段着色器都可以使用的是uniform变量。和attribute不同，uniform变量无法手动绑定，只能由程序对象在链接时自动绑定到uniform索引。之后，使用WebGL函数getUniformLoca