这里对程序进行，之所以为什么这样校验个人暂时也不太懂，只是 copy，预计应该便于我们开发人员进行调试吧。

gl.validateProgram(shaderProgram)if(!gl.getProgramParameter(shaderProgram,gl.VALIDATE_STATUS)){    console.log("ERROR validating program ",gl.getProgramInfoLog(shaderProgram))}

这里我们定义三角形的顶点坐标，我们回到看一下 attribute vec2 vertPosition; 所以我们的顶点坐标是二维的，所以每两个点定义一个坐标，而后这些坐标组成一个数组用来表示三角形，具体这里数值怎样来的，为什么是这个数值。随后分享

const triangleVertices = [        0.0,0.5,        -0.5,-0.5,        0.5,-0.5    ];

1. 首先为三角形创立一个位置的 buffer
2. 而后为 buffer 指定类型
3. 而后将我们三角形的顶点坐标给定buffer类型

• 这里有一点值得注意就是 javascript 的 triangleVertices 类型为 float64 而 webgl 需要 float32 所以我们需要转一下型

 var triangleVertexBufferObject = gl.createBuffer();    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject);    gl.bufferData(gl.ARRAY_BUFFER,        new Float32Array(triangleVertices),        gl.STATIC_DRAW);

这里我们定义属性这是需要传入 shader 进行计算的我们定义本地数据 vertPosition

var positionAttribLocation = gl.getAttribLocation(shaderProgram,'vertPosition')

vertexAttribPointer 这个函数接受 5 参数

• numComponents 表示我们坐标数这里是 2
• normalize 了解他需要肯定做 3d 基础他是我们绘制面的法线，也就是垂直我们面的一条线
• stride 这里 2 * 4
• offset 表示数组中偏移量

 const numComponents = 2;    const type = gl.FLOAT;    const normalize = gl.FALSE;    const stride = 2 * Float32Array.BYTES_PER_ELEMENT;    const offset = 0;    gl.vertexAttribPointer(        positionAttribLocation,        numComponents,        type,        normalize,        stride,        offset);

drawArrays 多半时候我们都是在绘制三角形，三角形是我们做动画的基础，有时候也会绘制点和线

 gl.enableVertexAttribArray(        positionAttribLocation); gl.useProgram(shaderProgram)    gl.drawArrays(gl.TRIANGLES,0,3)