[Public WebGL] WebKit 20-50% slower than Chrome/Minefield using large Float32Array Arrays

Stephen Bannasch [email protected]
Wed Feb 16 21:42:52 PST 2011

Here's a test using large Float32Array Typed Arrays (many sized 100x100) where WebKit ends up 20-50% slower than Chrome and 
Minefield. In these tests Minefield edges out Chrome but not by much.

I found that 90% of the time was spent rendering the false-color thermal map graphics.

Suggestions for how to speed this up would be great.

I created an initial port of our Java Energy2D application running in JavaScript. The backing model is doing a thermal 
simulation of conductivity, convection, and radiation with 10,000 cells.


The JavaScript implementation uses JavaScript Typed Arrays so it only works with browsers that supports WebGL (Chrome 9, recent 
FireFox betas, and WebKit nightlies).

The original Java version of Energy2D can be seen here: http://energy.concord.org/energy2d/index.html

The JavaScript simulation model starts with a fixed high-temperature spot in the middle.

The basic model simulation space is a 100x100 grid, 10,000 cells the same as the Java version of Energy2D.

The JavaScript code is here: https://github.com/stepheneb/seasons/blob/master/earth/model2d.js

I'm getting about 4 model iterations/s on Chrome and FF betas, and about 3 on WebKit/Safari.

I wondered how much of the time was doing graphics and how much was running the model ... turns out a huge bottleneck is 
rendering the graphics.

The demo page renders the false-color thermal map with one of two techniques: using HTML5 Canvas, or stuffing 10,000 styled 
divs using innerHTML. I was surprised when the two methods ended up practically equivalent in time.

I'd like to find a much quicker way to render the graphics ... perhaps using WebGL.

I'm very impressed at how fast the model calculation runs.

My tests below run the model for 15s on my MacOS X 10.6.6 PowerBook Pro with a 2.66 GHz Intel Core i7.

Rendering to both the canvas visualization and the table of data:

Browser                            model steps      model steps/s
Chrome v9.0.597.102                  59              3.9
Minefield 4.0b12pre (2011-02-16)     60              4.0
WebKit v5.0.3 (6533.19.4, r78685)    48              3.2

Rendering just to the canvas visualization:

Browser                            model steps      model steps/s
Chrome v9.0.597.102                  68              4.5
Minefield 4.0b12pre (2011-02-16)     84              5.6
WebKit v5.0.3 (6533.19.4, r78685)    64              4.3

With rendering to the canvas and the table of data disabled:

Browser                            model steps      model steps/s
Chrome v9.0.597.102                 489             32.6
Minefield 4.0b12pre (2011-02-16)    507             33.8
WebKit v5.0.3 (6533.19.4, r78685)   220             14.7

What is speeding this up is the use of JavaScript Typed Arrays:


This capability is associated with browsers that have implemented WebGL but none of the JavaScript Energy2D code is actually 
running on the GPU. The speedup is because of optimizations the JavaScript engines can make with math when working with fixed 
length arrays and one kind of number.

You are currently subscribed to [email protected]
To unsubscribe, send an email to [email protected] with
the following command in the body of your email:
unsubscribe public_webgl

More information about the public_webgl mailing list