[idea] Instead of having multiple renderers, have multiple types of objects that render in different ways.

[trusktr]

Instead of having entirely separate renderers (f.e. WebGL, CSS3D), you could perhaps combine them together and let people specify what type of renderer their objects are: new Object3D(..., 'css3d'), new Object3D(..., 'webgl'), etc). The advantage of this would be manipulating multiple types of objects in a single scene.

This is what sets Famous apart from Three.js, is that Famous mixes DOM with WebGL in what they call "Mixed Mode".

How it works: A scene is made, and Objects of type DOMElement and Mesh can be made and placed into the scene. Famous places Meshes into a canvas, and places DOMElements into a div that sits below the canvas. Then, it keeps a representation of the DOMElement in the 3D space of the canvas (called a "cutout") in order to cut the shape of DOM elements out of the Meshes when they intersect in 3D space or when a DOM element is passing in front of a WebGL object so that even though the DOM elements are below the canvas, they can appear to be in front of WebGL objects.

The effect is exactly like this: http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/

Famous applies this technique to combine both worlds into one world. The Famous API doesn't make you choose your renderer, it just lets you make objects of either type (WebGL or DOM) and the rest is abstracted. You can move, rotate, scale, etc, those objects as if they exist in the same world without worrying about how that combination works.

It then becomes possible to draw shadows onto the DOM elements: behind the scenes, shadows are drawn onto the invisible "cutouts" in the canvas, and since the canvas is on top of all DOM, the shadow will appear to be on the DOM element that the cutout represents.

Of course, the effect will never be as pure as it is in WebGL, but it definitely adds a ton of posibility to what people can do with DOM.

If Three.js had this feature, it'd make Three.js a much better option for making user interfaces with DOM, not just games with WebGL.

DOM is really good at some things, like font rendering and user input, so being able to combine DOM with WebGL would open up many possibilities.

[mrdoob]

One could build a library that sits on top of three.js to do this. In fact, @dmarcos was doing something similar.

[trusktr]

@dmarcos Which repo might this be in?

[trusktr]

@mrdoob We've started a new project for this purpose here: http://github.com/infamous/rocket :)

[mrdoob]

Haha! I like the name! 😄