正确的方法来维护顶点缓冲区对象

我已经开始学习WebGL,目前我正在构建一个2D照明系统,但是我的脑海里还是有一些混乱。

照明如何工作是基于这个教程http://archive.gamedev.net/archive/reference/programming/features/2dsoftshadow/default.html (可能是最stream行的文章)。

我的问题是关于存储/创建/更新多边形的顶点缓冲区对象的正确方法。

目前我有这样的东西:

//-- during initialization of each polygon //build vertices from the provided points //[...] //create the VBO this._VBO = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, this._VBO ); gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW ); //-- during rendering of each polygon gl.bindBuffer( gl.ARRAY_BUFFER, this._VBO ); gl.enableVertexAttribArray( program.aVertexPosLoc ); gl.vertexAttribPointer( program.aVertexPosLoc, 3, gl.FLOAT, false, 0, 0 ); 

顶点数组只在文件的顶部创建一次,并为每个新的多边形重新使用,这样做的动机是避免为每个对象创建各种Float32Array。

 //top of file var vertices = new Float32Array( 20 * 3 ); //maximum of 20 points 

每个对象都有一个VBO可以吗? 我正在考虑一个单一的VBO的可能性,但我不明白如何才能使它只与一个工作。 顶点的数量可以在一个多边形和另一个多边形之间有所不同,所以我将如何存储?

目前我没有考虑纹理,但是,已经考虑到他们的答案是受欢迎的。

每个多边形的一个VBO,并在运行时更新它,你似乎正在做,将会执行可怕的。 用老派的客户端arrays甚至(如果你不使用ES)即时模式,你会更好。 VBOs只是没有devise好这种使用模式的良好性能。

如果数据是绝对静态的,那么把它们全部放到一个大的VBO中,使用你的glDrawArrays调用的参数来指定为每个多边形绘制的VBO的范围。 在这种情况下,VBO从不更新,是的,使用更多的内存 – 但内存不是一切。 对于性能而言,这是公平的权衡。

如果数据需要是dynamic的,那么看看stream缓冲区模式。 不幸的是ES2没有glMapBufferRange,所以你不能这样做。 或者把它们全部放到一个系统内存拷贝中,然后glBufferSubData它(你的渲染将在两个过程中 – 一个是构建数据,另一个是绘制它 – 确保你使用一个大的glBufferSubData调用来更新缓冲区,而不是很多小的)或返回到客户端arrays,并让驱动程序为您做stream媒体。