webGl shader的学习记录(六)：如何画出一个渐变色填充的三角形

 在前几节中我们分别学习 点 线 三角形的学习。今天我们给三角形添加一个渐变色

 在这个章节中如果你跟着看了前几张的学习内容，你就很快可以理解本章的内容了。如果你并没有webgl的经验，你可以去我的博文中看我之前的文章；

这一章节中其实与上创建线段与三角形并没有上面区别，唯独有两个点需要注意一下；

第一需要注意的地方，在于glsl语言定义中我们需要把顶点着色器与片元着色器结合起来，请看下面的代码

    ///顶点着色皮
    let vertexShaderSource = `
        //浮点数设置为中等精度
		precision mediump float;
		//接收 JavaScript 传递过来的点的坐标（X, Y）
		attribute vec2 a_Position;
		// 接收canvas的尺寸。
		attribute vec2 a_Screen_Size;
		attribute vec4 a_Color;
		varying vec4 v_Color;
		void main(){
			// 将 canvas 的坐标值 转换为 [-1.0, 1.0]的范围。
			vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
			// canvas的 Y 轴坐标方向和 设备坐标系的相反。
			position = position * vec2(1.0, -1.0);
			// 最终的顶点坐标。
			gl_Position = vec4(position, 0.0, 1.0);
			v_Color = a_Color;
		}
    `
    //片元着色器
    let fragmentShaderSource = `
         //设置浮点数精度为中等。
        precision mediump float;
        //接收 JavaScript 传过来的颜色值（rgba）。
        varying vec4 v_Color;
        void main(){
          vec4 color = v_Color / vec4(255, 255, 255, 1);
          gl_FragColor = color;
       }
    `

如果你并不太理解上面的内容是什么意思的话，可以去看这一章，你会大概的明白是什么意思

 我们可以看到在顶点着色器与片元着色器中存在了同样的一个变量，入伙你对varying 不理解的话，可以点进去查看片的文章。看完你就知道了。打通顶点着色器与片元着色器。

varying vec4 u_Color

还有一个地方需要我们注意的是webgl.enableVertexArray();这个API函数。一定不要忘记。

    canvas.addEventListener('click',evt => {
        let x = evt.pageX;
        let y = evt.pageY;
        positions.push(x,y);
        let color = randomColor();
        colors.push(color.r,color,color.b,color.a)
        if(positions.length % 6 == 0){
            gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);//绑定使用当前的缓冲区
            gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(positions),gl.DYNAMIC_DRAW);//将数据放进去
            gl.bindBuffer(gl.ARRAY_BUFFER,colorBuffer);//绑定使用颜色缓冲区
            gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colors),gl.DYNAMIC_DRAW);//将数据放入缓冲区中
            this.render(gl);
        }



    });

 文中有两个缓冲区，那应该如何使用呢，看判断中的内容，我们先绑定，然后传数据就可以了

 

另外还需要说一下的就是函数 webgl.enableVertexAttribArray();可以点进去看看哦，不要忘记这个；

enableVertexArray()激活WebGL图层将单个顶点从顶点缓冲区传递到顶点着色器函数的属性的用法。