jump to navigation

WebGL Browser Stress Tests Using Processing.js May 24, 2010

Posted by Andor Saga in Arius3D, Open Source, point cloud, Processing.js, webgl, XB PointStream.

I’m working on XB PointStream, a tool which will emulate Arius3D‘s PointStream. XB PointStream will use WebGL to render thousands of points efficiently in the browsers.

I was curious to see how many points Processing.js could churn out using WebGL. If fast enough, it could potentially be used as underlying rendering engine for XB PointStream. So I wrote a Processing sketch which rendered thousands of points, and I took some measurements. I didn’t have any point clouds at hand, so I just generated a few thousand points myself:

Once I recorded how long it took Minefield and Webkit, I started hacking in some optimizations in the Procesing.js library. I knew I could start with reducing the number of calls to uniformMatrix*. For example, in Processing.js, the perspective and view matrices are set every time a point is rendered, which is unnecessary. I moved these function calls out and ran the browsers through the tests again. I was pleased to see rendering time was cut roughly in half.

I then filed a bug on our lighthouse account to reduce the number of uniformMatrix*. We still have a way to go in performance, especially since these tests are static renders, don’t account for download time and don’t use real-time lighting.

No Chromium Tests Yet

It’s unfortunate that I couldn’t benchmark Chromium. I even took extra steps to get the tests to run by placing the Processing sketch within the HTML file so Chromium wouldn’t throw XHR errors. I also merged one of my Processing.js patches which does not transpose matrices in calls to uniformMatrix*, which the nightly has issues with. But even after doing this, Chromium surprisingly rendered extremely slowly. This was the exact opposite of what I expected since it always outperforms the other browsers. I could try to find the nightly which renders properly, but I don’t have time to sift through all those nightlies. If someone knows when WebGL was broken, let me know.



1. asalga - May 24, 2010

If anyone is curious, here are my system specs:
2.2GHz Intel Core 2 Duo
GeForce 8600M GT 128MB

2. WebGL Browser Stress Tests Using Processing.js « Andor Salga – js - dowiedz się więcej! - May 24, 2010

[…] Adres URL: WebGL Browser Stress Tests Using Processing.js « Andor Salga […]

3. aSydiK - May 24, 2010

Awesome findings.

4. Tweets that mention WebGL Browser Stress Tests Using Processing.js « Andor Salga -- Topsy.com - May 25, 2010

[…] This post was mentioned on Twitter by Alistair MacDonald, rita turkowski, Andor Salga, Andor Salga, Andor Salga and others. Andor Salga said: #WebGL Browser Stress Tests Using #Processing.js for #XBPointStream http://bit.ly/93H7XE […]

5. WebGL around the net, 26 May 2010 | Learning WebGL - May 26, 2010

[…] a more cross-browser note, here’s something else from Andor — the results of some stress tests dealing with hundreds of thousands of points using Processing.js, across WebKit and […]

6. zhaiduo - May 26, 2010

where’s the demo? I want to take a look.
my system specs:
2.2GHz Intel Core 2 Duo
GeForce G102M 512MB

I use minefield.

7. nekomiru - May 28, 2010

For Chromium builds, visit the page http://build.chromium.org/buildbot/snapshots/ and take note of the subdirectory for Win, Lin, Mac etc. Add the subdirectory text to the url, and append “LATEST” to the address. E.g. :


A number will appear. Replace “LATEST” with the number in the address bar, and that will give you the latest nightly.

8. asalga - May 29, 2010

zhaiduo: Sorry it took so long for this, I was busy all week. Here is the test: http://matrix.senecac.on.ca/~asalga/XB_PointStream/pjs_stress_test/

The results are written to a table so you can easily paste into a spreadsheet and graph it. If I get some time this weekend, I’ll add a feature to run batch tests.

9. asalga - May 29, 2010

nekomiru: The problem is latest Chromium and (now) Chrome take forever to render anything. That’s why I didn’t include them in the test.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: