纯色三角形我们先用buffer画一个三角形：完整代码如下：抱歉，您的浏览器不支持画布！接下来我们解读一下上面的代码shadertriangle共有3个点，所以不能再硬编码，需要定义变量并使用buffer来传递，vertexshader修改如下：属性vec4a_position;voidmain(){gl_Position=a_position;}虽然三角形是纯色，但是颜色可以写死，但是我们要演示如何通过一个变量来设置颜色，所以片段着色器也做了修改:precisionmediumpfloat;uniformvec4u_color;voidmain(){gl_FragColor=u_color;}设置单一颜色不同于点，颜色只是一个值，不需要使用buffer，比较简单，来看看首先在特定代码处：varu_color=gl.getUniformLocation(glProgram,'u_color');gl.uniform4f(u_color,1,0,0,1);颜色值为rgba(1,0,0,1)，即不透明的红色。使用缓冲区设置点首先准备缓冲区对象：varbuffer=gl.createBuffer();gl.bindBuffer（gl.ARRAY_BUFFER，缓冲区）；然后，准备数据并将其写入缓冲区：vardata=newFloat32Array([-0.7,-0.7,0,0.7,-0.7,1,0,0.7,0]);gl.bufferData（gl.ARRAY_BUFFER，数据，gl.STATIC_DRAW）；最后，分配缓冲区中的数据给变量a_position即可：vara_position=gl.getAttribLocation(glProgram,"a_position");gl.vertexAttribPointer(a_position,3,gl.FLOAT,false,data.BYTES_PER_ELEMENT*3,0);gl.enableVertexAttribArray(a_position);绘制gl.drawArrays(gl.TRIANGLES,0,3);这样，一个红色的三角形就画出来了。那么，既然可以传3个点，那每个点的颜色是不是可以不一样呢？当然。渐变色三角形下面我们把这个三角形变成渐变色，先看看最后的效果：同样的，先看完整的代码，后面会把必要的一一解释：抱歉，您的浏览器不支持canvas！使用buffer只设置点的colorshadervertexshader可以传多个数据，所以需要先改造vertexshader，通过pipeline实现：attributevec4a_position;attributevec4a_color;varyingvec4v_color;voidmain(){gl_Position=a_position;v_color=a_color;}然后，片段着色器通过桥接方式接收：precisionmediumpfloat;改变vec4v_color；voidmain(){gl_FragColor=v_color;}这里的varyingtype变量相当于一座桥。当然，桥可以通过buffer的方式设置多个颜色点。设置和之前一样，我们只需要修改点颜色的设置即可：vara_color=gl.getAttribLocation(glProgram,"a_color");gl.vertexAttribPointer(a_color,3,gl.FLOAT,false,data.BYTES_PER_ELEMENT*6,data.BYTES_PER_ELEMENT*3);gl.enableVertexAttribArray(a_color);其余的和以前一样。
