如何使用 WebGL drawElements offset

How do I use WebGL drawElements offset?

本文关键字：offset drawElements WebGL 何使用      更新时间：2023-09-26

这是一个相当WebGL特定的问题。我很难理解 drawElements 的特定于 WebGL 的实现。下面是 API 规范。来自 WebGL 规范。

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

void drawElements（GLenum mode， GLsizei count， GLenum type， GLintptr offset） （OpenGL ES 2.0 §2.8，手册页）

使用当前绑定的元素数组缓冲区进行绘制。给定的偏移量以字节为单位，并且必须是给定类型大小的有效倍数，否则将生成INVALID_OPERATION错误;请参阅缓冲区偏移和步幅要求。如果 count 大于零，则必须将非空 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);
}

文档 说：

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

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

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

gl.drawElements(draw_mode, num_items, indices.type, offset * 2);
相关文章：