HTML5 Blizzard: Full Hardware Acceleration in Action

With Internet Explorer 9 the entire web platform is fully hardware accelerated. Customers will benefit from hardware acceleration on all of the websites they visit and developers will benefit from hardware acceleration across all of the technologies they use (HTML4, HTML5, SVG, CSS, JavaScript, Audio, Video, and more).

We’re excited that other browser vendors have decided to follow our lead and hardware accelerate their browsers. We’re moving the web forward together in a way that greatly benefits customers and enables new web experiences. Browser vendors have taken different architectural approaches to hardware acceleration, both in what web platform technologies they hardware accelerate and how much they accelerate these through hardware (GPU, multi-processor cores, memory locations, etc.).

This post looks at the HTML5 Blizzard demo which we released to wish everyone a happy holiday season. The HTML5 Blizzard demo uses common web technologies together to see how many snowflakes a browser can animate in real-time (60fps). When the frame rate is above 60fps snowflakes are added, and when the frame rate falls below 60fps snowflakes are removed, until the browser reaches equilibrium at 60fps. The more snowflakes the browser can animate in real-time the higher the snowflake score.

A browser which only hardware accelerates some of the technologies used in HTML5 Blizzard will have a lower snowflake score than a browser which efficiently uses the PC’s resources to hardware accelerate the entire experience together.

Step-by-step: How HTML5 Blizzard Works

	Background Sky (HTML5 Canvas Gradient) The blue background of the Blizzard demo uses the canvas API’s to programmatically create a linear gradient brush and draws the gradient into the background canvas. This entire process is hardware accelerated in IE9 and creates a background sky for the scene.
	Holiday Greetings (DIV with WOFF Font) Located over the background are two fixed position HTML DIV’s containing text wishing everyone happy holidays. These DIV’s are styled using standard CSS properties and drawn with a WOFF font. All text within IE9 including text styled with user provided WOFF fonts is hardware accelerated.
	Snow Bank (SVG Image) Along the bottom of the window is a vector SVG image representing the snow bank. By using SVG we can dynamically scale the image to the width of the window and maintain smooth, anti-aliased curves. Within IE9 all SVG graphics are represented natively on the GPU and hardware accelerated.
	Snowman (HTML5 Canvas Images) No winter scene is complete without a dancing snowman, and located in the center of the screen is second canvas where we draw images at different rotations and scales with common JavaScript animation techniques to create the effect of the dancing snowman. Rotating, scaling, and drawing images is massively parallel on the GPU and this entire process takes place on the GPU with IE9.
	Snowflake Score (HTML5 Canvas Text) Being a performance demo we need to show people how many snowflakes are falling on the screen and we do that through the HTML5 Canvas text capabilities which allow us to draw text directly into a canvas surface. You’re starting to see a pattern – drawing and compositing this text is also hardware accelerated with IE9.
	Falling Snowflakes (HTML5 Canvas Image Strip) The fun part of the demo is the snowstorm canvas which programmatically adds and removes snowflakes until it reaches the 60fps (16.7ms) equilibrium point. The snowflakes are drawn from a single indexed image strip and all indexing and clipping of that image strip occurs on the GPU within IE9.
	Return Button (DIV with CSS3 Opacity) Like many webpages there’s a button which allows the user to return to the sites homepage. This button sites at the top of the z-order above all other content and uses the CSS3 Opacity property to blend into the background scene. Within IE9 applying these CSS3 properties occurs entirely through the GPU.
	Information Pane (WOFF into HTML5 Canvas Text) Along the bottom of the scene you’ll find general performance information, including the current window size and how long it takes to draw a single animated frame. This information is drawn into an opaque canvas using the canvas text capabilities and WOFF fonts. This is a good example of how performance benefits compound within IE9 when features which are individually hardware accelerated (Canvas, Canvas Text and WOFF fonts) are used together.
	Background Music (HTML5 Audio) On browsers which support playing MP3 audio files through the HTML5 Audio tag, holiday music will play in the background while the demo is running. Within IE9 we take advantage of the audio hardware available to perform audio decoding and playback directly on hardware when possible.
	Bringing the Demo Together These individual web platform features come together to create a fun and fully hardware accelerated winter scene. Everything you see in the demo is represented as native graphics primitives directly on the GPU.

Full Hardware Acceleration

An objective of Internet Explorer 9 is to provide the right foundation across the browser to ensure developers have a reliably fast platform. The HTML5 Blizzard demo is a great example of how web developers will use different technologies together in creative and natural ways. Just accelerating pieces of the web platform, such as compositing or canvas, will improve performance but doesn’t have the same impact as fully accelerating the entire web platform.

What’s your snowflake score?

—Jason Weber, Lead Program Manager, Internet Explorer Performance