Webgl矢量陣列

Question

我正在嘗試使用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; 

我不確定爲什麼它不畫屏幕，如果任何人都可以幫助它，將不勝感激。

Answer 1

的問題是以下行：

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

new Float32Array(vertices)正在返回[NaN, NaN, NaN]。這是因爲Float32Array構造器期望一組Number s而不是一組Vector s。

你需要通過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;