WEBGL - 七种基本图形的绘制

通过gl.drawArrays(mode, girst,count)方法，可以绘制七种基本图形，如下表所示

基本图形	参数	描述
点	gl.POINTS	一系列的点，绘制在 v0 ,v1,v2....
线段	gl.LINES	一系列单独的线段，绘制在(v0, v1),(v2,v3)...，若点个数使奇数，则最后一个点被忽略
线条	gl.LINE_STRIP	一系列连接的线段，绘制在(v0,v1),(v1,v2)...最后一个点使一条线段的终点
回路线条	gl.LINE_LOOP	一系列连接的线段，与gl.LINE_STRIP相比，最后一个点会与开始的点相连接(vn,v0),线段会闭合
三角形	gl.TRIANGLES	一系列单独的三角形，绘制在(v0, v1, v2),(v3, v4, v5)...，点个数若不是3的倍数，则剩下的被忽略
三角带	gl.TRIANGLE_STRIP	一些列条带状的三角形，前三个点构成第一个三角形，从第二个点开始的三个点构成第二个三角形，以此类推…，(v0,v1,v2),(v2,v1,v3),(v2,v3,v4)...
三角扇	gl.TRIANGLE_FAN	一系列三角形组成的类似扇形的图形，前三个点构成第一个三角形，接下来的一个点和前一个三角形的最后一条边组成接下来的一个三角形，被绘制在(v0, v1, v2),(v0, v2, v3),(v0, v3, v4)...

2、绘制一个矩形

使用三角形的绘制方法gl.TRIANGLE_STRIP来通过4个点绘制两个三角形，实现绘制一个矩形

下面是四个点的位置

• v0(-0.5, 0.5)
• v1(-0.5, 0.5)
• v2(0.5, 0.5)
• v3(0.5, -0.5)

使用三角带gl.TRIANGLE_STRIP这种绘图模式组成的第一个三角形是(v0, v1, v2)第二个是(v2, v1, v3)

var vertices = new Float32Array([
    -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
]);

var n = vertices.length / 2;

• 1
• 2
• 3
• 4
• 5

此时的n值是4，也就是4个顶点，调用gl.drawArrays()

gl.drawArrays(gl.TRIANGLE_STRIP,0, n);