3 ms·

Awesome idea! I've seen tricks where CSS 3D transforms were used to position the entire DOM within a scene rendered in Canvas, but that approach is extremely l

Awesome idea! I've seen tricks where CSS 3D transforms were used to position the entire DOM within a scene rendered in Canvas, but that approach is extremely limited. [0] Theoretically, now you could render the DOM to a texture instead of to the screen and do some sweet deferred rending. == Edit == Looks like one of Mozilla's Distinguished Engineers blogged about the technique. [1] [2] The creator of emscripten used this technique to render tweets as a texture in the bannabread demo. [3] [0] https://medium.com/@deathcap1/six-months-of-voxel-js-494be64dd1cc https://medium.com/@deathcap1/six-months-of-voxel-js-494be64... [1] http://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html http://robert.ocallahan.org/2011/11/drawing-dom-content-to-c... [2] https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas/Drawing_DOM_objects_into_a_canvas https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas/Dra... [3] http://kripken.github.io/boon/screens/game.html?low,low http://kripken.github.io/boon/screens/game.html?low,low

rl3 12y ago
One of the drawbacks with rendering DOM content to a Canvas/WebGL texture is that interactivity is lost in the process. At the very least an intermediate layer would have to be created that pipes scene input into DOM input. The nice part about CSS 3D transforms is that interactivity is maintained, and it's still hardware-accelerated. A fantastic example of this was made by the creator of Three.js over a year ago: http://mrdoob.com/lab/javascript/threejs/css3d/ http://mrdoob.com/lab/javascript/threejs/css3d/ As you said above, there are severe drawbacks with that approach. It is very limited in terms of what's possible compared to a traditional 3D scene. Moreover, since CSS 3D transforms are essentially DOM content rendered to a texture, rasterization occurs, and as such there isn't clean scaling, even with SVG content.
- benjaminjackman 12y ago
  Here is another really good one: http://mrdoob.github.io/three.js/examples/css3d_periodictable.html http://mrdoob.github.io/three.js/examples/css3d_periodictabl...
- brianchu 12y ago
  This is http://famo.us http://famo.us 's approach. A JS framework built on the idea of positioning everything only using CSS 3D transforms.

rl3 12y ago

One of the drawbacks with rendering DOM content to a Canvas/WebGL texture is that interactivity is lost in the process. At the very least an intermediate layer would have to be created that pipes scene input into DOM input. The nice part about CSS 3D transforms is that interactivity is maintained, and it's still hardware-accelerated. A fantastic example of this was made by the creator of Three.js over a year ago: http://mrdoob.com/lab/javascript/threejs/css3d/ http://mrdoob.com/lab/javascript/threejs/css3d/ As you said above, there are severe drawbacks with that approach. It is very limited in terms of what's possible compared to a traditional 3D scene. Moreover, since CSS 3D transforms are essentially DOM content rendered to a texture, rasterization occurs, and as such there isn't clean scaling, even with SVG content.

benjaminjackman 12y ago
Here is another really good one: http://mrdoob.github.io/three.js/examples/css3d_periodictable.html http://mrdoob.github.io/three.js/examples/css3d_periodictabl...
brianchu 12y ago
This is http://famo.us http://famo.us 's approach. A JS framework built on the idea of positioning everything only using CSS 3D transforms.