Making the Most of GPU Acceleration in Your Web Apps
Develop | Posted September 05, 2011

The latest generation of Web browsers can use the graphics processing unit in your users’ computer for some really advanced graphics. Good news for developers: It's not hard to incorporate the technology in your apps.

In the past two years, the major web browsers have added support for the graphics processing unit (GPU) that's a part of every PC. You might be aware that the GPU is there, but it rarely got used if you weren't playing games.

Quietly, the GPU is being put to work in non-entertainment ways. GPUs from AMD and Nvidia are incredibly powerful chips, but if you weren't play a game, the thing sat almost idle. Microsoft has put the GPU to work in Windows Vista and Windows 7 with the Aero interface, and now browsers are making the most of the high-performance chips as well.

Traditionally, web browsers used the CPU to do all of the content rendering. In the last two years, the major browser makers have incorporated GPU support for rendering animations, video, and 3D graphics. With IE9, Firefox 4, and Chrome 8, all the major browsers enabled GPU acceleration. The GPU can handle graphics, particularly 3D graphics, far more efficiently than the CPU – for far fewer compute cycles.

The most obvious candidates for such optimizations are the <video> element and the WebGL canvas, since generate their results in areas of memory that the CPU cannot quickly access. But GPU acceleration also utilizes Direct3D, OpenGL, 3D CSS, and Direct2D, depending on what you are doing.

In some cases, the GPU acceleration is automatic; no special coding is required at all. For example, 3D CSS and Canvas 2D both run whether or not the PC has a GPU. If a GPU is found, the work gets passed to the GPU instead of the CPU. GPUs can render CSS transforms to create displays like pop-overs and animations, Canvas rendering of fonts, images, and vector graphics, and compositing, or blending layers, scrolling, and zooming.

Other techniques require coding to the metal. To code to WebGL (which is based on OpenGL) or Direct3D, then direct API calls are required, notes Alex Komoroske, a product manager for Google's Chrome browser.

“3D CSS is just a CSS property, so when it's used, it will automatically trigger GPU acceleration on the page,” he says. “If you use 3D CSS, that's pretty explicit. You give a CSS transform with a z component but it's an easy one to understand because it's so similar to what you do in CSS.”

Komoroske says he thinks 3D CSS is easier to use for general apps. "You write your traditional Web app and use 3D CSS to add a better experience. WebGL can do it but it's targeting things like games and high performance CAD/CAM and other high-end scenarios.”

GPU-accelerated 3D graphics can be encoded with Adobe's Stage 3D development framework, which also uses Adobe's AIR and Flash APIs.

There is also some JavaScript code for doing 3D acceleration, including free code. Some can be found on Chrome Experiments. For WebGL rendering, there is the freeware JavaScript Three.js, which abstracts many of the metal-level coding issues.

In debugging, Nvidia advises focusing on two areas: the efficiency of rendering and the efficiency of the language used for the task. With WebGL, all of the code-level strategies for debugging and tuning native rendering code should work fine. However, the company advises, you may need to pay more attention to reducing API calls to avoid spending too much time in the JavaScript engine.

Google advises testing performance as you go, rather than examining it all at the end. "The GPU is an amazing resource that can get you a couple orders of magnitude performance but it's not infinitely fast. It's not a panacea for all your performance issues. But that's general software practice," says Ian Ellison-Taylor, director of product management.

In addition, Chrome has a FPS meter built in. In the URL bar, enter about:flags and turn on the FPS Counter. After restarting the browser, you'll have a FPS counter in the upper left; you can see a demo of how it works.