Graphics Reference
In-Depth Information
How it works...
The main difference between the HTML5 canvas renderer and the WebGL renderer
is that this approach uses JavaScript to directly draw to the HTML5 canvas for ren-
dering your 3D scene. The main issue with this approach is the lousy performance.
When you use the
THREE.WebGLRenderer
object, you can use hardware-accel-
erated rendering. However, with the
THREE.CanvasRenderer
object, you have to
completely rely on software-based rendering, which will result in lower performance.
An added disadvantage of
THREE.CanvasRenderer
is that you can't use the ad-
vanced materials and features of Three.js, as that relies on WebGL specific function-
ality.
See also
• If you can use the WebGL approach given in the
Getting started with the We-
bGL renderer
recipe, you should really use it. It provides more features than
those that are available with the canvas-based approach, and has much bet-
ter performance.
• In the following recipe,
Getting started with the CSS 3D renderer
, this will
also show a different approach where we use the CSS 3D-based renderer
to animate the HTML elements. CSS 3D also provides hardware accelerated
rendering, but only has support for a limited set of Three.js features.
