Recently we were engaged by a company in the UK and some designers based out of Paris, to bring a 3D model designed in Google SketchUp to life online. This would hardly be noteworthy had we been allowed to use Flash to deliver an interactive experience. But for this project, we were specifically tasked to use HTML5 friendly techniques. Thank you Mr. Jobs. Unfortunately, we can’t share any links at this time but we promise we will share once we launch. So what happens when you try to draw 8000+ lines on a canvas?

The model, aka the “constellation” pictured above, had over 8000 lines and over 300 spheres. The designer, thankfully, had used a monochromatic palette. This was a good thing because it meant that we would not have to worry about z-sorting the lines and circles. Our mission was to render this puppy, fly around and cull what we couldn’t see.

Once we had parsed the data (that’s a future post and a half), we were ecstatic, it was nearly imperceptibly different from what we were seeing in SketchUp… but.. then we glanced at our frame rate stats and we were only getting 9fps. As we moved our camera in and out we saw the fps hover between 4-9fps. We thought, ok, maybe Safari on mac is not as fast as Chrome. Alas! Chrome was performing slighly worse, with a lower bottom end at 3-6fps.

Where was our sweet spot? How many lines and spheres can one draw on the canvas and achieve acceptable frame rates? What is more taxing, lines or spheres? We would be happy with 20fps. We broke out the lab coats and went to work creating versions of the constellation with decreasing amounts of lines and spheres. We also separated the lines from the spheres and ran some tests independently. Keep in mind, that this is not uniform test since, as you can see in the screenshot above, the lines are not spread evenly in x,y or z space nor are the total number of lines and circles drawn on screen at any given time. So this is also a test of pure javascript performance, looping through the arrays and deciding if a line should be drawn.

The Tests

We ran 3 tests. For our 1st test, we took every third, then fourth line etc. from the original 8847 lines in the array. The second and third test gave us insight into how much overhead the circles were adding to the drawing methods.

We wanted to share our findings with respect to the performance (measured in fps) we recorded in FireFox, Chrome and Safari on the Mac and their counterparts on the PC. All tests were conducted at 1200×800. We were also very interested in seeing how the HTML5 canvas performed on the iPad because part of the end project is to produce similar results in the browser on the iPhone and iPad. All of these browsers support the canvas and some browsers have even fashioned marketing campaigns around their performance. But what we found surprising was the chasm separating the slowest from the fastest frame rates.

As you will see in the tables below, Firefox was pathetically slow at rendering the model on both mac and pc. Safari was better than Chrome for some reason, as it is widely believed Chrome owns the distinction of being the fastest browser.

In Test 2 and 3, you can see that drawing the circles was not an insignificant overhead, representing  a 2-5 frame jump at the lower end of the range.

While we acknowledge this isn’t completely a fair test, it shows you that Chrome is not necessarily king, and that there is serious room for improvement from Firefox. We look forward to updating this post with some numbers run against FF4 and Chrome 9. Perhaps the best news was that Safari performed well for us, and is considered the target browser for the project. We will update this post in the coming weeks with greater detail about this project as this data has more to tell us about the performance of canvas drawing methods across the browsers.