by Lars Jacobson

Before HTML5 became a buzzword, Adobe Flash was the choice for delivering immersive content on the web. If you wanted your graphics to fly around or better yet, mimic a 3D environment, Flash was your best bet. However, although Flash plays well on most desktop browsers, it has never been supported on Apple devices and with Adobe’s November announcement about its investment in HTML5, it looks like it won’t be around much longer on other mobile devices as well. Now that browsers are starting to support more HTML5 and CSS3 features, developers are experimenting with ways to create rich content that rivals Flash. This is most evident in HTML5′s ability to create 3D graphics by using software libraries such as WebGL or the new 3D Transformations found in CSS3.

WebGL extends JavaScript and can run in the new canvas tag (which can be used to display graphics) of HTML5. Not all browsers and platforms have WebGL compatibility at this point, but developers are already experimenting with the possibilities. Google Chrome has a site full of experiments done using WebGL. One of the Chrome experiments, 3 Dreams of Black, is an interactive music video that immerses the viewer in an imaginary 3D world.
Google Maps is also using WebGL to enhance its interface, demonstrating a more subtle example than the Chrome examples. Users can now fly more seamlessly into street view and rotate around objects on the satellite map. Using a WebGL capable browser such as Chrome, view Google maps in WebGL, and click on the ‘Want to try something new?’ button at the bottom left.
While HTML5 opens the door to the 3D capabilities of WebGL, CSS3 provides a built-in solution to creating 3D graphics with 3D Transforms. Although browser support for 3D Transforms is limited at this point, it really shines on the Safari mobile browser thanks to hardware acceleration, which helps render animated graphics more smoothly. Using 3D Transforms is a great way to obtain smooth animation on Apple mobile devices. For an example, grab an iPhone or iPad and go to comps.whitehorse.com/cube. The example shows that web apps targeted towards iOS devices can render 3D graphics that respond quickly to the users’ touch, rivaling native apps.

Both WebGL and CSS3 transform a traditional HTML page into a more immersive experience once reserved for plug-ins like Flash, and offer a sneak peek at the future. Developers have new options for browsers that support new HTML5 features, or can rely on Flash to deliver fallback content. Either way, WebGL and 3D Transforms show how powerful HTML5 and its supporting technologies can be and offers some exciting possibilities for 3D development.