GLGE :WebGL for the lazy

Originally soft shadows in GLGE where implemented using PCF (Percentage Closer Filter) but the results were generally noisy and/or slow. As a result I thought I’d try implementing variance shadow maps in webgl. This technique is commonly used for soft shadows and has greatly improved the quality of shadows produced by GLGE. I’ve put together an example to demonstrate the new shadows:

The Demo

Quick Explanation of Variance Shadow Maps in WebGL

Variance shadow maps don’t use the depth to directly determine occlusion but instead represent a distribution of depths using the mean and variance. These can both be calculated over a region using a split kernel to sum the depth and depth squared. You can then obtain the mean and variance from these values and calculate the probability of occlusion at a given depth. The single biggest advantage of this technique is that it can be used with hardware filtering allowing you to get away with smaller shadow buffers without the resulting blockiness.

Using this technique in webgl was made difficult by the lack of a suitable texture format. GLGE gets round the issue by using an RGBA texture, and encoding the sum of depths in the R and G channels and the sum of depth² in the B and A channels. This gives 16 bits for each value which has proved to be enough to produce a good results.

The biggest downside to this technique is light leakage (areas lit when they should be in shadow). This can sometimes happen when there are multiple occluders and the assumptions made about the distribution of depths don’t hold up. However, it can be greatly reduced by darkening the shadow penumbra and/or reducing the size of the blur.

Using in GLGE

The addition of variance shadow maps has led to the addition of two new configuration options for light sources, these are:
Light.setSpotSoftness(value); // Blur size in pixels
Light.getSpotSoftDistance(value); // Value between 0 and 1 the higher the value the darker the penumbra
Adjusting the second option is useful for eliminating light leakage, the higher the value the less things will leak.

Currently only spotlights are using the new variance shadow maps. I’ll hopefully add to directional lights at some point soon.

I finally have a nice simple implementation of vehicle physics working in GLGE. It’s not using the vehicle classes directly from jiglibflash, as they proved to be very difficult to get working correctly. Instead, it’s a new model which relies on the lower level jiblib classes. It’s slightly simpler than the original jiglibflash version to making things easier to tweak. Adding a new vehicle in GLGE is simply a matter of defining the car class, adding the wheels and then attaching the objects that are to represent them ie:

Or alternatively if you’d prefer to use the API:

In addition to car physics I’ve also added some support for fallback materials. This allows a material to be specified which will be used if the original material fails to work on a particular machine (eg, failing to compile because of too many varyings).

I’ve published a simple demo of vehicle physics in the github repo demonstrating it’s use, but I’ve also put together a more advanced demo to show what can be achieved with only a little effort:

Live Demo of Vehicle Physics

In case you are currently lacking a WebGL browser, here’s the video: