Mechanism for batching of WebGL draw calls

[davidedc]

We currently have one WebGL draw call for each primitive we have on screen (two if we have both the fill and the stroke).

Performance would probably be much better by having fewer WebGL draw calls, which can done by packaging the information in a clever way. For example a thousand cubes can be batched by sending, together with the vertex data, also the world matrix info for each cube, the color and the transparency of each cube. The shader would then do everything on a batch of cubes instead than for each cube. The principle is explained here: http://youtu.be/rfQ8rKGTVlg?t=14m44s : the shader (and its invocation) are crafted so to take a bunch of cubes, each with their world matrix and their per-cube information. So the shader processes all the cubes at once, with dramatic performance improvement.

Reading this thread mrdoob/three.js#4160 on the three.js github, it looks like this could be done in Three.js by doing a merge every frame, passing custom attributes (for the time being I think it's just one/two matrixes, one transparency, one color for each object of the merged mesh) to a slightly modified shader.

This could really speed up things big times (some investigation required) - so maybe worth doing one day.