0%

light

Posted on Edited on In
Symbols count in article: 1.2k Reading time ≈ 4 mins.

The default number of lights allowed is four but this can be increased.

There are four types of lights that can be used with a range of lighting properties.

  • The Point Light - think light bulb.
  • The Directional Light - think planet lit by a distant sun.
  • The Spot Light - think of a focused beam of light.
  • The Hemispheric Light - think of the ambient light.

Color properties for all lights include emissive, diffuse and specular.

Overlapping lights will interact as you would expect with the overlap of red, green and blue producing white light. Every light can be switched on or off and when on its intensity can be set with a value from 0 to 1.

All meshes allow light to pass through them unless shadow generation is activated.

Types of Lights

Point Light

A point light is a light defined by an unique point in world space. The light is emitted in every direction from this point. A good example of a point light is a standard light bulb.

1
const light = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(1, 10, 1), scene);

Directional Light

A directional light is defined by a direction. The light is emitted from everywhere in the specified direction, and has an infinite range.

1
const light = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -1, 0), scene);

Spot Light

A spot light is defined by a position, a direction, an angle, and an exponent. These values define a cone of light starting from the position, emitting toward the direction.

The angle, in radians, defines the size (field of illumination) of the spotlight’s conical beam , and the exponent defines the speed of the decay of the light with distance (reach).

1
const light = new BABYLON.SpotLight("spotLight", new BABYLON.Vector3(0, 30, -10), new BABYLON.Vector3(0, -1, 0), Math.PI / 3, 2, scene);

Hemispheric Light

A hemispheric light is an easy way to simulate an ambient environment light. A hemispheric light is defined by a direction, usually ‘up’ towards the sky. However it is by setting the color properties that the full effect is achieved.

1
const light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), scene);

Color Properties

There are three properties of lights that affect color. Two of these diffuse and specular apply to all four types of light, the third, groundColor, only applies to an Hemispheric Light.

  1. Diffuse gives the basic color to an object;
  2. Specular produces a highlight color on an object.

Limitations

a single material can only handle a defined number simultaneous lights (by default this value is equal to 4 which means the first four enabled lights of the scene’s lights list). You can change this number with this code

1
2
const material = new BABYLON.StandardMaterial("mat", scene);
material.maxSimultaneousLights = 6;

On, Off or Dimmer

1
2
3
4
light.setEnabled(false); // off
light.setEnabled(true); // on
light.intensity = 0.5; // dimmer, default value is 1
light.intensity = 2.4; // brighter, default value is 1

For point and spot lights you can set how far the light reaches using the range property

1
light.range = 100;

Choosing Meshes to Light

1
2
light.excludedMeshes.push(someMesh)
light.includedOnlyMeshes.push(someMesh)

Shadows

Shadows are easy to generate using the Babylon.js ShadowGenerator. This function uses a shadow map: a map of your scene generated from the light’s point of view.

1
const shadowGenerator = new BABYLON.ShadowGenerator(1024, light);

The two parameters used by the shadow generator are: the size of the shadow map (which determines the shadow detail level), and which light is used for the shadow map’s computation.

Next, you have to define which shadows will be rendered:

1
shadowGenerator.getShadowMap().renderList.push(mesh);

And finally, you will have to define where the shadows will be displayed by setting a mesh parameter to true:

1
someMesh.receiveShadows = true

Soft shadows

If you want to go further, you can activate shadows filtering in order to create better looking shadows by removing the hard edges:

Possion sampling

1
shadowGenerator.usePoissonSampling = true;

If you set this one to true, Variance shadow maps will be disabled. This filter uses Poisson sampling to soften shadows. The result is better, but slower.

Exponential shadow map

1
shadowGenerator.useExponentialShadowMap = true;

It is true by default, because it is useful to decrease the aliasing of the shadow. But if you want to reduce computation time, feel free to turn it off. You can also control how the exponential shadow map scales depth values by changing the shadowGenerator.depthScale. By default, the value is 50.0 but you may want to change it if the depth scale of your world (the distance between MinZ and MaxZ) is small.

1
shadowGenerator.depthScale = 25.0

Blur exponential shadow map

1
shadowGenerator.useBlurExponentialShadowMap = true;

Close exponential shadow map

1
shadowGenerator.useCloseExponentialShadowMap = true;

The Close Exponential Shadow Map is a way of doing exponential shadow map to deal with self-shadowing issues

Percentage Close Filtering

1
shadowGenerator.usePercentageCloserFiltering = true;

Transparent Objects shadows

For transparent objects to cast shadows, you must set the transparencyShadow property to true on the shadow generator:

Starting with Babylonjs v4.2, you can simulate soft transparent shadows for transparent objects. To do this, you need to set the enableSoftTransparentShadow property to true on the shadow generator:

Lights

Keep in mind that one shadow generator can only be used with one light. If you want to generate shadows from another light, then you will need to create another shadow generator.

Only point, directional and spot lights can cast shadows.

Point Lights

Point lights use cubemaps rendering

BlurExponentialShadowMap and CloseBlurExponentialShadowMap are not supported by point lights (mostly because blurring the six faces of the cubemap would be too expensive).

Spot lights

Spot lights use perspective projection to compute the shadow map.

Directional lights

Directional lights use orthogonal projection.

The light's position of directional light can determine where the shadows will appear, even though by defination, drectional light is emitted from everywhere in the specified direction, and has an infinite range.

The light position is set as being -light.direction at creation time

You can also set light.autoCalcShadowZBounds = true to compute automatically the best light.shadowMinZ and light.shadowMaxZ values for each frame. Tightening those values to best fit your scene improve the precision of the depth map, and consequently the shadow rendering. Be warned, however, that when using this parameter with PCF and PCSS you may miss some shadows because of the way those filtering technics are implemented. Note that light.autoUpdateExtends must be set to true for light.autoCalcShadowZBounds to work.

By default, the x and y extents of the light frustum (the position of the left/right/top/bottom planes of the frustum) are automatically computed by Babylon because light.autoUpdateExtends = true. You can set this property to false and set the frustum sizes manually by updating the orthoLeft, orthoRight, orthoTop and orthoBottom properties. You can use the shadowFrustumSize property instead if you want to set the frustum with a fixed size in all dimensions.

The values for the near/far planes are stored in shadowMinZ and shadowMaxZ, properties that you can change (as in the PG). You can also let Babylon compute them automatically by setting light.autoCalcShadowZBounds = true (false by default). Note that when Babylon computes the bounds automatically, it does so by taking into account only the objects that are shadow casters! That’s why if you activate it in the PG, you will see that the light frustum does not encompass the ground, which is not a shadow caster but only a receiver.