Sunday, May 10, 2015

WebGL CSS3D UI Prototype


I have updated this prototype to work with the latest THREE.js and only use one CSS3DRenderer layer, you can view the live demo on heroku rusthon.herokuapp.com. The shading over the CSS3D windows is done with the bloom fx in THREE.js, some of the stock fx are compatible with RGBA targets, and able to render overtop of the interactive HTML layer.

You can drag and drop Collada (dae) files from your desktop onto the view and they will be loaded and attached to the 3D window. See the source code, here. The prototype works in Google Chrome, Safari, new iphones and androids, but not very well in Firefox see this bug webgl alpha overlay css3d bug

6 comments:

  1. This is awesome! I have been trying to do something similar for WebVR, but couldn't figure out how to render CSS3D in stereo. (see my post: http://michaelstaub.com/2015/05/11/webvr-mixing-html-and-webgl/ ) Do have any ideas on how this could be accomplished?

    ReplyDelete
    Replies
    1. THREE.js should take care of rendering the CSS3D in stereo, I haven't actually tried that, but from what I understand it is not too hard to setup with THREE.js.

      Delete
    2. You are right, its not hard to do in three.js. (see here: http://threejs.org/examples/#css3dstereo_periodictable ) But the current implementation simply clones all the dom nodes for each camera. I couldn't figure out a way to keep the left and right sides in sync during user input events. I think these demos you've created would be amazing on the oculus.

      Delete
    3. that's too bad, keeping cloned DOM nodes insync will break with anything complex like: scroll bars, iframes, videos, etc. My first implementation used two css3d layers, and I had tried to keep the DOM nodes insync with hacks that easily broke. I guess its up to the browser vendors to allow css3d to rendered properly for stereo with a proper API for it.

      Delete
    4. Yeah that's what I was afraid of. But with the increasing popularity of VR, I'm sure it won't be too long.

      Delete
  2. This comment has been removed by the author.

    ReplyDelete