HTML5 Games 0.3: Seeing the Future

Two weeks ago, Cory, Conor and I released version 0.2 of JSGameBench with increased performance and more refined recommendations. Today, with the release of version 0.3, we get our first taste of the future of high performance web applications: WebGL.

The Glorious Future, Here Now

WebGL is designed to allow browsers to render 3D scenes within the 2D canvas element. More importantly, the WebGL implementations currently deployed take advantage of the 3D hardware on your machine, fully accelerating both 2D drawing and compositing, with excellent results.

Recall our scores from two weeks ago, where the our Windows 7 test machine hit 1,482 sprites with Firefox 4 and Chrome 10 on OS X pushed 288 sprites.

Compare to the WebGL results:

WebGL provides a dramatic performance gain on OS X, with Chrome 11 hitting a new record 4,394 sprites and Firefox 4 pushing 2,061. Gains on Windows 7, where canvas 2D calls were already accelerated, were more modest but still significant in Chrome’s case. Chrome 11 on our OS X test machine blew us away, as more than 4,000 sprites simply floods the page.

Note that JSGameBench is not using WebGL to accelerate 3D content. Instead, we are using WebGL to render sprites. This gives JSGameBench a clear path to hardware acceleration that is not always available.

WebGL

The challenge in using WebGL, especially for those not familair with other OpenGL variants, is the complexity involved with setting up a simple draw context. We will continue to simplify and refine JSGameBench, but it should provide a good place to start. If you want to use WebGL to draw sprites, you will need a few things:

• A canvas element to target. You can see how we do this in init() in webgl_render.js
• A WebGL draw content. Check out createContext() and extendContext() in webgl_utils.js
• Fragment and vertex shaders. Examples of both in webgl_sprites.js

Of course, you also need a WebGL capable browser. The current stable releases of Chrome and Firefox 4 Beta both ship with WebGL enabled. This is a tremendous step forward for hardware acceleration on the web. WebKit nightly builds have WebGL but Safari does not (yet). Internet Explorer 9 is also missing WebGL.

Is WebGL Ready for Prime Time?

The answer is a resounding maybe. We have been pushing all kinds of 2D content through various Chrome and Firefox 4 Beta versions on OS X 10.7 and Windows 7 with great results. Of course, it is still early days for adoption of both browsers, so you will be limiting your market, but what you can build is amazing. And that is before we start talking about 3D!

What About Mobile?

Neither Android’s mobile Browser nor iOS’ mobile Safari support WebGL, which is really unfortunate. Both run on handsets with great 3D hardware acceleration, so WebGL will fly on these devices. Moreover, enabling WebGL is clearly possible, as Firefox Mobile Beta has been shipping with Android WebGL support since January.

Much like Firefox 4, Firefox Mobile Beta’s performance is encouraging. Without significant changes to our WebGL stack, we had sprites zipping around on Firefox Mobile Beta. While Firefox Mobile Beta is not yet ready to be a viable target for production apps, it demonstrates the power of WebGL on mobile devices. The question becomes when the Android and iOS browsers will catch up.

Browser Improvements

As always, version 0.3 brings a list of requests to browser manufacturers:

• Implement WebGL! WebGL powerfully expands the design space available to web developers and is not just for 3D content. Don’t force developers and users to abandon their browser of choice in order to experience great web content.
• Stop neglecting WebGL on mobile platforms. Firefox Mobile Beta has been shipping WebGL for Android since the beginning of the year. Mobile webkit browsers are falling behind.
• It’s surprising how fast WebGL runs on some platforms compared to canvas. It would be great if canvas was hardware accelerated to the same extent for developers who don’t want or need to learn WebGL.
• Although the CSS tricks are interesting, the broadest win for HTML5 as an effective interactive platform is for browsers to expose hardware accelerate render pipelines to javascript directly rather than forcing developers to attempt to contort their game engines into JS/CSS hybrids.

GDC

Are you attending the Game Developers Conference next week in San Francisco? If so, you should attend the Emerging Technologies Review on Tuesday at 3pm. Cory will be joined by 3 other speakers to talk about HTML5 and the future of gaming on the web. It promises to be an excellent session!

Thank You

As always, thank you to everyone who has forked JSGameBench or talked to us about how to make it faster. We continue to make improvements and are excited to see what we can make a browser to do next.