Menu
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?
434
The Renderer displays the scene onto a HTML Canvas Element. By default it uses WebGL. WebGL allows GPU-accelerated image processing and effects as the renderer creates the 2D image for the Canvas. There are many types of Cameras in Threejs.
Major graphics organizations use Three.js for creating and rendering 3D scenes for movies, anime, advertisements, and games. Three.js uses the WebGL engine in the browser for rendering scenes. The API is based on OpenGL (GL stands for graphics library), a desktop graphics API.
A render target is a buffer where the video card draws pixels for a scene that is being rendered in the background. It is used in different effects, such as applying postprocessing to a rendered image before displaying it on the screen. width - The width of the renderTarget.
The ability to render 3D objects in the browser opens up many exciting possibilities for creating interactive experiences. Whether you’re looking for a new way to showcase products on your e-commerce site, creating stunning landing pages, or maybe even developing a game.
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.
161
go with WebGLRenderer as its future proof and imp is most THREE.js methods works in it.
For e.g. ParticleSystem does not work in CanvasRenderer
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
