Javascript 调整WebGL VertexBuffer的大小以动态添加实例对象？

我希望我的WebGL2应用程序设置如下（使用PicoGL对WebGL调用进行抽象）：

现在，我想添加更多的框——因此我需要更新

offsetsAttr

和

texturesAttr

以获得更长的数组。但当我尝试更新属性时，屏幕上的对象数量保持不变——当新对象出现时，旧对象中的一个消失

我尝试了两件事：

• 使用

  gl.bufferData（…，gl.DYNAMIC_DRAW）

  更新顶点缓冲区（不是

  bufferSubData

  ，因为这显然无法扩展数组）
• 完全重新创建VertexBuffer并将其重新绑定到

  boxArray

---

他们都有同样的行为，所以我被难住了。是否可以实现这一点？

PicoGL当前在提供if a

VertexArray

时设置绘图计数。可以使用该方法显式设置绘图计数

这似乎不是一个WebGL问题。这似乎是一个皮卡问题。似乎您需要告诉picogl您增加了缓冲区大小，因此它需要使用更高的计数调用

gl.drawArrays

。这是不可能的。也许

drawCall.numInstances=newNumInstances

谢谢！我需要设置drawCall.numInstances——我完全忘了这么做。如果你回答这个问题，我会接受的。

...

let positions = app.createVertexBuffer(PicoGL.FLOAT, 3, box.positions);
let uv = app.createVertexBuffer(PicoGL.FLOAT, 2, box.uvs);
const sides = app.createVertexBuffer(PicoGL.INT, 1, new Int32Array([
    0, 0, 0, 0, 0, 0, // front:  0,  0,  1
    1, 1, 1, 1, 1, 1, // right:  1,  0,  0
    2, 2, 2, 2, 2, 2, //  back:  0,  0, -1
    3, 3, 3, 3, 3, 3, //  left: -1,  0,  0
    4, 4, 4, 4, 4, 4, //   top:  0,  1,  0
    5, 5, 5, 5, 5, 5, //  bttm:  0, -1,  0
]));

let boxArray = app.createVertexArray()
        .vertexAttributeBuffer(0, positions)
        .vertexAttributeBuffer(1, uv)
        .vertexAttributeBuffer(2, sides)
        .instanceAttributeBuffer(3, offsetsAttr)
        .instanceAttributeBuffer(4, texturesAttr);

const drawCall = app.createDrawCall(program, boxArray);

...

const draw = () => {
    app.clear();
    drawCall.draw();
    requestAnimationFrame(draw);
};

requestAnimationFrame(draw);