WebVizBench.com
We typically spend our time in managed code, such as Silverlight, WPF, and XNA, because these technologies let us design high-performance experiences that have reach. Recently, however, Microsoft’s Internet Explorer 9 browser caught our eye by promising a thoroughly hardware-accelerated browsing experience, especially around the new rich-media capabilities of HTML5.
Microsoft, preparing for the upcoming beta release of IE9, asked us if we’d be interested in developing an HTML5 site that would allow us to flex our design chops in a browser-based context. We’ve developed a reputation for creating digital experiences that push modern computer hardware to its limits, and this was a great opportunity to see if IE9 could live up to our expectations.
In collaboration with Microsoft and Seattle radio station KEXP, Stimulant created WebVizBench.com, an animated and interactive radio playlist visualization and benchmarking application written entirely in HTML5, optimized for Microsoft IE9, and tweaked to harness the power of GPU-enhanced Web browsing.
Over 700,000 tracks can be browsed at WebVizBench.com, thanks to KEXP.
We were incredibly fortunate to get access to an astounding historical data set from KEXP, the world-renowned independent and non-profit radio station in Seattle, Washington. The KEXP data set represents nearly 10 years of radio playlists. The data included over 700,000 tracks with album art, the date and time each song was played, and DJ names. With this rich dataset in hand, our goal was to find a visually compelling way to allow for exploration, while simultaneously seeing how far we could push the IE9 rendering engine. We decided to work backwards from the HTML5 rendering features that IE9 supported (and the list is quite comprehensive) in order to generate some objective, empirical data around IE9’s performance on various platforms. We knew that we wanted to generate a “performance score,” but we wanted that score to be based on a more “real-world” browsing experience, not a particular sub-feature of a rendering engine.
WebVizBench.com uses HTML5 features that IE9 can offload to your graphics card, for insane performance.
The resulting site, WebVizBench.com, offers the ability to browse through all tracks played on KEXP for almost the entire past decade. You can sort by time, artist, popularity, or even album color. A display options panel lets you toggle which HTML5 features are used to render the visualization, and you can see the frame rate change based on your system’s CPU (and GPU, if you’ve got one) power. Running the benchmark takes your system through an elaborate script of manipulating all the KEXP data, using different combinations of rendering options in an attempt to push your system to the limit and generate an objective performance score.
Speaking of numbers, we did some testing in our development and found that IE9 really does take full advantage of the GPU when present. IE9 limits rendering at 60 frames per second (fps), since most screens don’t refresh at higher than 60Hz. Therefore, we designed our benchmark so that even today’s highest-end machines wouldn’t hit this upper frame rate limit. Your results may vary, but here are our initial frame-rate findings for different graphics cards in the same computer (with a Core i3 530 CPU).
- 12.43fps with no GPU, built-in graphics
- 13.04fps with GeForce 210
- 21.88fps with Radeon 5750
- 23.51fps with GeForce GTS 450
- 22.03fps with Radeon 5770
- 24.20fps with GeForce GTX 460
- 24.59fps with GeForce GTX 480
We’d love for you to try out WebVizBench.com (feel free to tweet your results to @stimulant). If you haven’t grabbed IE9 yet, you can do so here. Even for us, having designed and built this application, it’s still hard to believe everything you’re seeing is done without a plug-in – it’s just HTML and JavaScript.
You can learn more about IE9 and its features at BeautyOfTheWeb.com.
Creating interaction beyond the computer.
From desktop to device, multi-touch to gestural and portable to permanent, Stimulant crafts magical experiences for computers that don't look like computers.