Threejs/ WebGL: Most performant way for just cubes

Question

In Threejs, what is the most performant way to display a large number of cubes on an xyz grid for the WebGL renderer, in terms of which rendering methods/ lights/ settings/ material to use? The cubes should support receiving and casting shadows based on a directionLight -- or I can precalculate the side colors if that helps and is possible -- but they don't have any texture or special rotation. Thanks!

Answer 1

Be sure to merge your geometry. It helps a LOT. up to 60times more code. here is a post explaining why. It contains a demo actually showing the difference http://learningthreejs.com/blog/2011/10/05/performance-merging-geometry/

Another things is to remove the duplicated faces when applicable. For example three.js minecraft demo remove the faces from the geometry. http://mrdoob.github.com/three.js/examples/webgl_geometry_minecraft.html for the demo and https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_minecraft.html#L106 for the source