HarmonyOS鸿蒙Next中WebGL如何使用缓冲区对象分配数据给顶点属性

WebGL如何使用缓冲区对象分配数据给顶点属性

在WebGL中，使用缓冲区对象来存储和传输顶点数据是非常常见的。

初始化顶点数据步骤

1、创建缓冲区对象

使用WebGL的createBuffer()方法创建一个缓冲区对象。

const vertexTexCoordBuffer = gl.createBuffer();

2、绑定缓冲区对象

使用WebGL的bindBuffer()方法将缓冲区对象绑定到目标上。

gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);

3、将顶点数据写入缓冲区对象

使用WebGL的bufferData ()方法写入缓冲区对象。

gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);

4、将缓冲区对象分配给顶点属性

使用WebGL的vertexAttribPointer()方法分配给顶点属性。

const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);
gl.enableVertexAttribArray(a_Position);

总结

相关WebGL API详情见：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

以下便是完整的WEBGL使用缓冲区对象分配顶点数据方案：

const initVertexBuffers = (gl) => {

    // 映射顶点坐标系（webgl坐标系）和图片的纹理坐标系
    const verticesTexCoords = new Float32Array([
        -1.0, 1.0, 0.0, 1.0,
        -1.0, -1.0, 0.0, 0.0,
        1.0, 1.0, 1.0, 1.0,
        1.0, -1.0, 1.0, 0.0,
    ]);

    // 图片有4个顶点
    const n = 4;
    // 创建缓冲区对象
    const vertexTexCoordBuffer = gl.createBuffer();

    if (!vertexTexCoordBuffer) {
        console.log('Failed to create the buffer object');
        return -1;
    }

    // 将缓冲区对象绑定到目标
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
    // 将顶点数据写入缓冲区对象
    gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);
    // 缓冲区数据里单位大小
    const FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;
    // 获取顶点属性a_Position的索引地址
    const 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;
    }

    // 设置顶点属性如何从顶点缓冲区对象中取值。每次从数组缓冲对象中读取2个值，步进大小为4，起点偏移量为0
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);
    // 激活使用
    gl.enableVertexAttribArray(a_Position);
    // 获取顶点属性a_TexCoord的索引地址
    const a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');

    if (a_TexCoord < 0) {
        console.log('Failed to get the storage location of a_TexCoord');
        return -1;
    }

    // 设置顶点属性如何从顶点缓冲区对象中取值。每次从数组缓冲对象中读取2个值，步进大小为4，起点偏移量为2
    gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
    gl.enableVertexAttribArray(a_TexCoord);
    return n;
}