WebGL:将相同的数据加载到两个属性中

// 假设我们有一个包含位置和法线的顶点数组
var vertices = [
    // 位置              // 法线
    -1.0, -1.0, 0.0,     0.0, 0.0, 1.0,
     1.0, -1.0, 0.0,     0.0, 0.0, 1.0,
     0.0,  1.0, 0.0,     0.0, 0.0, 1.0
];

// 创建两个缓冲区
var positionBuffer = gl.createBuffer();
var normalBuffer = gl.createBuffer();

// 绑定并填充位置缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices.slice(0, 9)), gl.STATIC_DRAW);

// 绑定并填充法线缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices.slice(9, 18)), gl.STATIC_DRAW);

// 在顶点着色器中引用这两个缓冲区
var vertexShaderSource = `
    attribute vec3 a_position;
    attribute vec3 a_normal;

    void main() {
        gl_Position = vec4(a_position, 1.0);
        // 使用a_normal进行其他计算...
    }
`;

// 编译着色器、链接程序等常规WebGL设置...

// 获取属性位置
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
var normalAttributeLocation = gl.getAttribLocation(program, "a_normal");

// 启用属性
gl.enableVertexAttribArray(positionAttributeLocation);
gl.enableVertexAttribArray(normalAttributeLocation);

// 绑定并指定数据格式
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
gl.vertexAttribPointer(normalAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 渲染循环...