5

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;

誰かが助けてくれれば、なぜ画面に描画されないのかわかりません。

4

1 に答える 1

3

問題は次の行です。

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

new Float32Array(vertices)返品中[NaN, NaN, NaN]です。これは、コンストラクターがs の配列ではなく s のFloat32Array配列を想定しているためです。NumberVector

s のnew Float32Array()単一の一次元配列を渡す必要がありますNumber

それを修正したい場合は、Vectors の配列を に変換する関数を作成する必要があります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;
于 2012-11-30T22:44:44.007 に答える