使用WebGL索引缓冲区绘制网格物体

Question

3 index buffers问一个更难的问题，但我觉得他们的主要问题归结为我的：有没有办法使用索引缓冲区在WebGL中多次访问同一个顶点而不是复制顶点？ 我能找到的只是使用索引缓冲区将纹理，法线等与模型中的顶点相关联。我无法找到一种方法来使用索引缓冲区来告诉drawArrays访问位置数组中顶点的顺序。

Answer 1

是的，使用gl.drawElements并将带顶点索引的缓冲区上传到gl.ELEMENT_ARRAY_BUFFER。

... upload vertex data to buffers, vertexAttribPointer them.

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indicesData, gl.STATIC_DRAW);
gl.drawElements(gl.TRIANGLES, indicesData.length/3, gl.UNSIGNED_SHORT, 0);

有关完整示例，请参阅https://developer.mozilla.org/en/WebGL/Creating_3D_objects_using_WebGL。

Answer 2

使用索引时，只需将索引加倍即可。但是，这对我来说没有意义，因为在相同的全局状态下多次处理相同的顶点数据，结果对于每个重复都是相同的。

我怀疑你真正想做的是在不同制服的相同顶点数据上进行多次绘制调用。

1. 在启动时创建顶点数据/索引（如果需要）
2. 每个帧，设置全局状态A，调用DrawElements / Array，设置状态B，调用DrawElements / Array
3. 不时更改顶点数据（例如，如果对象正在移动）..

只要您不更改顶点数据，只需轻微上传到gpu（需要低带宽）。