webgl如何繪制多個立方體

Question

我正在嘗試使用webGL繪制5161個多維數據集。 問題不是所有立方體都被繪制出來。 經過一些搜索，我認為它是因為我在一次VBO調用中傳遞了太多頂點。 你可以在這里看看jsfiddle： http ： //jsfiddle.net/n5fjhe21/ 。 您可以使用QWERASDF和箭頭鍵移動，但它現在還沒有很好地實現。

我的繪制調用過去看起來像這樣：

function render(){
    gl.uniformMatrix4fv(u_matrixLoc, false, new Float32Array(pMatrix));
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, data.triangles.length, gl.UNSIGNED_SHORT, 0);
}

所以我會做一次data.pushData（）並根據需要進行渲染; 它很快。 glObject是一個Cubes數組。

data.pushData = function(){
// pushData once then call drawElements on every render call doesnt work as I hit some kind of limit;
// not all cubes are drawn; I think the draw calls must be split up;
data.vertices = [];
data.uv = [];
data.triangles = [];
var vertexOffset = 0;

glObjects.forEach(function pushingObject(o){
    data.vertices.push.apply(data.vertices,o.vertices);
    data.uv.push.apply(data.uv,o.uv);
    o.triangles.forEach(function pushingTriangles(index){
        data.triangles.push(index+vertexOffset);
    });

    vertexOffset += o.vertices.length/3; // change to component length later
});

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data.vertices),gl.DYNAMIC_DRAW );
    gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data.uv),gl.STATIC_DRAW);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(data.triangles), gl.DYNAMIC_DRAW );
};

但問題（我認為）是我一次傳遞太多頂點。 所以我嘗試合並pushData並一起渲染：

data.render = function(){
    data.vertices = [];
    data.uv = [];
    data.triangles = [];
    var vertexOffset = 0;

    glObjects.forEach(function pushingObject(o){
        if (vertexOffset + o.vertices.length > 65536){
            vertexOffset = 0;
            glDraw();
            data.vertices.length = 0;
            data.uv.length = 0;
            data.triangles.length = 0;
        }

        data.vertices.push.apply(data.vertices,o.vertices);
        data.uv.push.apply(data.uv,o.uv);
        o.triangles.forEach(function pushingTriangles(index){
            data.triangles.push(index+vertexOffset);
        });

        vertexOffset += o.vertices.length/3; // change to component length later
    });

    glDraw();

    function glDraw(){
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data.vertices),gl.STATIC_DRAW);
        gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data.uv),gl.STATIC_DRAW);
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(data.triangles), gl.STATIC_DRAW);
        gl.drawElements(gl.TRIANGLES, data.triangles.length, gl.UNSIGNED_SHORT, 0);
    }
};

但這還不夠快，因為據我所知，傳入新的bufferData很慢。 所以我的問題是，在這種情況下做了什么？ 我無法找到任何處理此問題的webgl資源。 我的感覺傾向於創建多個VBO對象，但我想確保我首先朝着正確的方向前進。 作為一個后續問題，假設如果需要繪制多個具有唯一位置（x，y，z）和方向（rX，rY，rZ）的立方體，那么如何實現它呢？ 提前致謝。

Answer 1

好的，我解決了我的問題，我會留在這里為落后者：

基本上，我有正確的想法，因為我需要使用多個繪制調用，因為每個索引繪制（drawElements）只能引用VBO中的2 ^ 16個元素。 我的第一個實現中的缺陷是我實際上嘗試在每個渲染調用中重建由多個立方體頂點組成的新的大型類型。 不用說，這很慢。 所以不是那樣，我真的應該只創建一次typedArray / buffer。 為了克服2 ^ 16元素引用限制，我所要做的就是將一個bigass typedArray分成可管理的大小，這正是這個新版本的pushData所做的：

data.pushData = function(){
    // ensure each vertex attribute has less than 2^16 vertices because that is how many that be be referenced each time
    // with gl.drawElements call

    function newChunk(){
        return {
            vertices: [],
            uv: [],
            triangles: []
        }
    }
    var chunk = newChunk();

    var vertexOffset = 0;

    glObjects.forEach(function pushingVerts(o){
        if (vertexOffset + o.vertices.length > 65536){
            vertexOffset = 0;
            data.chunks.push(chunk);
            chunk = newChunk();
        }

        chunk.vertices.push.apply(chunk.vertices,o.vertices);
        chunk.uv.push.apply(chunk.uv,o.uv);
        o.triangles.forEach(function pushingTriangles(index){
            chunk.triangles.push(index+vertexOffset);
        });

        vertexOffset += o.vertices.length/3; // change to component length later
    });

    data.chunks.push(chunk);

    data.chunks.forEach(function toTypeArray(c){
        c.vertices = new Float32Array(c.vertices);
        c.uv = new Float32Array(c.uv);
        c.triangles = new Uint16Array(c.triangles);
    });

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, sizeofFloat * 65536*3,gl.DYNAMIC_DRAW);
    gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, sizeofFloat * 65536*2,gl.DYNAMIC_DRAW);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sizeofFloat * 65536, gl.DYNAMIC_DRAW);
    // for some reason only allocating sizeofUnsignedShort * 65536 is not enough.

    return data.chunks;
}; 

然后簡單地渲染它：

data.renderChunks = function(){

    data.chunks.forEach(function renderChunk(c){
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferSubData(gl.ARRAY_BUFFER,  0, c.vertices);
        gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
        gl.bufferSubData(gl.ARRAY_BUFFER,  0, c.uv);
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleBuffer);
        gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, c.triangles);
        gl.drawElements(gl.TRIANGLES, c.triangles.length, gl.UNSIGNED_SHORT, 0);
    });
};

此外，我從使用gl.bufferData更改為gl.bufferSubData，以避免構造新緩沖區的開銷。

有了這個，我現在可以畫出60,000個立方體（至少）： http ： //jsfiddle.net/n5fjhe21/1/