WebGL 探秘 (3)

这里对程序进行，之所以为什么这样校验个人暂时也不太懂，只是 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)
   

007.JPG