24 January 2011

Mozilla’s “Flight of the Navigator” demo

As the browser makers are implementing the newest and shiniest in HTML standards, a parallel competition is running to showcase the advances to the public, to present the own product as more performant and standards-compliant. Even the runner-up in this race, Internet Explorer, launched an entire site to prove it’s more or less catching up or even surpassing other in some areas. With the launch of beta 8 for Firefox, another interesting demo based on HTML5 became available to the wider public: “Flight of the Navigator”.

We built the demo in order to integrate and showcase the various JavaScript libraries and browser features we were creating together. As a result the demo exploits a number of features in HTML5, namely, <canvas>, WebGL, <audio>, and <video>. It also uses some of our JavaScript libraries (CubicVR.js, processing.js, dsp.js, beatdetektor.js), as well as the various JavaScript speed and feature improvements in Firefox 4. Finally, the demo is driven by the new Firefox Audio API to synchronize the audio and 2D/3D visuals.

Built by the Mozilla #audio hacking team, it’s aim is to show how the new standards can reduce the reliance on plugins for rich online content, with a little help from hardware acceleration. If you visit the live demo here, you can see the page doesn’t use Flash or Silverlight, it’s only the browser doing the rendering. You can even right-click to open the usual context menu of the browser, just like on any webpage. Furthermore, when you resize the browser window, the demo resizes itself to match it – not something you regularly get with online video.

Ironically, the demo fails to load on my computer in – I’m using a nightly build, beta 10 to be more specific; it pops out an error about not being able to load an xml file and stops there. On the other hand, it runs just fine in ’s Canary build with hardware acceleration enabled – one of the obvious advantages of using standards. I’ve also recorded a video with the demo running in Chrome (sorry, no audio, I’m new to this). The animation is not always as smooth as you would expect and the RAM usage is pretty high compared to video rendering, but I suppose that’s the price to pay for interactivity and compatibility across browsers without the use of plug-ins. Given time and wider adoption, it’s safe to assume the performance of HTML & co. will continue to increase and will enable new ways to experience the Web.

Post a Comment