webgl 6.画3个不同颜色的点

上节我们画了 3 个红色的点，点的颜色是写死在 fragment shader 中。这节我们来画 3 个不同颜色的点。

three colored points.png

首先现在除了顶点的坐标之外还要把每个顶点的颜色传到 shader 中。前面说过有 2 种方法，一是可以定义 2 个数组，2 个 buffer object 分别来传递坐标和颜色，二是可以把每个顶点的坐标和颜色都放在 1 个数组中用 1 个 buffer object 传过去然后再分开解析。两种方法各有利弊，首先分开传肯定没有一块传效率高，而一块传的弊端是当你只想更新颜色而坐标不变时也必须更新整个数组，这个要看具体情况。用 2 个 buffer object 分开传的情况留给大家自己练习，我们来看看一块传的情况。

// 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';

• attribute vec4 a_Color

增加了一个 attribute 变量 a_Color 来接收颜色

但颜色是在 fragment shader 中计算的，怎么把 vertex shader 中的颜色传递到 fragment shader 中呢？ 这就要用到 varying 变量， 当同一个 varying 变量 （类型和名字都一样）同时定义在 vertex shader 和 fragment shader 中时， varying 变量的值会自动从 vertex shader 中传递到 fragment shader 中。

• varying vec4 v_Color;
  v_Color = a_Color;

我们定义了 v_Color 这个 varying 变量，并赋值为 a_Color

来个直观的图，大家感受一下

varyingvariable.png

attribute 和 varying 变量都必须定位为全局变量， main 是入口函数。

• precision mediump float

这是什么意思呢？ precision 是精度修饰符，mediump (medium precision) 中等精度， 意思是 fragment shader 中所有的 float 都用中等精度表示。
fragment shader 中默认没有为 float 指定精度，必须手动指定，主要是为了在有些情况下必须使用 highp (高精度) 或用 lowp (低精度) 来提高性能。
vertex shader 中数据默认都是 highp 的，因为这适用于大多数情况。

现在顶点中要增加颜色信息

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
]);

每个顶点前 2 位表示位置，后 3 位表示颜色

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

// 每个元素的字节数, 这里是  float 类型, 所以是 4 个字节
var BYTES_PER_ELEMENT = vertices.BYTES_PER_ELEMENT;

// 属性变量和数据关联起来并指定解析方法
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 5 * BYTES_PER_ELEMENT, 0);
// enable the assignment to attribute variable
gl.enableVertexAttribArray(a_Position);

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

• vertices.BYTES_PER_ELEMEN

得到每个元素的字节数， float 类型是 4 个字节

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

a_Position 我们传了 2 个值， 元素类型是 float
倒数第二个参数表示各个坐标之间间隔的字节数，每个顶点的坐标之间间隔 5 * 4 = 20 个字节
最后一个参数表示第一个顶点坐标的起始位置，这里是 0

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

a_Color 我们传了 3 个值， 元素类型是 float
倒数第二个参数表示各个颜色之间间隔的字节数，每个顶点的颜色之间间隔 5 * 4 = 20 个字节
最后一个参数表示第一个顶点颜色的起始位置，这里是 2 * 4 = 8 个字节

顶点中除了位置、颜色还可以携带 norm (法向量)、texture coord （纹理坐标) 等，一般都是一块传过去后再分开解析。

最后 draw 不变还是画 3 个顶点

gl.drawArrays(gl.POINTS, 0, 3);

练习：

1. 用 2 个 buffer object 分别传递位置和颜色

查看源码