javascript - 我如何使用 WebGL drawElements 偏移量？

Question

这是一个相当特定于 WebGL 的问题。我无法理解 drawElements 的特定于 WebGL 的实现。这是 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 调用进行绘图效果很好，但现在我想分别绘制部分顶点，因为它们是不同的对象。例如，indices[0] 到 indices[99] 是一个对象(例如 ARM )，indices[100] 到 indices[149](例如腿)是另一个对象。这些组必须单独绘制 - 最终是因为它们具有不同的纹理，我将在每次调用 drawElements 之前绑定(bind)一个纹理(也许还有另一种方法可以完全做到这一点？)

因此，我想在 indices[0] 到 indices[99] 上调用 drawElements，在 indices[100] 上调用 drawElements 到 indices[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);
}

Answer 1

文档说:

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

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

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

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