I'm currently working on generating a Minecraft-like chunk using BufferGeometry and predefined data. My main issue lies in efficiently lighting up this object.
My current setup involves using a MeshLambertMaterial
along with a DirectionalLight
to cast shadows on voxels not directly in the light's view. However, due to the large terrain size, I am encountering problems with the shadow map being too large and causing glitchy artifacts in the shadows.
Below is the code snippet I am using to add 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 );
}
Here's an example of my 'chunk': http://jsfiddle.net/9sSyz/4/
Take a look at this 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 am looking for a more scalable solution to create the illusion of a shadow. One idea could be to adjust vertex colors based on their visibility to the light source. It doesn't have to be as precise as the current shadow implementation, so changing the vertex colors to simulate blocky shadows might suffice.
Any advice or help in this matter would be greatly appreciated. Thank you.