Why I think the Three.js CSS3DRenderer is Awesome

The Three.js library is widely known to be a WebGL library. I would like to share some thoughts on one of Three.js lesser known gems, the CSS3DRenderer, and why I think it’s great (even though it’s not even in the current documentation page yet).

Three.js is not simply a WebGL library
With WebGL widely adopted on most platforms, and it would seem natural that WebGL would be the preferred rendering choice on three.js. However, it’s worth noting that three.js has beginnings being a DOM Renderer. It also have a Canvas Renderer before WebGL support was added to the library (and it took until recently to have WebGLRenderer refactored). The simplicity of three.js design that allows other renderers (SoftwareRenderer, RaytracingRenderer etc) is beautiful. I’m sure pluggable rendering architectural isn’t nothing new, but at the top of my head I don’t recall libraries that that comes with better support and extensiblilty than three.js. So while CSS3DRenderer is likely not going to get as much attention and development as the WebGLRenderer, I would try explaining why CSS3DRenderer is a good thing.

Why CSS3DRenderer is Great

1. CSS rendering is widely supported, even on mobile browsers
Apart from some incompatibility issues with older IE browsers (which you could use CSSRendererIE for preserve-3d workarounds), I would think using the CSS3DRenderer would have the highest compatibility across browsers (and used on some high traffic websites until iOS shipped WebGL).

2. CSS rendering can be fast
Browsers leverage GPU for renderering 3d transforms, which gives you 60fps renderering (unless you’re animating > 1000 elements).

3. Stop worrying about Material / Shaders / Geometries
It’s easy to get tied up with geometries, materials, shaders, meshes with the WebGL or Canvas Renderers. CSSRenderer deals with DOM elements, which allows you can forget about texturing for a moment. Which brings the following points:

4. Rich Web Content Transformation
Because you’re dealing with DOM elements, you get to reuse HTML Elements you already have on your website. Now stretch your imagination and means you now can use any rich web content without having to do much.(eg. Images/GIFs/Documents/Videos/Iframes)

5. CSS-ful
Instead of having to handle lower level graphics programming like shading, you could use CSS to style your 3D objects. Maybe at some time you may even want to go crazy with CSS Shaders.

6. Alternative ray packing
Instead of having to raypick (fire a ray into the scene graph to determine what 3d object you’re interacting with), you could simply leverage dom events.

7. It’s a supplement to other Renderers
It doesn’t mean that using the CSS3DRenderer means giving up on the others as you can easily compliment to other renderers. For example, you could integrate a CanvasRenderer (and more) in a CSS3DRenderer, or overlay synchronized CSS3DRenderer with WebGLRenderer (commonly used to render text over the WebGL scene).

8. Extremely lightweight
If could get a customized CSS3D rendering only build of three.js which is a fraction of the normal three.js builds.

Enough of Buzzfeed-like reasons, here’s some situations when to use CSS3DRenderer.

Reasons when to use it
1. Rapid prototyping: Let’s say you wish to get some 3d effects fast with little code, CSS3DRenderer allows you to do that.
2. Creating interesting effects: the ability to creating a different visual effects with a mixture of DOM elements. Another way to look at CSS3DRenderer is that it’s a tool for CSS 3D transforms that you otherwise have to do yourself.

CSS3DRenderer Limitations
1. Thousand Elements: Several benchmarks I’ve done would have me recommend me to keep animated DOM elements at 500 or less.
2. Rasterization: The browser rasterizes an element before transforming it, that means if you scale up a text element too much, you may see jagged edges. The workaround is to create a element with huge font-size (at an expense of increased memory probably). If you’re animating SVG, you may which to transform the SVG points instead of allowing it to be rasterized before transformation.

Cascading Perspectives on CSS3DRenderer
This post was originally named “Exploring CSS3D” I started penning almost 3 years on experiments with the CSS3DRenderer that almost never saw the light of the day. It then became the presentation “Cascading Perspectives on CSS3DRenderer” I gave at CSSConf.Asia 2014 almost a year ago. Although I typically think of myself as a someone whose more familiar with JS than CSS, I thought it would be interesting to share about this topic when given the opportunity to speak. Here’s the slides (that probably has more content) for those interested.

Which brings me to the point
I need to improve my presentation skills
And that because of some knee-jerk reaction listening to my to my own speaking, I’ve only recently took the courage to watch the talk myself. If you’re more courageous than myself, then feel free to scan thru the video:

I think that CSS3DRenderer is cool and it would have a place in my heart, whether or not it would (still) be (widely) used.