绘图方法 gl.drawArrays( mode, first, count )

gl.drawArrays() 方法是 WebGL 中的绘图方法,一切几何图形都由三角形拼接而成,三角形的个数及复杂程度决定了图形的最终效果。
mode : 绘制的方式 gl.POINTS, gl.LINES, gl.LINE_STRIP, gl.LINE_LOOP, gl.TRIANGLES , gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN
first : 从哪个点开始绘制
count : 指定绘制需要使用到多少个点

gl.POINTS 正方形的点
gl.LINES 单独线段,如果点的个数是奇数,最后一个点将被忽略
gl.LINE_STRIP 连接的线段
gl.LINE_LOOP 连接的线段,有最后一个点连到第一个点的线段
gl.TRIANGLES 一系列单独的三角形,顶点为(v0, v1, v2), (v3, v4, v5)... ...如果点的个数不是2的倍数,最后的一个或两个点将被忽略
gl.TRIANGLE_STRIP 一系列三角形组成的带,顶点为(v0, v1, v2), (v2, v1, v3), (v2, v3, v4)... ...
gl.TRIANGLE_FAN 三角形组成的扇形,顶点为(v0, v1, v2), (v0, v2, v3), (v0, v3, v4)... ...

下面代码中的 verticsSize 有7个点的数据,包括位置、尺寸、颜色,修改代码中的 mode 可以绘制上面图形。

<script id="vertexShader" type="x-shader/x-vertex"> attribute vec4 a_Position; attribute float a_PointSize; attribute vec4 a_Color; varying vec4 v_Color; void main(){ gl_Position = a_Position; gl_PointSize = a_PointSize; v_Color = a_Color; } </script> <script id="fragmentShader" type="x-shader/x-fragment"> precision mediump float; varying vec4 v_Color; void main(){ gl_FragColor = v_Color; } </script> function init(){ var canvas = document.getElementById('canvas'), gl = canvas.getContext('webgl'); if(!gl){ console.log('Failed to get WebGL.'); return; } if(!initShaders(gl, "vertexShader", "fragmentShader")){ console.log('Failed to init Shaders.'); return; } // 获取 attribute 变量的存储地址 var a_Position = gl.getAttribLocation(gl.program, 'a_Position'), a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize'), a_Color = gl.getAttribLocation(gl.program, 'a_Color'); if(a_Position < 0 || a_PointSize < 0 || a_Color < 0){ console.log('Failed to get the location'); console.log(a_Position, a_PointSize, a_Color); return; } var verticsSize = new Float32Array([ -0.9, 0.5, 10.0, 1.0, 0.0, 0.0, 1.0, -0.6, -0.5, 10.0, 0.0, 1.0, 0.0, 1.0, -0.3, 0.5, 10.0, 0.0, 0.0, 1.0, 1.0, 0.0, -0.5, 10.0, 1.0, 0.0, 0.0, 1.0, 0.3, 0.5, 10.0, 0.0, 1.0, 0.0, 1.0, 0.6, -0.5, 10.0, 0.0, 0.0, 1.0, 1.0, 0.9, 0.5, 10.0, 1.0, 0.0, 0.0, 1.0 ]); var element_size = verticsSize.BYTES_PER_ELEMENT; // 创建缓冲区对象,对其写入数据 initVertexBuffer(gl, verticsSize, a_Position, a_PointSize, a_Color, element_size); // 设置背景色, 清空颜色缓冲区 gl.clearColor(1.0, 1.0, 1.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); // 绘制 gl.drawArrays(gl.LINES, 0, 7); // gl.POINTS, gl.LINES, gl.LINE_STRIP, gl.LINE_LOOP, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES } function initVertexBuffer(gl, data, a_Position, a_PointSize, a_Color, size){ var vertexBuffer = gl.createBuffer(); if(!vertexBuffer){ console.log('Failed to create the buffer object.'); return ; } gl.bindBuffer( gl.ARRAY_BUFFER, vertexBuffer ); gl.bufferData( gl.ARRAY_BUFFER, data, gl.STATIC_DRAW ); // 位置数据 gl.vertexAttribPointer( a_Position, 2, gl.FLOAT, false, size * 7, 0); gl.enableVertexAttribArray( a_Position ); // 尺寸数据 gl.vertexAttribPointer( a_PointSize, 1, gl.FLOAT, false, size * 7, size * 2); gl.enableVertexAttribArray( a_PointSize ); // 颜色数据 gl.vertexAttribPointer( a_Color, 4, gl.FLOAT, false, size * 7, size * 3); gl.enableVertexAttribArray( a_Color ); }

画正方形

var verticsSize = new Float32Array([ -0.5, 0.5, 1.0, 0.0, 0.0, 1.0, -0.5, -0.5, 0.0, 1.0, 0.0, 1.0, 0.5, 0.5, 0.0, 0.0, 1.0, 1.0, 0.5, -0.5, 1.0, 0.0, 0.0, 1.0 ]); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

画三维图形

上面画的图都是在同一个平面上的,也即 z 都相同,把 z 改为不一样的,就有三维效果了。下图要用到投影

var verticesColors = new Float32Array([ 0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // green -0.5,-0.5, -0.4, 0.4, 1.0, 0.4, 0.5, -0.5, -0.4, 1.0, 0.4, 0.4, 0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // yellow -0.5, 0.4, -0.2, 1.0, 1.4, 0.4, 0.0, -0.6, -0.2, 1.0, 1.4, 0.4, 0.0, 0.5, 0.0, 0.4, 0.4, 1.0, // blue -0.5,-0.5, 0.0, 0.4, 0.4, 1.0, 0.5, -0.5, 0.0, 1.0, 0.4, 0.4 ]), gl.drawArrays(gl.TRIANGLES, 0, 9);

画立方体

请转到 gl.drawElements()