WebGL Engine

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.

 

This is a short demo of the gpu accellerated particle system that I wrote with Alex Miller for our course on real time graphics. Coded in javascript and webgl, this demo shows off over a million particles rendered and simulated in real time on the gpu, with shadow mapping and gravitational interactions.

 
 
 

Particles written for webgl with Alex Miller as part of our two-man gpu class.

 
 

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.

 

A cascaded shadows demo from the engine I worked on with Alex Miller.

 
 

Post-Processing

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.