如何使用WebGL drawElements偏移量?

时间:2012-04-19 04:28:29

标签: javascript webgl

这是一个特定于WebGL的问题。我无法理解drawElements的WebGL特定实现。这是API规范。 From the WebGL specification

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

  

void drawElements (GLenum模式,GLsizei计数,GLenum类型,GLintptr偏移量)   (OpenGL ES2.0§2.8,手册页)

     

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

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

因此,我想将index [0]上的drawElements称为索引[99],将indexE [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);
}

1 个答案:

答案 0 :(得分:4)

文档说:

  

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

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

尝试使用offset * 2而非offset

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