BabylonJS - Lights

Babylon.js - Lights

Lights are essential for illuminating your 3D scene and making your meshes visible. Without lights, most objects would appear black. Babylon.js provides several types of lights, each simulating different real-world lighting scenarios and offering various levels of control and performance characteristics.

Lights interact with materials to determine the final color of each pixel on a mesh. Key properties influenced by lights include diffuse color (the base color under direct light) and specular color (the color of highlights on shiny surfaces). PBR materials interact with lights in a more physically accurate way, considering factors like roughness and metalness.

Types of Lights

Babylon.js offers four main types of lights:

1. Hemispheric Light (BABYLON.HemisphericLight)

This light simulates ambient outdoor lighting, like the sky. It doesn’t come from a specific point but illuminates the entire scene based on a direction (usually pointing straight up). It has three color properties:

• diffuse: Color of light coming from the specified direction (like the sky).
• specular: Color of specular highlights (often less relevant for hemispheric lights).
• groundColor: Color of light reflected from below (opposite the main direction, like light bouncing off the ground).

It’s great for providing basic, inexpensive ambient illumination to prevent completely black shadows.

const light = new BABYLON.HemisphericLight(
    "hemiLight",
    new BABYLON.Vector3(0, 1, 0), // Direction (0,1,0 means light comes from above)
    scene
);

light.intensity = 0.7; // Overall brightness
light.diffuse = new BABYLON.Color3(0.8, 0.85, 1.0); // Sky color (light blue)
light.groundColor = new BABYLON.Color3(0.4, 0.35, 0.3); // Ground bounce color (brownish)
light.specular = new BABYLON.Color3(0.5, 0.5, 0.5); // Subtle specular

2. Point Light (BABYLON.PointLight)

A point light emanates light equally in all directions from a single point in space, like a bare light bulb. Its intensity diminishes with distance (attenuation).

const light = new BABYLON.PointLight(
    "pointLight",
    new BABYLON.Vector3(5, 3, -2), // Position of the light source
    scene
);

light.intensity = 0.8;
light.diffuse = new BABYLON.Color3(1, 0.8, 0.5); // Warm light color
light.specular = new BABYLON.Color3(1, 1, 1); // White highlights

// Optional: Control how light intensity falls off with distance
// light.range = 20; // Maximum distance light travels

3. Directional Light (BABYLON.DirectionalLight)

Simulates a distant light source, like the sun, where light rays are effectively parallel. It’s defined by a direction, not a position. All objects are lit equally regardless of their distance from the ‘source’. Directional lights are excellent for casting shadows.

const light = new BABYLON.DirectionalLight(
    "dirLight",
    new BABYLON.Vector3(-0.5, -1, 0.3), // Direction the light is pointing
    scene
);

light.intensity = 1.0;
light.diffuse = new BABYLON.Color3(1, 1, 0.9); // Sunlight color
light.specular = new BABYLON.Color3(0.2, 0.2, 0.1);

// To enable shadows, you need a ShadowGenerator
const shadowGenerator = new BABYLON.ShadowGenerator(1024, light); // Map size, light source
// Add meshes to cast shadows
// shadowGenerator.addShadowCaster(meshThatCastsShadow);
// Ensure receiving meshes have receiveShadows = true
// groundMesh.receiveShadows = true;

4. Spot Light (BABYLON.SpotLight)

A spot light emits light from a point in a specific direction, confined to a cone shape, like a flashlight or stage spotlight. It’s defined by position, direction, angle (width of the cone), and exponent (how concentrated the light is).

const light = new BABYLON.SpotLight(
    "spotLight",
    new BABYLON.Vector3(2, 5, -3),     // Position of the spotlight
    new BABYLON.Vector3(-0.2, -1, 0.3), // Direction the light points
    Math.PI / 3,                      // Angle of the cone (in radians)
    2,                                // Exponent (concentration factor)
    scene
);

light.intensity = 1.2;
light.diffuse = new BABYLON.Color3(0.5, 1, 0.5); // Green light
light.specular = new BABYLON.Color3(1, 1, 1);

Common Light Properties

• intensity: Overall brightness multiplier (default 1.0).
• diffuse: The main color of the light affecting diffuse reflection (Vector3).
• specular: The color of the light affecting specular highlights (Vector3).
• setEnabled(boolean): Turns the light on or off.
• range (PointLight, SpotLight): Maximum distance the light affects.
• shadowEnabled (Directional, Spot, Point): Flag indicating if the light can cast shadows (requires a ShadowGenerator).

Demo: Multiple Light Types

This demo shows a scene with a ground plane and a sphere, illuminated by a Hemispheric light for ambient fill, a Point light for localized warm light, and a Directional light potentially casting shadows (shadows not fully implemented in this basic example).

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Babylon.js - Light Types Demo</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <style>
        html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; }
        #renderCanvas { width: 100%; height: 100%; touch-action: none; }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script type="text/javascript">
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);

        const createScene = function () {
            const scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color4(0, 0, 0, 1.0); // Black background

            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2 * 1.5, Math.PI / 2.2, 25, new BABYLON.Vector3(0, 2, 0), scene);
            camera.attachControl(canvas, true);

            // --- Lights ---
            // 1. Ambient Fill Light
            const hemiLight = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 1, 0), scene);
            hemiLight.intensity = 0.3;
            hemiLight.groundColor = new BABYLON.Color3(0.1, 0.1, 0.1);
            hemiLight.diffuse = new BABYLON.Color3(0.3, 0.3, 0.4);

            // 2. Point Light (Warm)
            const pointLight = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(5, 5, -5), scene);
            pointLight.intensity = 0.8;
            pointLight.diffuse = new BABYLON.Color3(1, 0.7, 0.3);
            // Visualize the point light source
            const pointLightSphere = BABYLON.MeshBuilder.CreateSphere("plSphere", {diameter: 0.5}, scene);
            pointLightSphere.position = pointLight.position;
            const plMat = new BABYLON.StandardMaterial("plMat", scene);
            plMat.emissiveColor = pointLight.diffuse; // Make sphere glow with light color
            pointLightSphere.material = plMat;

            // 3. Directional Light (Cooler, potential shadow caster)
            const dirLight = new BABYLON.DirectionalLight("dirLight", new BABYLON.Vector3(-0.5, -0.8, 0.3), scene);
            dirLight.intensity = 0.6;
            dirLight.diffuse = new BABYLON.Color3(0.8, 0.9, 1.0);
            // Shadow setup would go here if needed
            // ----------------

            // --- Meshes ---
            const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 4, segments: 32 }, scene);
            sphere.position.y = 2;
            const sphereMat = new BABYLON.StandardMaterial("sphereMat", scene);
            sphereMat.diffuseColor = new BABYLON.Color3(0.8, 0.8, 0.8);
            sphereMat.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
            sphereMat.specularPower = 32;
            sphere.material = sphereMat;

            const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 20, height: 20 }, scene);
            const groundMat = new BABYLON.StandardMaterial("groundMat", scene);
            groundMat.diffuseColor = new BABYLON.Color3(0.4, 0.5, 0.4); // Greenish ground
            groundMat.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1);
            ground.material = groundMat;
            // ground.receiveShadows = true; // Needed if shadows were enabled
            // ----------------

            return scene;
        };

        const scene = createScene();
        engine.runRenderLoop(function () { scene.render(); });
        window.addEventListener("resize", function () { engine.resize(); });
    </script>
</body>
</html>

Output Description

This demo displays a gray sphere sitting on a greenish ground plane against a black background. The scene is lit by multiple sources: a dim, cool ambient light (Hemispheric), a brighter warm light originating from a visible glowing sphere (Point Light), and a slightly cool directional light coming from an angle. The interplay of these lights creates varying colors and highlights on the sphere and ground as you rotate the camera.

Lighting and PBR Materials

Physically Based Rendering (PBR) materials (PBRMaterial, PBRMetallicRoughnessMaterial, etc.) interact with lights more realistically. They often rely heavily on scene.environmentTexture (Image-Based Lighting) for ambient light and reflections, in addition to standard lights for direct illumination and shadows. When using PBR, the effect of HemisphericLight might be less pronounced or adjusted differently compared to its effect on StandardMaterial.