Skip to content

Babylon.js Lights — Illuminating Your 3D Scene

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about Babylon.js Lights. We cover key concepts, practical examples, and best practices to help you master this topic.

Babylon.js lights illuminate 3D scenes with point, directional, spot, and hemispheric light types, each with configurable intensity, color, and shadow casting.

What You'll Learn

By the end of this guide, you will set up hemispheric, point, directional, and spot lights, configure light falloff and range, cast shadows with shadow generators, use multiple lights, and optimize light performance.

Hemispheric Light

var hemi = new BABYLON.HemisphericLight('hemi', new BABYLON.Vector3(0, 1, 0), scene);
hemi.intensity = 0.7;
hemi.diffuse = new BABYLON.Color3(1, 0.9, 0.8);
hemi.groundColor = new BABYLON.Color3(0.2, 0.2, 0.3);

Point Light

var point = new BABYLON.PointLight('point', new BABYLON.Vector3(2, 3, 2), scene);
point.intensity = 1.5;
point.range = 10;
point.diffuse = new BABYLON.Color3(1, 0.6, 0.3);

Directional Light

var dir = new BABYLON.DirectionalLight('dir', new BABYLON.Vector3(-1, -2, -1), scene);
dir.intensity = 1.0;
dir.position = new BABYLON.Vector3(5, 10, 5);

Shadow Map

var shadowGen = new BABYLON.ShadowGenerator(1024, dir);
shadowGen.useBlurExponentialShadowMap = true;
shadowGen.setDarkness(0.3);

var mesh = BABYLON.MeshBuilder.CreateBox('box', { size: 2 }, scene);
mesh.receiveShadows = true;
shadowGen.addShadowCaster(mesh);

Common Mistakes

1. Too Many Lights

Each light adds rendering passes. Use 3-4 lights maximum for real-time performance.

2. Light Range Too Small

PointLight with range < distance to objects does not illuminate them. Set range appropriately.

3. Shadows Not Appearing

Mesh must have receiveShadows = true. Shadow casting mesh must be added via addShadowCaster.

4. Hemispheric Light Position

Hemispheric light direction matters, not position. It simulates skylight from a hemisphere.

5. Shadow Map Resolution Too Low

Shadow map at 256 resolution looks pixelated. Use 1024 or 2048 for quality shadows.

Practice Questions

Q1: What light type simulates ambient sky? A: HemisphericLight with diffuse and groundColor.

Q2: How do you cast shadows? A: Create a ShadowGenerator with a directional or spot light.

Q3: How do you control light falloff? A: Set light.range for point and spot lights.

Q4: What is the maximum recommended number of lights? A: 3-4 for real-time performance. More need deferred rendering.

Q5: How do you animate a light? A: Animate light.position or light.intensity with BABYLON.Animation.

Challenge: Build a room scene with a flickering point light (candle) and a directional light (window). Add soft shadows.

FAQ

Does Babylon.js support baked lighting?

Yes. Use lightmaps or pre-rendered textures for static lighting.

Can I use HDR lighting?

Yes. Babylon.js supports HDR environment lighting via cube textures.

How do I make a light blink?

Animate light.intensity between 0 and max over time.

What is the difference between diffuse and specular?

Diffuse is the base color. Specular creates highlights. Set both on the light.

Can lights cast colored shadows?

Yes. Set light.diffuse color. Shadows take on the light color.

Try It Yourself

Build a scene with multiple light types.

<!DOCTYPE html>
<html>
<head>
    <title>Babylon.js Lights</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Lighting Demo</h2>
<canvas id="renderCanvas" style="width:100%;height:400px;border-radius:8px;"></canvas>
<script>
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);

var camera = new BABYLON.ArcRotateCamera('camera', -Math.PI/2, Math.PI/3, 8, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

var hemi = new BABYLON.HemisphericLight('hemi', new BABYLON.Vector3(0, 1, 0), scene);
hemi.intensity = 0.4;

var point = new BABYLON.PointLight('point', new BABYLON.Vector3(2, 1, 2), scene);
point.intensity = 1.2;
point.range = 5;

var sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 1 }, scene);
sphere.position.x = -2;
var mat = new BABYLON.StandardMaterial('mat', scene);
mat.diffuseColor = new BABYLON.Color3(1, 0.4, 0.2);
sphere.material = mat;

BABYLON.MeshBuilder.CreateGround('ground', { width: 8, height: 8 }, scene);

// Animate light
scene.registerBeforeRender(function() {
    point.position.x = Math.sin(Date.now() * 0.002) * 2;
    point.position.z = Math.cos(Date.now() * 0.002) * 2;
});

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

What's Next

Create custom shaders.

Shaders — Custom GLSL shaders. Post Process — Post-processing effects.

← Previous Babylon.js Cameras — Viewpoint and Navigation Controls Next → Babylon.js Shaders — Custom GLSL Shader Programming

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Babylonjs