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.

Project Tuva selected as a 2010 Webby Honoree

Project Tuva has been selected as an Official Honoree by the Webby Awards for the Best Use of Video or Moving Image. A big thanks to our great friends and partners at Microsoft Research for the chance to collaborate on the creation of a meaningful experience for this amazing content.

Modeling The World

The biggest names in supercomputing have been brought together at modelingtheworld.com.

The highest-power computational efforts on the planet are working to solve science’s hardest problems, from protein folding and gene sequencing to climate modeling and quantum physics. Stimulant helped Microsoft Technical Computing illustrate their commitment to these cutting-edge efforts with an equally cutting-edge website.

ModelingTheWorld.com is a Silverlight-based website that features interactive HD videos of some of the most respected luminaries in the supercomputing field today. 15 are available now, with more throughout the year, and each has a rich array of time-synchronized “extras” that add context to the interviewees’ statements or link to other related videos. Synchronized transcripts enable captioning and non-linear navigation.

High performance computing comes alive through the stories of its own leaders.

Stimulant designed an entirely procedural layout engine to display all of the videos, reinforced by an intelligent particle system, to evoke a complex system of many elements that form a greater whole. The system features parameters such as gravity, attraction, and elasticity that allowed design and development team members to interactively dial in the look and feel. Subtle controls also exist for featuring some videos more than others. Particles swarm to videos the user is interested in. If the user wishes to browse in a more ordered way, such as by name or tag, all the elements intelligently make room for additional interface elements as they appear.

Stimulant’s deep background in digital media also allowed us to help art direct the look of all the interviews, to ensure that the emotional tone of the videos matched the exploration and playback environments. A richly interactive video experience is offered once a video is selected for viewing, built upon our past successes for Microsoft Research’s Project Tuva. Silverlight Smooth Streaming video automatically provides the right quality level for the user’s bandwidth, immediately and in real time.

ModelingTheWorld.com is a testament to Microsoft’s commitment to advancing the state of computing on a massive scale, and reaffirms Stimulant’s not-so-secret mission to use technology to tell stories in new and engaging ways.

Project Tuva

Project Tuva is an interactive video application developed for Microsoft Research. It wraps up many of our team’s passions in one project: history, interactive video, education, science, and rich internet applications. We are thrilled to be part of the team that brought this exciting video portal to life.

Project Tuva is an interactive video experience that makes learning about science relevant and exciting through annotations authored by researchers and subject-matter experts. Project Tuva launched with Richard Feynman’s Messenger Series lectures, a cornerstone set of seven talks at Cornell University in 1964. These videos are enhanced with a number of different layers of contextual information: fully-searchable transcripts and captions, time-synchronized contextual “extras” that link to related web resources, the ability to take notes while watching, integration with Microsoft Research’s own amazing World Wide Telescope project, and more. More…