Development on what would become WebGL started back in 2007 with Canvas 3D as an extension for Mozilla Firefox 3.0. Since then it has grown from a single project to an open web standard through the Khronos standards group. The standard is currently under development with a target release date of first half 2010.

Firefox isn’t the only web browser to be experimenting with WebGL, Google and Opera have also pledged to support this standard. The WebKit source code has recently picked up preliminary support.

The web has mostly stayed 2D, but with the advent of CSS Transforms and WebGL, the browser is moving into new territory. The web is evolving into the most important platform of the future.

What key enhancements has Google added for developers? Well Chrome adds support for new features in WebKit:

• JSON.parse for securely parsing json data
• HTML 5 hashchange event
• Canvas support for the HTML 5 canvas text APIs
• -webkit-border-image CSS3 attribute
• HTML 5 channel messaging
• HTML 5 Input element types for Text Fields (tel, url, email, and number)
• HTML 5 Forms pattern and required attributes
• HTML 5 draggable element implementing the current spec
• JavaScript getBoundingClientRect and getClientRects to find the position of an element
• HTML 5 Video tag with support for Theora and H.264 video codecs
• HTML 5 Web workers

For users, Chrome add support for custom themes, similar to Firefox’s personas but is more complete by changing the look of the toolbar and the browser pages (new tab page, etc.). See the Google Chrome blog for more info.

Download Google Chrome beta.

Estimated Release Date: 2009?

New WebKit features:

• Geolocation API including suspend/resume. This has been in the iPhone browser since last year
• HTML 5 draggable element implementing the current spec
• HTML 5 Forms pattern and required attributes

On top of expected HTML, CSS, and JavaScript improvements, Apple will surly tweak the web browser again to build the most usable web browser. It could be a long time before we see Safari 5, or they may release an incremental Safari 4.1. Further details will come as now we can only speculate.

Estimated Release Date: June 2011

Update: Apple has indeed released Safari 5 with a tun of new HTML5 features and performance improvements, and a year ahead of my estimate; check it out at the Safari What’s New page.

This is definitely not yet ready for end users but it demonstrates the power of the web platform and where it is heading. With the native video tag, local and session storage, plus much faster JavaScript engines, browsers are changing from simply presenting information to being a fully interactive platform. It’s no surprise that Google is developing a web-browser operating system, called Chrome OS.

It is also quite encouraging to see the second browser war bring fresh ideas and increase the possibilities to the browser. Competition is great.

Snow Stack in WebKit Nightly r46091

The CSS Transforms were originally created at Apple by Dean Jackson, David Hyatt and Chris Marrin for the iPhone. Apple then improved the spec and submitted it to standardization at the W3C. Firefox 3.5 supports 2D css transforms but does not yet support the newer accelerated 3D animations.

So how does it work?

The images are put on the page using standard CSS and HTML, and they are then animated by JavaScript using these CSS properties:

-webkit-transition-property: -webkit-transform;
-webkit-transform: rotateY(45deg);
-webkit-transition-duration: 2s;

The transition property is set to transform, the transform is set to rotate the image in Y-space by 45 degrees, and the duration is set to 2s. With that, the web browser will take the current position of the image and rotate it by 45 degrees in 2 seconds, which produces an animation effect. How beautifully simple it is!