HTML 5 Profiler #2

Previous Posts
HTML 5 Profiler #1

Last week, I started my Innovation Friday project by kicking off a blog on the start of an open source HTML 5 profiler. Today, I started doing some research to validate my approach. Already, I’ve run into some interesting challenges and findings.

As I stated last week, my idea was to write benchmark tools that isolate each stage of the graphics pipeline to see how well each browsers takes advantage of the hardware available. This week, I’m starting to think that won’t work as well as I planned.

I started today by trying to prototype a test that isolates vertex processing performance. My first realization is summarized by my twitter post this morning.

“Does anyone know if HTML 5 Canvas uses any hardware vertex processing or are the vector objects converted to raster on the CPU? #HTML5"

Of course, the answer is, “it depends, and it’s up to the browser vendor”. So I started searching for the answer using some profiler tools to answer the question on popular browsers.

The tools I used included: gDEBugger (from Graphic Remedy), GPUPerfStudio(AMD), and PIX (Microsoft).

I realized fairly quickly that it will be hard to use these tools with Chrome. When you run a profiler on Chrome, all you are profiling is the application host process and the tools I have at my disposal won’t let me grab the process with the graphics device (each tab is a process in Chrome as I'm sure you know).

I had my first breakthrough with Firefox and PIX and I was able to answer my question...at least the answer as it relates to Firefox.

I added a simple circle to the screen that looked something like this:



Firefox does indeed tessellate the circle into polygons. In Firefox, this single circle has roughly half the number of polygons of the car model below. Plus to complete the circle it actually called draw twice (not sure why it does this exactly).



3688 Polygons (Image from Turbosquid)




One Canvas 2D circle, two draw calls: 8116 polygons


So, in Firefox, it’s fairly easy to see that your game could be limited by vertex throughput if you drew 1000 small circles on the screen (a small circle used around 1000 polygons). Not to mention there are some costly calls between Draw calls that may not be necessary such as ID3D10Buffer::Map, ID3D10Buffer::Flush, and ID3D10Buffer::UpdateSubresource. I’m not sure why those functions are called.

In chrome, this same scene ran much faster. Why, I don’t know because I haven’t had any success getting the profiler to run.

So I did learn something…I learned that I shouldn’t draw circles in Firefox. Their method to convert a parameterized primitive to a tessellated shape needs some improvement.

I learned something else too…I don’t think I will be able to write tests that help me isolate parts of the GPU when using HTML5 2D Canvas (which is what I said was the plan in the previous post). Those tests may be a better test of graphics and drivers than browsers implementations anyways.

So why can't I isolate vertex processing?

Because I don’t have enough control to make my own polygons. I would need to rely too much on the browser’s implementation.

For example, I could use many small circles on a screen to generate a high vertex count. But it could be that the reason the circle test is slow on Firefox is more because of the Map, Flush, and UpdateSubresource call. I need a better tool (such as NVIDIA’s Nsight) to determine that information. I was hoping I would be able to draw polygon’s directly in Canvas, but that’s not part of the API.

So instead of the previous approach, I’m going to build tests that focus on the performance of all the API calls. So I might write a scene that tests arcs or boxes or images and compare performance from one browser to the next. I'll also build more complex tests like ones that evaluate quick pixel rejection. I still think that will be valuable information to help you make your game.

I’ll be on vacation next week so I won’t be posting a blog next Friday. Soon, I will build the test harness and post that on GIT so that others can join in the fun.