The game scene contains a lot of 10x10 pixel elements: for 1980x1200 px. screen the number of elements on the scene can vary from 0 to 23760 (elements cannot intersect).
The live example: http://fintank.ru/game/
The entire game space comprised of tiles: each tile is responsible for some area and keeps elements for that area (similar to google maps).
Each tile exist as 2 entities:
S is a set of elements in the tile,
G is rendered image of a tile. When the server put/remove elements to the tile, we change
S and then re-render the
To draw a frame (at 20 fps) I just put the
G of each visible tile using the
putImageData(). That is done without WebGL.
What is the most CPU effective approach to implement such many-elements management using WebGL? Should I render each tile to a texture or each element may be implemented as a separate textured rectangle? The main concern is that each tile may be updated 30-60 times a second (elements adding/removal).
How to avoid memory leaks (how to reuse buffers?) if we make many new textures every second?
What is the most effective way to manipulate pixels during rendering a 100x100 tile?
How to avoid re-uploading the unchanged textures to graphic card?