Introduction to Babylon.js: A Powerful Web Game Engine, Lighting

Lighting

Lights illuminate the objects in your scene, creating depth, mood, and visual realism. Without lights, your scene would appear completely dark (unless materials have emissive properties). Babylon.js provides several light types that simulate different real-world lighting conditions.

Light Types

Babylon.js offers four primary light types, each simulating different real-world lighting scenarios:

HemisphericLight: Simulates ambient environment lighting (like outdoor light from the sky). Ideal for general scene illumination.
PointLight: Emits light in all directions from a single point (like a light bulb). Intensity decreases with distance.
DirectionalLight: Emits parallel rays in a specific direction (like sunlight). Position doesn't matter, only direction.
SpotLight: Emits a cone of light from a point in a direction (like a flashlight or stage spotlight).

HemisphericLight

The simplest light type, perfect for simulating ambient outdoor lighting. It provides soft, even illumination based on the surface normal direction:

// Create a hemispheric light pointing upward
const light = new BABYLON.HemisphericLight("hemiLight",
    new BABYLON.Vector3(0, 1, 0), // Direction (up)
    scene
);

// Configure colors
light.diffuse = new BABYLON.Color3(1, 1, 1);    // Color of surfaces facing the light
light.specular = new BABYLON.Color3(0.5, 0.5, 0.5); // Color of specular highlights
light.groundColor = new BABYLON.Color3(0.2, 0.2, 0.3); // Color of surfaces facing away

// Adjust intensity
light.intensity = 0.8;

PointLight

Emits light in all directions from a single point, like a light bulb:

// Create a point light
const pointLight = new BABYLON.PointLight("pointLight",
    new BABYLON.Vector3(0, 5, 0), // Position
    scene
);

pointLight.diffuse = new BABYLON.Color3(1, 0.9, 0.7); // Warm white
pointLight.specular = new BABYLON.Color3(1, 1, 1);
pointLight.intensity = 1.0;

// Light range (how far the light reaches)
pointLight.range = 50;

DirectionalLight

Emits parallel rays in a specific direction, simulating distant light sources like the sun:

// Create a directional light (like sunlight)
const dirLight = new BABYLON.DirectionalLight("dirLight",
    new BABYLON.Vector3(-1, -2, -1), // Direction the light travels
    scene
);

dirLight.diffuse = new BABYLON.Color3(1, 1, 0.9); // Slightly warm
dirLight.intensity = 0.8;

// Position matters for shadow generation (not for lighting direction)
dirLight.position = new BABYLON.Vector3(20, 40, 20);

SpotLight

Emits a cone of light from a point, like a flashlight or stage spotlight:

// Create a spotlight
const spotLight = new BABYLON.SpotLight("spotLight",
    new BABYLON.Vector3(0, 10, 0),     // Position
    new BABYLON.Vector3(0, -1, 0),     // Direction (pointing down)
    Math.PI / 3,                        // Cone angle in radians
    2,                                  // Exponent (falloff within the cone)
    scene
);

spotLight.diffuse = new BABYLON.Color3(1, 1, 1);
spotLight.intensity = 1.5;

Shadows

Shadows add depth and realism to your scene. In Babylon.js, shadows are generated by a ShadowGenerator attached to a light source:

// Create a shadow generator attached to the directional light
const shadowGenerator = new BABYLON.ShadowGenerator(1024, dirLight);

// Add meshes that cast shadows
shadowGenerator.addShadowCaster(box);
shadowGenerator.addShadowCaster(sphere);

// Enable soft shadows
shadowGenerator.usePercentageCloserFiltering = true; // PCF soft shadows
// Or use: shadowGenerator.useBlurExponentialShadowMap = true;

// Enable shadow receiving on ground
ground.receiveShadows = true;

// Shadow quality settings
shadowGenerator.filteringQuality = BABYLON.ShadowGenerator.QUALITY_MEDIUM;
shadowGenerator.bias = 0.001; // Prevents shadow acne artifacts

Light Management

Tips for managing lights effectively in your scene:

Performance: Babylon.js supports up to 4 simultaneous lights per mesh by default. You can increase this with scene.maxSimultaneousLights but it impacts performance.
Include/Exclude Lists: Use light.includedOnlyMeshes or light.excludedMeshes to control which meshes a light affects.
Light Intensity: Use light.intensity to control brightness. Values above 1.0 create overbright effects.
Falloff: Point and spot lights support light.falloffType for realistic light attenuation.
Light Gizmos: Use the Inspector to visualize and adjust light positions and properties in real-time.

// Limit which meshes a light affects
pointLight.includedOnlyMeshes = [sphere, box]; // Only lights these meshes

// Or exclude specific meshes
dirLight.excludedMeshes = [uiPlane]; // Doesn't light the UI

// Increase max simultaneous lights (default is 4)
const material = new BABYLON.StandardMaterial("mat", scene);
material.maxSimultaneousLights = 6;