Benchmarking WebGL Particle Effects

Bocoup is excited to announce that we are working with Gradient Studios to port the hit mobile game Fieldrunners, by Subatomic Studios, to HTML5. This is the first in a series of weekly development blog posts.

One of the earliest tasks in porting an existing game to a new platform is to assess feasibility. This task involves evaluating things like user input, delivery methods, and monetization opportunity, but above all comes performance testing. As part of pre-production for the Fieldrunners port, we ran WebGL performance tests on a variety of laptops and browsers.

We identified Chrome 12 (Stable) as our target recommended browser, and a MacBook Pro 6,2 as our recommended specification.

We ran a simple WebGL benchmark test generating particles of a certain size, while varying the number of particles rendered and measuring frames per second (FPS). Click the chart see it in full size, or grab the tabular data from this spreadsheet.

The biggest surprise for me was a pleasant one! Our first benchmark was to test particles from 20×20 (400 pixels) up to 100×100 (10,000 pixels). Every single one of these tests performed at nearly 60.0 FPS — we probably would have seen higher, but we were using webkitRequestAnimationFrame, which for a variety of reasons caps out at 60 FPS in Chrome on desktop. (Whereas on a Chromebook it caps out at 30 FPS.) So in order to create informative charts, we had to increase our benchmarks to go all the way up to 500×500 (250,000 pixels).

We also collected Firefox 5.0.1 data:

Fieldrunners has an upper bound of about 500 primitives, so we set ourselves a goal of 1000 primitives at 30 FPS in our test. Fortunately, we more than exceeded our expectations, performing at about 60 FPS for reasonably sized sprites. After running these tests were confident that we could run the game on our recommended spec in WebGL on Chrome 12 without compromising the game design by reducing particle or sprite counts.