Rendering HTML to WebGL textures would be big, which I think this could do - though probably not as performantly as the browser could. It's currently not possible, partially due to security concerns if I remember right.

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-494be64...

[1] http://robert.ocallahan.org/2011/11/drawing-dom-content-to-c...

[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas/Dra...

[3] http://kripken.github.io/boon/screens/game.html?low,low

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/

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.

Here is another really good one: http://mrdoob.github.io/three.js/examples/css3d_periodictabl...

This is http://famo.us 's approach. A JS framework built on the idea of positioning everything only using CSS 3D transforms.

It renders to Canvas, so it should be already possible; three.js even already conveniently allows creating texture from a canvas:

  var texture = new THREE.Texture(theCanvas);
  texture.needsUpdate = true; //refreshes the texture from the source canvas

Now combine it with React.js to avoid redrawing unless necessary and forward the mouse events back to Webkit.js, and you have an interactive HTML texture :)

It actually does, turn on chrome's canvas profiler its kicking up bindTextures for everything. On the demo it even says its a hardware accelerated version and requires WebGL.

At some point, it won't matter whether your browser supports a particular feature of the web. Any site could just embed a copy of WebKit for browsers that are too old (i.e.: when the latest version of Firefox is a few dozen versions behind) and render the page using the latest rendering engine.