Question

Can someone explain what is difference between three.js renderers? Which one is faster? Which one is more standard and cross browser? How the svg renderer and dom renderer work?
I have different result when I use webGl instead of canvas renderer for below code so why it should happen?
cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
Is it a big difference between canvas and webGL? which one I should use for a high viewed website?

Answer 1

You really want to create applications which only support WebGL if your goal is to create 3D graphics. Other Three.JS renderers are more like hacks and proof-of-concepts than something which can give you real 3D. If your goal is not to create stunning graphics then you can simply use static PNG images, GIF animations or YouTube clips and have better backwards compatibility. <canvas> rendering backend is useful for very very simple graphics only (like a spinning cube without a texture) and having <canvas> as fallback is not going to work in many cases.

• Create your exclusive content in WebGL

• Provide fallback to legacy browsers

  • Using Google Chrome Frame http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/chrome-frame-faq

  • If legacy browser users do not want to install Chrome Frame plug-in in their legacy browser just simply redirect them to static image and static text content

For example, https://tinkercad.com/home/ is WebGL only web application. Their estimation in webshaped.fi conference was that around 50% of site audience can access WebGL content. That may sound low, but it is still much higher then people who install an application on their mobile or desktop, so the conversation rate deploying 3D using WebGL is higher than thru other deployment mechanisms.

Also see http://webglstats.com/

WebGL is also a future-proof technology – it won’t go away. Currently you mostly target desktop, but it is just matter of time, 2-3 years, before mobile adaption is reality.