WebGL NetLogo-Like 3G Demo

Oops, your browser does not support the canvas element.

Controls To rotate, use mouse button and drag.

To zoom, use mouse scrolling.



Patches: 100

Turtles: 25



Diffusion Rate: 50 %

Turtle Heat: 50 %

Turtle Speed: 1 px

Red Green Blue Yellow Violet Aqua

Notes

This is the first of two experiments looking at the use of openGL/WebGL for NetLogo-like modeling. Our interest is two-fold:

Pushing JavaScript to large scale computing

Migrating to greater GPU Shader Language

For our experiment, we use a model based on NetLogo’s Diffusion Graphics sample model.

This version of the experiment takes the most standard openGL approach possible: GLSL Attribute buffers for most of the Shader interactions, and JavaScript for all but the standard matrix pipeline computations. The only sophistication is use of a “z” uniform to let all the 2D objects have their own z plane.

The program uses two high level JavaScript objects, patches and turtles, which in turn contain arrays of individual patch and turtle objects. Each turtle and patch contain its shape, x,y position and color. Turtles also have a heading while the patches have a heat value. The higher level patches and turtles object contain a count of their objects along with the WebGL Attribute buffers they use.

The program is not object oriented in the usual sense but typical javascript. It is purposely simple so that most of it has a chance of migrating to the shaders.

Each frame does a LOT of processing in the JavaScript “step” function:

Re-creates each turtle triangle by its heading and x,y loc.

Drops heat onto the patch directly under it

Performs a 2-pass diffusion of the patch heat.

The Diffusion Rate, Turtle Heat & Speed sliders are read every step so they can be changed during run-time. (use setup button to change patches and turtles)

In terms of computation, this involves:

There are 15,625 patches, with 93,750 vertices and colors initially so that’s a LOT of processing for JavaScript.

Each step uploads all the patch colors (1,125,000 bytes) and all turtle triangles (24,000 bytes) by re-binding those two attribute buffers.

Upping the turtles to 1000 results in acceptable performance. Each step re-calculates the turtles position and heading: 3,000 rotations and translations as well as determining the patch they are over, transferring heat to the patch.

The diffusion process performs two passes over the 15,625 patches, and calculates the diffusion with the 8 neighbor patches, for a total of 140,625 operations.

I’m seriously amazed how well it performs, given the large amount of computation done by JavaScript and the relatively large GPU Attribute changes each step.

The second model moves to much more computing done in the GPU.