Sec3 Is a WebGL engine written in JavaScript by myself and Alex Miller. It provides forward and deferred rendering modes, along with wrapping up UI creation, shader management, and buffer management.  Some things that were especially fun to work on:

Gpu Particles

Sec3 supports up to four million particles at a time on my 2012 macbook pro. They are simulated on the gpu using webgl shaders, and rendered with shadow mapping and and a quick translucency approximation. This demo shows a simple n-body simulation in which only a small fraction of the particles fully interact with each other. See a live demo here, or check out some videos below.

Lighting and shadow maps

Forward rendering supports up to ten lights of various types.  We were able to achieve this without rendering the scene geometry more than once with a procedurally generated shader, which can be dynamically recompiled if necessary to support changing numbers or types of lights.  Recompilation will drop half a second's worth of frames, but comes at no other penalty.  The engine also supports cascading shadow maps with up to 6 cascades and depth based lookup, along with straightforward percentage closer filtering.  

a demonstration of the webgl engine written by myself and Alex Miller. All eight lights are forward shaded and shadowMapped in real time.


We implemented a depth-of-field effect based on this cool GPU gems article. It works by interpolating between several different blur radii based on a circle of confusion value that is itself blurred at the edges of foreground objects to produce realistic bleeding effects. To squeeze out extra blur cheaply, the foreground is also down-sampled before blurring.

depth of field post processing effect in the webgl engine written by myself and Alex Miller