Use Canvas in SVG or WebGL for 3D application

Question

I need to build an html5/javascript 3d application, and each scene i have to render a lot of objects (about 200-300 complex objects or more) without lagging, so please tell me which render technology i should choose, HTML5 Canvas, SVG or WebGL.

I heard that using Canvas combine with SVG will deal better performance, but how complex to convert it to 3d environment, have any javascript engine support Canvas in SVG? Or i should choose three.js for Canvas and WebGL.

Answer 1

HTML5 / Canvas / SVG are good for static images, but not for a 3D application that allows movements.

HTML5 and SVG do not implement 3D mechanisms, so creating such scene could become quickly terribly complex. Canvas are only some kind of surface, which would require further logic or techniques for drawing on it.

Another consideration is that different browsers may have very different performance, for instance (at the moment I write this answer) comparing Chromium and Firefox, one is better at moving one huge image, while the other is better at moving thousands of small ones.

WebGL is a simplification of OpenGL for web, which use the graphic card for rendering complex scenes, like in games. This would allows real 3D and realistic rendering. The price is complexity: it take some time to learn and apply correctly.

For simple 3D effects and styling, WebGL is an overkill, and SVG would be a simpler alternative. For real 3D, WebGL gives the full power.