javascript – Webgl矢量数组

2023年4月11日 184次阅读

我正在尝试使用
JavaScript和Webgl制作一个三角形的立方体.立方体将使用数组使用面边缘顶点结构,但是当我使用数组时,屏幕上没有任何内容.

这是我如何声明数组.

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;

我不知道为什么它不吸引屏幕,如果有人可以帮助它将不胜感激.

最佳答案 问题是以下几行：

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

新的Float32Array(顶点)返回[NaN,NaN,NaN].这是因为Float32Array构造函数需要一个Numbers数组而不是一个Vector数组.

您需要将新的Float32Array()传递给一个一维的Numbers数组

如果你想修复它,你必须编写一个函数将你的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;
点赞