Monday, July 7, 2014

WebGL CSS3D Hybrid

Jerome Etienne has an interesting post where he combines CSS3D and WebGL, see his post here. However, his method is not compatible with Three.js post-processing shaders that is required to blur and perform other 2D effects on the 3D rendering.

The videos below show integration of WebGL and CSS3D with post-processing in THREE.js. The main hack do to this requires double rendering the DOM in two CSS3D layers. The first layer is rendered under the WebGL layer, and is a clone of the top CSS layer. The top CSS layer is rendered transparent over the WebGL layer and catches keyboard and mouse events. The WebGL layer is rendered with alpha blending. See the source code here.

dnd, iframes, video, collada

Update july10th, testing new hacks to integrate: iframes, html5 video, and collada 3D files by drag and drop. Starting new module with simple API for creating 3D widgets mixing WebGL and CSS3D.

No comments:

Post a Comment