【WebGL之巅】15-颜色与纹理-将非坐标数据传入顶点着色器

对应《WebGL编程指南》代码：16-MultiAttributeSize、17-MultiAttributeSize_Interleaved

要点：绘制三个不同size的点、交错组织

知识点

一、回顾—将顶点坐标传入着色器步骤

1.创建缓冲区对象

2.将缓冲区对象绑定到target上

3.向缓存对象写入数据

4.将缓冲区对象分配给a_Postion变量(attribute变量)

5.连接a_Postion变量与分配给它的缓冲区对象(开启attribute变量)

二、交错组织

一般思维，通过创建多个缓冲区对象，可以实现传入顶点不同数据，但是当顶点数量庞大起来时，代码冗余增大。

WebGL允许我们把顶点坐标和尺寸数据打包到同一个缓冲区对象中，并通过某种机制分别访问缓冲区对象中不同种类的数据。比如，可以将顶点的坐标和尺寸数据按照如下方式交错组织：

var verticesSizes = new Float32Array(
    [0.0, 0.5, 10.0,
     -0.5, -0.5, 10.0,
     0.5, -0.5, 30.0]
);

可见，一旦将几种顶点数据交叉存储在一个数组中，WebGL就需要有差别的从缓冲区对象中获取某种特定的数据，即使用gl.vertexAttribPointer函数的第5个参数stride和第6个参数offset。

三、步进参数

gl.vertexAttribPointer(location, size, type, normalized, stride, offset);

1.将缓冲区对象分配给a_Postion变量

...
var FSIZE = verticesSizes.BYTES_PER_ELEMENT;
...
//将缓冲区对象分配给a_Postion变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*3, 0);

参数stride表示：在缓冲区对象中，单个顶点的所有数据（坐标和大小）的字节数，也就是相邻两个顶点间的距离，即步进参数。之前的缓冲区只含有一种数据即坐标，将其设置为0即可。

stride和offset如图：

如图所示，每个顶点有3个数据值（两个坐标一个尺寸数据），因此stride应该设置为每项数据大小的三倍，即3 x FSIZE（Float32Array中每个元素所占的字节数）。

参数offset表示当前考虑的数据项距离首个元素的距离，即偏移参数。在verticesSizes数组中，顶点的坐标数据是放在最前面的，所有offset为0。

2.将缓冲区对象分配给a_Postion变量

接下来对顶点尺寸数据采取同样操作：将缓冲区对象分配给a_PointSize变量。缓冲区对象还是原来的那一个，改变的是关注的数据不同，需要将offset参数设置为顶点尺寸数据在缓冲区对象中的初始位置。由前面可以知道，前两个数据是顶点坐标，后一个是顶点尺寸，因此offset设置为FSIZE * 2

var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');

gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE*3, FSIZE*2);
gl.enableVertexAttribArray(a_PointSize);

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotate triangle</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
    Please use the browser supporting "canvas".
</canvas>

<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="../lib/cuon-matrix.js"></script>
<script src="MultiAttributeSize.js"></script>
</body>
</html>

方法一、创建多个缓冲区对象

//MultiAttributeSize.js
var VSHADER_SOURCE =
    'attribute vec4 a_Position;\n' +
    'attribute float a_PointSize;\n' +
    'void main() {\n' +
        'gl_Position = a_Position;\n' +
        'gl_PointSize = a_PointSize;\n' +
    '}\n';

var FSHADER_SOURCE=
    'void main(){'+
        'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);'+
    '}';

function main() {

    var canvas = document.getElementById("webgl");
    if (!canvas) {
        console.log("Failed to retrieve the <canvas> element");
        return;
    }

    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.log("Failed to get the rendering context for WebGL");
        return;
    }

    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log("Failed to initialize shaders.");
        return;
    }

    //设置顶点位置
    var n = initVertexBuffers(gl);
    if (n < 0) {
        console.log('Failed to set the positions of the vertices');
        return;
    }

    //指定清空<canvas>颜色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //清空<canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.drawArrays(gl.POINTS, 0, n);
}

function initVertexBuffers(gl) {
    var vertices = new Float32Array(
        [0.0, 0.5, -0.5, -0.5, 0.5, -0.5]
    );
    var n=3; //点的个数

    var sizes = new Float32Array(
        [10.0, 20.0, 30.0]
    );

    //创建多个缓冲区对象
    var vertexBuffer = gl.createBuffer();
    var sizeBuffer = gl.createBuffer();
    //将缓冲区对象保存到目标上
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    //向缓存对象写入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    //将缓冲区对象分配给a_Postion变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
    //连接a_Postion变量与分配给它的缓冲区对象
    gl.enableVertexAttribArray(a_Position);

    gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, sizes, gl.STATIC_DRAW);
    var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
    gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(a_PointSize);

    return n;
}

方法二、使用交错组织配合gl.vertexAttribPointer的步进和偏移量

/**
 * Created by hushhw on 17/12/14.
 */
//MultiAttributeSize.js
var VSHADER_SOURCE =
    'attribute vec4 a_Position;\n' +
    'attribute float a_PointSize;\n' +
    'void main() {\n' +
    'gl_Position = a_Position;\n' +
    'gl_PointSize = a_PointSize;\n' +
    '}\n';

var FSHADER_SOURCE=
    'void main(){'+
    'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);'+
    '}';

function main() {

    var canvas = document.getElementById("webgl");
    if (!canvas) {
        console.log("Failed to retrieve the <canvas> element");
        return;
    }

    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.log("Failed to get the rendering context for WebGL");
        return;
    }

    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log("Failed to initialize shaders.");
        return;
    }

    //设置顶点位置
    var n = initVertexBuffers(gl);
    if (n < 0) {
        console.log('Failed to set the positions of the vertices');
        return;
    }

    //指定清空<canvas>颜色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //清空<canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.drawArrays(gl.POINTS, 0, n);
}

function initVertexBuffers(gl) {
    var verticesSizes = new Float32Array(
        [0.0, 0.5, 10.0,
        -0.5, -0.5, 20.0,
        0.5, -0.5, 30.0]
    );
    var n=3; //点的个数


    //创建缓冲区对象
    var vertexSizeBuffer = gl.createBuffer();
    if(!vertexSizeBuffer){
        console.log("Failed to create thie buffer object");
        return -1;
    }
    //将缓冲区对象保存到目标上
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexSizeBuffer);

    //向缓存对象写入数据
    gl.bufferData(gl.ARRAY_BUFFER, verticesSizes, gl.STATIC_DRAW);

    var FSIZE = verticesSizes.BYTES_PER_ELEMENT;

    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    if(a_Position < 0){
        console.log("Failed to get the storage location of a_Position");
        return -1;
    }
    //将缓冲区对象分配给a_Postion变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*3, 0);
    //连接a_Postion变量与分配给它的缓冲区对象
    gl.enableVertexAttribArray(a_Position);

    var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
    if(a_Position < 0){
        console.log("Failed to get the storage location of a_Position");
        return -1;
    }

    gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE*3, FSIZE*2);
    gl.enableVertexAttribArray(a_PointSize);

    return n;
}

效果

Tips: Please indicate the source and original author when reprinting or quoting this article.

知识点

一、回顾—将顶点坐标传入着色器步骤

二、交错组织

三、步进参数

实例

方法一、创建多个缓冲区对象

方法二、使用交错组织配合gl.vertexAttribPointer的步进和偏移量

效果

特色标签

链友