I've started learning WebGL, currently I'm building a 2D lighting system, but there is some confusion going on inside my head.
How the lighting works is based on this tutorial http://archive.gamedev.net/archive/reference/programming/features/2dsoftshadow/default.html (probably the most linked article of the genre).
My question is about the proper way to store/create/update the Vertex Buffer Objects of the polygons.
Currently I have something like:
//-- 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 );
The vertices array is created only one time at the top of the file, and reused for each new polygon, the motive to do that is to avoid the creation of various Float32Arrays per object.
//top of file var vertices = new Float32Array( 20 * 3 ); //maximum of 20 points
It's okay to have one VBO for each object? I was thinking about the possibility of a single VBO, but I don't understand how I can make it work with only one. The number of vertices can vary between one polygon and another, so how I'm going to store that?
Currently I'm not taking into consideration textures, however, answers that already take they into account are welcome.