Efficient way to light up/cast shadows on a voxel terrain

Question

I'm using a BufferGeometry and some predefined data to create an object similar to a Minecraft chunk (made of voxels and containing cave-like structures). I'm having a problem lighting up this object efficently.

At the moment I'm using a MeshLambertMaterial and a DirectionalLight which enables me to cast shadows on voxels not in view of the light, however this isn't efficient to use for a large terrain because it requires a very large shadow map and will often cause glitchy shadow artifacts as a result.

Here's the code I'm using to add the indices and vertices to the BufferGeometry:

// Add indices to BufferGeometry
for ( var i = 0; i < section.indices.length; i ++ ) {
    var j = i * 3;
    var q = section.indices[i];

    indices[ j ]     = q[0] % chunkSize;
    indices[ j + 1 ] = q[1] % chunkSize;
    indices[ j + 2 ] = q[2] % chunkSize;
}

// Add vertices to BufferGeometry
for ( var i = 0; i < section.vertices.length; i ++ ) {
    var q = section.vertices[i];

    // There's 1 color for every 4 vertices (square)
    var hexColor = section.colors[i / 4];

    addVertex( i, q[0], q[1], q[2], hexColor );
}

And my 'chunk' example: http://jsfiddle.net/9sSyz/4/

A screenshot:

If I were to remove the shadows from my example, all voxels on the correct side would be lit up even if another voxel obstructed the light. I just need another scalable way to give the illusion of a shadow. Perhaps by changing vertex colors if not in view of the light? It doesn't have to be as accurate as the current shadow implementation so changing the vertex colors (to give a blocky vertex-bound shadow) would be enough.

Would appreciate any help or advice. Thanks.

Answer 1

Generally, if you have large terrains, the idea is to split the scene into more cascades and each cascade has its own shadow map. Technique is called CSM - cascaded shadow maps. Problem is, I haven't heard of an webGL example that implements this technique. CSMs are used on dynamic scenes. But I'm not sure how easy would be to implement this with Three.js.

Second option is adding ambient occlusion, as suggested by WestLagnley, but it's just an occlusion, not a shadow. Results are very different.

Third option, if your scene is mostly static - baked shadows. So, preprocessed textures that you simply apply to the terrain etc. To support dynamic objects, just render their shadow maps and apply those to some geometry that just mimics shadowed area (perhaps, a plane that hovers slightly above ground and receives the shadow etc).

Any combination of the techniques mentioned is also an option.

P.S. Could you also supply a screenshot, fiddles fail to load.