8.绘制图元

我们建立了上下文，设置了视口，顶点数组、矩阵和着色器也已经设置并初始化完成。我们定义了一个函数draw(),在这个函数中将接管WebGL上下文和我们之前建立的矩阵形象。首先，函数会清理一下画布并用黑色作为背景颜色。然后将顶点数组绑定到上下文中，使用着色器，并把顶点数组和矩阵作为输入传递给着色器。最后我们调用了WebGL的drawArrays()方法来绘制正方形。我们简单地告诉它，图元的类型和图元中有多少顶点，webgl会自动根据我们在上下文中设置的其他值（顶点、矩阵、着色器）完成绘制。

        function draw(gl, obj) {

            // 用黑色清空背景
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            // 设置顶点数组
            gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);

            // 设置着色器
            gl.useProgram(shaderProgram);

            // 设置着色器参数：顶点坐标、投影矩阵和模型视图矩阵
            gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);
            gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix);
            gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix);

            // 绘制物体
            gl.drawArrays(obj.primtype, 0, obj.nVerts);
        }