Benefits of GPU-powered HTML5

April 9th, 2010

At MIX 10 we showed how we’re building on new Windows technologies like Direct2D, DirectWrite and XPS to enable Internet Explorer 9 to render all standards-based web content – text, images, video and SVG – using the power of the GPU.

In this blog post we’ll review the major improvements for web developers and users that come from building on these Windows technologies. For more detailed information on Direct2D technologies, see this excellent PDC2008 talk.

Performance, performance, performance

The benefit of building on Direct2D technologies is that the browser makes the most of the underlying PC hardware that is optimized for rendering rich graphics. This results in faster web applications and a higher quality browsing experience for users and web developers.

As IE9 does more work using the GPU, there is less CPU load, enabling other browser subsystems to do more, as well as enabling higher frame rates for smooth animation and video playback.

The GPU is a much better choice for some graphical operations – for example, the GPU executes alpha blending and bilinear image scaling much faster than the CPU, and uses pixel shaders to perform complex per pixel calculations.

Super-fast zoomed browsing

IE9 uses the GPU to scale images and other content, making zoomed browsing very fast – this is what makes the map zooming demo on so fast.

Windows is still the only broadly used operating system that allows the users to change the size of all UI elements on the screen to improve readability and legibility on new high DPI displays on laptops and desktop computers. IE9 builds on the work done in Internet Explorer 8 (the first browser to zoom Web page content by default) to ensure that users can easily read the Web on high DPI displays.

Hardware accelerated HTML5 video using Windows Media Foundation

IE9 makes the most of your graphics hardware by using the Windows Media Foundation system to play HTML5 video, using the CPU or the hardware video decoder if available.

The reduction in CPU usage on machines with hardware video decoders greatly improves battery life – for example, in our MIX demo we played two 720p HD videos, using barely 30% CPU on a $400 netbook. (versus 100% CPU usage in other browsers, playing only one HD video while dropping frames.)

The IE video engine decodes video directly with and into the GPU. Once the video frames are decoded, they can be treated like any other bitmap in the graphics pipeline with full compositing and integration into the rendering system.

High quality image and color support

IE9 uses the Windows Imaging Component (WIC) to decode PNG, JPEG and (new for IE9) TIFF and JPEG XR images. For a lot of uses, JPEG XR offers a good compression improvement over JPEG, allowing you to serve higher quality images at the same file size.

In addition to being up to 30% faster than IE8 decoders, the new WIC decoders understand embedded color profiles in images, making IE9 a color-managed browser that understands ICC v2 and v4 profiles.

Text quality and performance

IE9 uses the GPU (via DirectWrite) to do text output – up to twice as fast as IE8, and with higher quality. Text can be smoothly animated in IE9, and sub-pixel positioning is a more faithful representation of the Web (and font) designer’s intent.

(We’ve also heard your feedback about some fonts showing up ‘blurry’ on some systems; we are working on addressing this.)

High quality graphics printing

To do high quality printing of HTML5, you need a high quality print subsystem. Internet Explorer 9 directly converts web content into XPS format when sending output to the printing system.

XPS is a more modern print system with native support for features such as opacity and complex paths, which results in increased fidelity and quality when printing modern web content.

What if my PC doesn’t have a GPU?

Because IE9 is built on Direct2D, it has full software fallback support for every feature. The goal is to improve graphics performance and fidelity even for the small number of machines in the world without GPUs, via high quality software emulation.

New HTML5 experiences – with the power of the GPU

Taken together, all of these GPU-powered capabilities in IE9 make it easier than ever before to create amazing new class of Web applications using same markup. For example, it took just an hour to create the final MIX demo – a rotating carousel of four translucent videos (at the 28:00 mark in the video). The page uses simple HTML and JavaScript – the same markup that runs in other browsers, but with higher quality and performance made possible by harnessing the power of the GPU.

More to come

We are working with our GPU hardware partners to ensure that every Windows user, using any hardware, has a dramatically improved experience when browsing the Web. We want to enable web developers to create a new class of GPU-powered rich web applications that go far beyond what is possible with today’s browsers.

As always, we welcome your feedback.

Thank you,
Frank Olivier
Program Manager