ES2, allowing for the use of hardware accelerated 2D/3D applications
without having to download any plugins.
The aim of GLGE is to mask the involved nature of WebGL from the web
developer, who can then spend his/her time creating richer content for
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:
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 depth2 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.
Since I’ve not had a release in ages as I never think the time is right and things are pretty together right now I’m also announcing the release of GLGE 0.8, skipping a few to reflect the number of optimisations and additions that have been made since the last release:
As it’s been awhile since I last posted here is a brief overview of what’s been going on in the world of GLGE in the last couple of months:
Skeletal animation exports from blender 2.5x using the collada are now working quite well, although there are still a few bugs in certain animations, but I’m working on it. Collada support has also come a long way with a million workarounds and fixes for the various exports; please, if you have a file you’re having issues with let me know. I’ve got a demo using some of the assets from yofrankie exported using the blender 2.55 exporter. I meant to post this before christmas but have been lazily putting off, but here is is now:
Shadows have been broken for a while so they are now upto the webgl spec. Plus, there was a bug in the shadow code which was reducing the accuracy of the shadows which has now been fixed. Soft shadows are also working again but are very slow still and I’m sure there is a better way of implementing so it’s still subject to change. Demo showing off the new fixed shadows in GLGE:
Culling has been added as well as much improved state sorting and other optimisations resulting in much faster rendering. There has also been a major code tidy up and a new build system based on nodejs and using the excellent uglifyjs has been added. The document generation is now included in the build process using node-jsdoc-toolkit, so hopefully documents going out of sync with the source will be a thing of the past.
I’ve not really been keeping up with the forum and it’s been causing issues for users posing so I’m adding a couple more ways to get support for GLGE:
IRC: #glge on irc.freenode.net
A number of projects have popped up using GLGE as there back end:
KataSpace – a simple web-based application built on the Sirikata platform. Utilizing many new HTML5 features, WebGL, and Sirikata’s server, KataSpace provides a shared space where users can chat and interact with each other, right from their browsers.
OurBricks – I’m loving this one, it’s going to be so useful!