Fatal编程技术网
  • javascript/
  • Javascript 使用WebGL索引缓冲区绘制网格

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

javascript opengl-es webgl

Javascript 使用WebGL索引缓冲区绘制网格,javascript,opengl-es,webgl,Javascript,Opengl Es,Webgl,问了一个更难的问题，但我觉得他们的主要问题可以归结为我的问题：有没有一种方法可以使用索引缓冲区在WebGL中多次访问同一个顶点，而不是复制顶点？ 我所能找到的就是使用索引缓冲区将纹理、法线等与模型中的顶点相关联。我无法找到使用索引缓冲区来告诉DrawArray访问位置数组中顶点的顺序的方法。是的，使用gl.drawerElements并将带有顶点索引的缓冲区上载到gl.ELEMENT\u数组\u缓冲区 ... upload vertex data to buffers, vertexAttrib

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

是的，使用gl.drawerElements并将带有顶点索引的缓冲区上载到gl.ELEMENT\u数组\u缓冲区

... 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);
有关完整示例，请参阅。

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

我猜想您真正想做的是对具有不同制服的相同顶点数据进行多个绘制调用

  • 在启动时创建顶点数据/索引（如果需要）
  • 每个帧，设置全局状态A，调用抽屉元素/数组，设置状态B，调用抽屉元素/数组
  • 不时更改顶点数据（例如，如果对象正在移动） 只要不更改顶点数据，就只需少量上传到gpu（需要低带宽）