webgl 8.画一个正方形

前面我们说 webgl 只能画点、线、三角形 3 种基本图形，那么我想画一个球，画一个宇宙飞船怎么办呢？
图形学中复杂的物体都可以由无数个三角形所构成

triangles.png

所以我们要画一个正方形，其实可以由两个三角形组成。

rectangle coord.png

要画这个长方形，我们可以用 6 个顶点 (v0,v1,v2) (v2,v1,v3) 用 gl.drawArrays(gl.TRIANGLES, 0, 6) 来画 2 个三角形。

当然也可以只用 v0,v1,v2,v3 4 个顶点用 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4) 来画 2 个三角形。

 // vertex shader
var VERTEX_SHADER_SOURCE =
        'attribute vec4 a_Position;\n' +

        'void main() {\n' +
        '   gl_Position = a_Position;\n' +
        '}\n';

// fragment shader
var FRAGMENT_SHADER_SOURCE =
        'void main() {\n' +
        '   gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' +
        '}\n';

var canvas = document.getElementById("canvas");
var gl = canvas.getContext('webgl');

if (!initShaders(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)) {
    alert('Failed to init shaders');
}

var vertices = new Float32Array([
    -0.5, 0.5, // v0
    -0.5, -0.5, // v1
    0.5, 0.5, // v2
    0.5, -0.5 // v3
]);

initVertexBuffers(gl, vertices);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

rectangle.png

如果我把 v2 和 v3 的顺序换一下可以吗？

var vertices = new Float32Array([
    -0.5, 0.5, // v0
    -0.5, -0.5, // v1
    0.5, -0.5 // v3
    0.5, 0.5, // v2
]);

效果是这样的

ribbon.png

因为 gl.TRIANGLE_STRIP 对顶点的排列顺序是有要求的

构建当前三角形的顶点的连接顺序依赖于要和前面已经出现过的2个顶点组成三角形的当前顶点的序号的奇偶性（如果从0开始）：
如果当前顶点是奇数：
组成三角形的顶点排列顺序：T = [n-1 n-2 n]
如果当前顶点是偶数：
组成三角形的顶点排列顺序：T = [n-2 n-1 n]
(v0,v1,v3) 构成第一个三角形，(v2,v1,v3) 构成第二个三角形，叠加在一起构成了上面的效果。
具体请参考： http://blog.csdn.net/xiajun07061225/article/details/7455283

练习：

1. 用 6 个顶点画出这个正方形

查看源码