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
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.
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:
too could be moved into the shaders.
- Our textures are basic RGBA arrays. This is, in a way, cheating: the original NetLogo
model used a “heat” variable then only at the last converted it into colors. I’d like to see if
I could use non-color textures (single floats, say) which are treated as variables which are
then converted into colors in the texture program.