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.

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:

var myModel=new GLGE.MD2;
myModel.setSrc({path to md2});
myModel.setMaterial({GLGE Material});
scene.addObject(MyModel);

and to animate:
myModel.setMD2Animation({animation name});

Live demo

Video – for some reason it’s a bit choppy :

As a consequence GLGE now has a sky shader system. Which allows for procedural skies or ordinary sky boxes; in addition, there are two new fog options FOG_SKYLINEAR and FOG_SKYQUADRATIC. These two new fog options allow you to fade the far distance into the sky as apposed to a solid colour. This results in a more seamless transition from land to sky. There is still an issue when using it in combination with post processing effects but for general purpose use it’s very easy to set up and use. This is an early first attempt I have a few ideas for improvments that will hopefully come through at some point.

Live Demo

Video:

Live Demo

And for those who are lacking the GFX card needed or have yet to update their browser:

vec3 GLGE_Position(vec3 pos){
//code to update position here
}

then feed it into a GLGE object:
object.setVertexShaderInjection({GLSL code to add});

Expect more additions soon with regard to customizing the shaders. I’ve also added an optional emit pass to the 2dfilter class so you can now do cool glow effects Here’s a small demo showing off the new features:

Features Demo

In addition I’ve also been playing around with the idea of adding a dynamic hair effect to GLGE, I’m still just playing around at the moment. I’ve put together a fun demo to show where things are at, best viewed with sound

Play with the hair ball

Get GLGE v0.8

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:

Collada Support

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:

View Frankie Demo

Video:

Shadows fixed and improved

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:

View Shadow Demo

Video:

Other features and news

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.

Communications

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
EMAIL: glge@googlegroups.com

Other Projects

A number of projects have popped up using GLGE as there back end:

1. GammaJS Gamma is a new Javascript library which can be used to create 2.5D platform games for a web browser using the power of HTML, JavaScript, CSS and WebGL. It’s great that the original reason for GLGE has been realised
2. 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.
3. OurBricks – I’m loving this one, it’s going to be so useful!
4. SteamCube – My entry to the Moz Game On 2010 comp

If you are using GLGE for a project please drop me a line and I’ll see about posting a link up on this blog.

There is another little webgl project I’ve spent some time working on in the last couple of months but more details of that will follow later

View source in the demo below for more verbose instruction on how it work.

Live Demo

Video:

Live Demo

myGroup.setLocX(10).setLocY(10).addObject(object1).addObject(object2);

Taking it one step further I’ve also added a quick notatation so you need even less code, so the example above can be written as:

myGroup._({LocX:10,LocY:10},object1,object2);

As well as that I’ve also got GLGE working in the latest nightlies of chromium and firefox, I’ve not been able to check webkit so shout if there is an issue. Be warned this may have broken things in older browsers

2D Filters

GLGE now has the ability to apply 2D post processing filters to 3D scene, at the moment you need to write them in GLSL but I will try and build some common ones in(blur,dof,SSAO,bloom etc) before the next release. I’ve put together a demo terrain with some God rays and DOF:

Play Live Demo

Video Textures

GLGE can now apply a video as a texture, although the webgl video texture option seems to still be missing in webkit I’ve worked around it for now by taking the video via the canvas so it should work cross browser. Although the demo is only using ogg theora so I’m not sure about safari?.

Play Live Demo

Canvas Textures

As well as video GLGE can now display 2D canvas as a texture, in addition I’ve added texture coordinates to the ray query so you can interact with the canvas as you would normally. The demo below demostrates this by allowing you to draw onto the canvas that is being mapped to the cube.

Play Live Demo