5.Buffer、ArrayBuffer和类型化数组

现在我们获取到了上下文并设置好了视口，可以准备开始绘制了。这个和2DCanvas还是很像的。WebGL的绘制是由图元组成的，图元的种类包括三角形（三角形数组）、三角形带（triangle strip）、点和线。图元使用的数据数组被称为Buffer,它定义了顶点的位置。下面的示例展示了如何创建一个大小为1*1的正方形的顶点数组。返回的Js对象存储了顶点数组信息、数组中每个顶点所占的尺寸（在这个示例中，包含三个浮点数来存储,x,y,z的值）、需要绘制的顶点的数量以及用于绘制正方形的图元的类型。（在这个示例中，我们使用了三角形带。三角形带是一种基本的渲染图元，它是指使用前三个顶点画出第一个三角形，然后再用这前三个顶点中的后两个与下一个顶点结合再绘制一个三角形，依次类推。）

        function createSquare(gl) {
            var vertexBuffer;
            vertexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            var verts = [
                .5, .5, 0.0, -.5, .5, 0.0,
                .5, -.5, 0.0, -.5, -.5, 0.0
            ];
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
            var square = {
                buffer: vertexBuffer,
                vertSize: 3,
                nVerts: 4,
                primtype: gl.TRIANGLE_STRIP
            };
            return square;
        }