这是一个相当具体的WebGL问题.我在理解特定于WebGL的drawElements实现时遇到麻烦.这是API规范. From the WebGL specification.

我如何精确地使用偏移量？我可以使用偏移量来模仿更经典的glDrawRangeElements吗？

void drawElements(GLenum mode, GLsizei count, GLenum type, GLintptr offset)
(OpenGL ES 2.0 §2.8, man page)

Draw using the currently bound element array buffer. The given offset is in bytes, and must be a valid multiple of the size of the given type or an INVALID_OPERATION error will be generated; see Buffer Offset and Stride Requirements. If count is greater than zero, then a non-null WebGLBuffer must be bound to the ELEMENT_ARRAY_BUFFER binding point or an INVALID_OPERATION error will be generated.

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

因此,我想在index [0]到index [99]上调用drawElements,在index [100]到index [149]上调用drawElements.我可以使用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);
}

解决方法:

文档说：

… The given offset is in bytes, and must be a valid multiple of the size
of the given type …

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

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

gl.drawElements(draw_mode, num_items, indices.type, offset * 2);