Table of Contents

• Introduction
• Lighting Setup
• Shadow Configuration
• Material Updates
• Cascaded Shadow Maps (CSM)
• Performance Considerations

Introduction

This document outlines the implementation of lighting and shadows in our voxel world project. We've focused on creating a visually appealing environment with soft, realistic shadows and a color scheme inspired by a provided example.

Lighting Setup

We've implemented a lighting system that combines ambient light with directional lights to create depth and atmosphere in the scene.

Main Components:

1. Scene Background
   • Color: #454e61
   • Sets the overall tone for the environment
2. Ambient Light
   • Color: White (0xffffff)
   • Intensity: 1.5
   • Provides overall illumination to the scene
3. Main Directional Light (Sun)
   • Color: White (0xffffff)
   • Intensity: 1.5
   • Position: Normalized vector (-1, -1, -1) multiplied by 200
   • Casts shadows
4. Additional Directional Light
   • Color: Subtle blue (0x000020)
   • Intensity: 1.5
   • Position: Opposite to the main light
   • Adds depth and color variation

Implementation:

function setupLighting() {
    scene.background = new THREE.Color('#454e61');

    const ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
    directionalLight.position.set(-1, -1, -1).normalize().multiplyScalar(200);
    directionalLight.castShadow = true;
    // Shadow configuration (see Shadow Configuration section)
    scene.add(directionalLight);

    const additionalDirectionalLight = new THREE.DirectionalLight(0x000020, 1.5);
    additionalDirectionalLight.position.set(-1, -1, -1).normalize().multiplyScalar(-200);
    scene.add(additionalDirectionalLight);
}

Shadow Configuration

We've optimized shadow settings for the main directional light to achieve soft, realistic shadows.