WebGL NetLogo-Like 3G Demo

Oops, your browser does not support the canvas element.


Our first model performed most of the computation in Javascript, using a single program with the simplest possible WebGL shaders.

In this model we move the majority of the computation to the shaders, using two programs and a Framebuffer Object (FBO) and two textures. This shifts much of the burden from Javascript to the GPU.

Program Structure

The overall structure remains the same as the initial model with one exception: all of the patch manipulation is converted to a pair of texture objects used by the single FBO.

This requires the addition of a new GLSL program with a pair of shaders that display a texture using parameters to manage whether or not a convolution is executed to perform the diffusion.

The FBO is used twice during each frame. It first adds the heat to the patches by displaying the turtle positions as points. It then swaps textures and does a texture image operation onto the first texture, performing a 9-cell convolution.

Given a value for Diffusion Rate “d” from a slider, the convolution filter used looks like:


where D = (1-d) and n = d/8. I.e. the current fragment is colored with (1-d)% of the current color, spreading the remaining amount of the color to the 8 adjacent neighbors.

Then the program reverts to the default Framebuffer .. the display, then draws the texture (patches), the turtles and the white boarder around the patches.

The Min Series

WebGL is still in its infancy and very poorly documented. There are no WebGL GPU debuggers yet, and programming becomes experimental, testing each of the new features I needed.

The first program which was Javascript intensive was far, far easier, simply because the shaders were the usual trivial pair which have Color/Position Attribute pairs along with a matrix.

When converting the first to the second, I could not simply make the changes described above. Instead, I made a new series of programs I call the “min” series, each one testing a single new facet of WebGL and GLSL. I’ve included these with the two models to illustrate this approach.

I’ll not go into detail here as to the order they were created, but I’ll note I made two forms of each: one using the basic WebGL operations with very little in terms of help from the glx library I built over the course of the class. The second form ends in a “+” symbol, indicating it uses much more of the glx library as I moved very solid code fragments from the min code samples into the glx library itself.

Another feature added to the min series was use of a timer function “timeit(n,f)” which would run a function “f()” a total of “n” times and report the average running time. This was necessary, again, due to poor documentation and yielded several surprising results.

Finally, the resulting min series was converted into the netlogo1.html in three steps: netlogo-1.html, netlogo-2.html, and netlogo-3.html. This may appear extreme but it was the only way I could easily make sure a given change in the program would not cause havoc. These three steps basically were a transfer from the min series to the final project.


After getting both models to work, the performance difference was dramatic! Not only was the framerate brought to the animation upper limit (near 60fps), the CPU usage was halved.

There are two future investigations that suggest themselves: