CSS3 + webGL 3D Transforms in sync (Webkit)

Written by Luis Cruz on Sunday, 23 October 2011. Posted in MSCS Project

Intro to CSS3 and webGL

CSS3 + webGL 3D Transforms in sync (Webkit)

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.

This is possible due to the new 3D transforms in CSS3, specially the very useful Matrix3D function available in webkit(Chrome and Safari); the following would be an example of a CSS3 transform property using the Matrix3D funtion with an initial value of identity:

-webkit-transform: matrix3D(

Having this we can dynamically update it via javascript; therefore, we update (overwrite) the CSS at the same time we update our transformation matrix in WebGL.

For this first try, I am rotating a 3D sphere by using mouse motion, and the same rotation matrix is used by a DIV located over the webGL canvas container.

Please open the following link. Drag the mouse over the earth sphere.



Translating in Z

To make the top DIV layer look  like if it was on top of the globe (webGL object), I added a translation in Z to the current 3D transformations. Since adding positive translation in Z would make the DIV larger, I have to also apply a Scale transformation.

See the results with a translation here:



Check WebGL.

Social Bookmarks

About the Author

Luis Cruz

I am pursuing my MS in Computer Science at Georgia Institute of Technology (GaTech) with emphasis in Computer Graphics. I received by BS in Computer Science at GaTech in 2009 with specialization in Software Engineering and Computer Graphics.

Leave a comment

You are commenting as guest.