Camera Sync with CSS3 and WebGL (Three.js)

The objective is to mix webGL and CSS3 objects and apply transformations to both in sync, such as if they were placed on the same scene. This combination of a DIV container with a WebGL context is needed in order to display dynamic data and UI components such as buttons, select drop-downs or any other HTML component.

How is done

First, we examine the DIV hierarchy's layout.We need to have a main div component that contains the two  divs for css3 and webgl. For this setup we have the css div component on top of the WebGL component. The CSS component has two other very important div layers that we call here: "css-world" and "css-camera.

"css-world" DIV layer:

This div layer is very straightforward and it basically holds two CSS3 styles properties (perspective and perspective-origin, you can see it in the following code:

function setCSSWorld() {
            divCSSWorld.style.WebkitPerspective = fovValue + "px";
            divCSSWorld.style.WebkitPerspectiveOrigin = "50% 50%";
            divCSSWorld.style.MozPerspective = fovValue + "px";
            divCSSWorld.style.MozPerspectiveOrigin = "50% 50%";
}

You may have notices the variable fovValue, well we calculate this value from this equation:

fovValue = 0.5 / Math.tan(camera.fov * Math.PI / 360) * screenHeight;

"css-camera" DIV layer:

Here is where the magic happens. This layer is where the actual world matrix (inverse) is applied as a CSS3 style in syc with the Three.js camera. The following code is used:

function setCSSCamera(camera, fovValue) {
            var cameraStyle = getCSS3D_cameraStyle(camera, fovValue);
            divCSSCamera.style.WebkitTransform = cameraStyle;
            divCSSCamera.style.MozTransform = cameraStyle;
}
function getCSS3D_cameraStyle(camera, fov) {
            var cssStyle = "";
            cssStyle += "translate3d(0,0," + epsilon(fov) + "px) ";
            cssStyle += toCSSMatrix(camera.matrixWorldInverse, true);
            cssStyle += " translate3d(" + screenWhalf + "px," + screenHhalf + "px, 0)";
            return cssStyle;
}

Below you will see a link to open the final scene, where you can see a green cube made of 6 divs with CSS3 3D transformations and a Purple cube which is a webGL object. You will be able to move the camera and see a perfect sync of the 3D world scene in WebGL and the HTML cube.

Output