javascript - Webgl 向量数组

Question

我正在尝试使用 JavaScript 和 Webgl 制作三 Angular 形立方体。立方体将使用数组使用面边顶点结构，但是当我使用数组时，屏幕上没有任何内容。 这是我声明数组的方式。

function Vector(x,y,z){
this.x = x; 
this.y = y;
this.z = z;
}

var V = new Array;
V[0] = new Vector(0.0,  1.0,  0.0);
V[1] = new Vector(-1.0, -1.0,  0.0);
V[2] = new Vector(1.0, -1.0,  0.0);


function initBuffers() {
    triangleVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
    var vertices = [
        V[0],
        V[1],
        V[2]
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    triangleVertexPositionBuffer.itemSize = 1;
    triangleVertexPositionBuffer.numItems = 3;

我不确定为什么它不绘制到屏幕上，如果有人可以提供帮助，我们将不胜感激。

Answer 1

问题出在下面一行:

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

new Float32Array(vertices) 正在返回 [NaN, NaN, NaN]。这是因为 Float32Array 构造函数需要一个 Number 数组，而不是一个 Vector 数组。

您需要向 new Float32Array() 传递一个 Number 的一维数组

如果您想修复它，您必须编写一个函数将您的 Vector 数组转换为 Float32Array。像这样:

function vectorsToFloatArray(vertices) {
    var numbers = [];

    for(var i = 0; i < vertices.length; i++) {
        numbers.push(vertices[i].x);
        numbers.push(vertices[i].y);
        numbers.push(vertices[i].z);
    }

    return new Float32Array(numbers);
}

并记得更新 gl.bufferData() 和项目大小:

    gl.bufferData(gl.ARRAY_BUFFER, vectorsToFloatArray(vertices), gl.STATIC_DRAW);
    triangleVertexPositionBuffer.itemSize = 3;