webgl 7.画三角形

一直画点没什么意思，我们来画个三角形，上一节我们画了 3 个不同颜色的点，其实只要改一个地方就能画一个三角形。

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

        'void main() {\n' +
        '   gl_Position = a_Position;\n' +
        '   gl_PointSize = 10.0;\n' +
        '   v_Color = a_Color;\n' +
        '}\n';

// fragment shader
var FRAGMENT_SHADER_SOURCE =
        'precision mediump float;\n' +
        'varying vec4 v_Color;\n' +

        'void main() {\n' +
        '   gl_FragColor = v_Color;\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.0, 0.5, 1.0, 0.0, 0.0, // (x,y) (r,g,b)
    -0.5, -0.5, 0.0, 1.0, 0.0,
    0.5, -0.5, 0.0, 0.0, 1.0
]);

initVertexBuffers(gl, vertices);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

function initVertexBuffers(gl, vertices) {
    var vertexBuffer = gl.createBuffer();
    if (!vertexBuffer) {
        console.log('Failed to create buffer object');
        return -1;
    }

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    var a_Color = gl.getAttribLocation(gl.program, 'a_Color');

    var BYTES_PER_ELEMENT = vertices.BYTES_PER_ELEMENT;

    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 5 * BYTES_PER_ELEMENT, 0);
    gl.enableVertexAttribArray(a_Position);

    gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 5 * BYTES_PER_ELEMENT, 2 * BYTES_PER_ELEMENT);
    gl.enableVertexAttribArray(a_Color);
}

• gl.drawArrays(gl.TRIANGLES, 0, 3);

第一个参数改成了 gl.TRIANGLES

效果是下面这样的

draw triangles.png

等等，我们只给了 3 个顶点，3个颜色，中间的颜色哪来的？

其实 GPU 管线中在 vertex shader 和 fragment shader 之间还有两个过程我们没有讲，分别是 Shape Assembly (图形收集) 和 Rasterization (光栅化)。

rasterization.png

看上图， Shape Assembly 就是根据传入的顶点和绘制命令来组成几何图形，我们传入了 gl.TRIANGLES 和 3个顶点所以形成了一个三角形。之后会执行光栅化把三角形分成一个一个小的 fragment, 而在光栅化执行时 v_Color 根据光栅化的结果进行了线性插值（Interpolation）操作，我们只传了 3 个颜色，但在 3 个颜色之间进行了插值。所以在执行 fragment shader 时 v_Color 就是插值之后的值，每个 fragment 都有了不同的颜色。

那么 webgl 除了点和三角形还能画哪些图形呢？只能画下面图中的基本图形

shapes.png

• gl.POINTS

没什么说的

• gl.LINES

(v0,v1) (v2,v3) 两两组成线，若点的个数为奇数，最后一个点会被忽略

• gl.LINE_STRIP

gl.LINES 的基础上再把每两条线中间都连起来

• gl.LINE_LOOP

gl.LINE_STRIP 的基础上再把最后一个顶点和第一个顶点连起来

• gl.TRIANGLES

顶点个数不是 3 的倍数时，剩下的顶点会被忽略

• gl.TRIANGLE_STRIP

(V0,V1,V2) (V2,V1,V3) (V2,V3,V4) 顶点的排列有规则，排列规则可参考其它资料 http://blog.csdn.net/xiajun07061225/article/details/7455283
下节我们画正方形时再看一下

• gl.TRIANGLE_FAN

以第一个顶点为中心成扇形

思考：

1. 这里我们顶点的顺序都是按逆时针顺序排列的，其实你改成顺时针在这里也没有什么影响。逆时针还是顺时针排列顶点影响的是一个面的法向量的方向。

查看源码