如何使用 WebGL drawElements 偏移量?

Sha*_*Cop 5 javascript webgl

这是一个相当 WebGL 的特定问题。我无法理解 drawElements 的 WebGL 特定实现。这是 API 规范。来自 WebGL 规范

我究竟如何使用偏移量?我可以使用偏移量来模仿更经典的 glDrawRangeElements 吗?

void drawElements(GLenum 模式、GLsizei 计数、GLenum 类型、GLintptr 偏移)(OpenGL ES 2.0 §2.8,手册页)

使用当前绑定的元素数组缓冲区进行绘制。给定的偏移量以字节为单位,并且必须是给定类型大小的有效倍数,否则将产生 INVALID_OPERATION 错误;请参阅缓冲区偏移和步幅要求。如果计数大于零,则必须将非空 WebGLBuffer 绑定到 ELEMENT_ARRAY_BUFFER 绑定点,否则将生成 INVALID_OPERATION 错误。

我有一个平面顶点数组和一个平面索引数组,使用一个 drawElements 调用进行绘制效果很好,但现在我想分别绘制顶点的一部分,因为它们是不同的对象。例如,索引[0]到索引[99]是一个对象(例如手臂),索引[100]到索引[149](例如腿)是另一个对象。这些组必须单独绘制 - 最终是因为它们具有不同的纹理,我将在每次 drawElements 调用之前绑定一个纹理(也许还有另一种方法可以完全做到这一点?)

因此,我想将索引 [0] 上的 drawElements 调用到索引 [99],并将索引 [100] 上的 drawElements 调用到索引 [149]。我可以用 drawElements 偏移量做到这一点吗?

使用我这里的代码,我可以很好地绘制第一组,但其他组没有出现。

for(var g = 0; g < groups.length; g++) {
    var group = groups[g];

    //Set the texture
    var material = group.material;
    material.bindTexture();

    //Draw it!
    var offset = group.offset; //index of the first element of the indices, (e.g. position '0' or position '100', from above)
    var num_items = group.num_items; //number of items in this group, (e.g. '100' elements or '50' elements, from above)
    gl.drawElements(draw_mode, num_items, indices.type, offset);
}
Run Code Online (Sandbox Code Playgroud)

Jua*_*ado 8

文档说:

...给定的偏移量以字节为单位,并且必须是给定类型大小的有效倍数 ...

如果indices.type是,gl.UNSIGNED_SHORT则每个索引使用 2 个字节。

尝试使用offset * 2而不仅仅是offset

gl.drawElements(draw_mode, num_items, indices.type, offset * 2);
Run Code Online (Sandbox Code Playgroud)