Using Canvas in SVG or WebGL for a 3D Application

Question

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

I heard that using Canvas in combination with SVG will have better performance, but how difficult is it to convert it to a 3D environment, to support the javascript engine Canvas in SVG? Or should I choose three.js for Canvas and WebGL.

Answer 1

HTML5 / Canvas / SVG is good for static images, but not for a 3D application that allows you to navigate.

HTML5 and SVG do not implement three-dimensional mechanisms, so creating such a scene can quickly become terribly difficult. A canvas is just some kind of surface that will require further logic or drawing methods on it.

Another consideration is that different browsers can have very different performance, for example (at the moment I'm writing this answer), comparing Chromium and Firefox, it is better to move one huge image, while the other is better to move thousands of small ones.

WebGL is an OpenGL simplification for the web that uses a graphics card to render complex scenes, such as games. This will allow real 3D and realistic rendering. The price is complex: it takes some time to learn and apply correctly.

For simple 3D effects and styles, WebGL is redundant, and SVG will be a simpler alternative. For real 3D, WebGL gives you full power.