0%

environment

Posted on Edited on In
Symbols count in article: 773 Reading time ≈ 3 mins.

Introduction To Environment

clearColor

The ‘clearColor’ property on the scene object is the most rudimentary of environment properties/adjustments. Simply stated, this is how you change the background color of the scene. Here is how it is done:

1
scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);

This color and property is not used in any calculations for the final colors of mesh, materials, textures, or anything else. It is simply the background color of the scene. Easy.

ambientColor

1
scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);

Mainly, it is used in conjunction with a mesh’s StandardMaterial.ambientColor to determine a FINAL ambientColor for the mesh material.

When there is no scene.ambientColor, then StandardMaterial.ambientColor and StandardMaterial.ambientTexture will appear to do nothing.

Set a scene.ambientColor of some value, StandardMaterial.ambientColor/StandardMaterial.ambientTexture will become active on meshes where you have applied such.

By default, scene.ambientColor is set to Color3(0, 0, 0), which means there is no scene.ambientColor.

Fog

Fog is quite an advanced effect, but fog in Babylon.js has been simplified to the maximum. It’s now very easy to add fog to your scenes. First, we define the fog mode like this:

1
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
  • BABYLON.Scene.FOGMODE_NONE - default one, fog is deactivated.
  • BABYLON.Scene.FOGMODE_EXP - the fog density is following an exponential function.
  • BABYLON.Scene.FOGMODE_EXP2 - same that above but faster.
  • BABYLON.Scene.FOGMODE_LINEAR - the fog density is following a linear function.

If you choose the EXP, or EXP2 mode, then you can define the density option (default is 0.1):

1
scene.fogDensity = 0.01;

if you choose LINEAR mode, then you can define where fog starts and where fog ends:

1
2
scene.fogStart = 20.0;
scene.fogEnd = 60.0;

Finally, whatever the mode, you can specify the color of the fog (default is BABYLON.Color3(0.2, 0.2, 0.3)):

1
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);

Skyboxes

In Babylon.js, skyboxes typically use CubeTexture on a large cube.

The CubeTexture constructor takes a base URL and (by default) appends “_px.jpg”, “_nx.jpg”, “_py.jpg”, “_ny.jpg”, “_pz.jpg” and “_nz.jpg” to load the +x, -x, +y, -y, +z, and -z facing sides of the cube. (These suffixes may be customized if needed.)

CubeTexture images need to be .jpg format (unless the suffixes are customized) and square. For efficiency, use a power of 2 size, like 1024x1024.

Manual creation

1
2
3
4
const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 100.0 }, scene);
const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skybox.material = skyboxMaterial;

Next, we set the infiniteDistance property. This makes the skybox follow our camera’s position.

1
skybox.infiniteDistance = true;

Now we must remove all light reflections on our box (the sun doesn’t reflect on the sky!):

1
skyboxMaterial.disableLighting = true;

Next, we apply our special sky texture to it. This texture must have been prepared to be a skybox, in a dedicated directory, named “skybox” in our example:

1
2
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

In that /skybox directory, we must find 6 sky textures, one for each face of our box. Each image must be named per the corresponding face: “skybox_nx.jpg” (left), “skybox_ny.jpg” (down), “skybox_nz.jpg” (back), “skybox_px.jpg” (right), “skybox_py.jpg” (up), “skybox_pz.jpg” (front). The “_nx.jpg” is added to your path.

You can also use dds files to specify your skybox. These special files can contain all information required to setup a cube texture:

1
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("/assets/textures/SpecularHDR.dds", scene);

Final note, if you want your skybox to render behind everything else, set the skybox’s renderingGroupId to 0, and every other renderable object’s renderingGroupId greater than zero

1
2
3
4
skybox.renderingGroupId = 0;

// Some other mesh
myMesh.renderingGroupId = 1;

Automatic creation

1
2
envTexture = new BABYLON.CubeTexture("/assets/textures/SpecularHDR.dds", scene);
scene.createDefaultSkybox(envTexture, true/*use a PBRMaterial*/, 1000);

Background Materials

The background material is fully unlit (which means it can still show color even there is no light created in the scene) but can still receive shadows or be subject to image processing information. This makes it the best fit to use as a skybox or the material of ground.

1
let backgroundMaterial = new BABYLON.BackgroundMaterial("backgroundMaterial", scene);

Diffuse

The diffuse part is used to simply give a color to the mesh.

1
backgroundMaterial.diffuseTexture = new BABYLON.Texture("textures/grass.jpg", scene);

Shadows

The material is able to receive shadows despite being unlit. This is actually one of its strength making it really attractive for grounds. If you want to dim the amount of shadows, you can use the dedicated properties:

1
backgroundMaterial.shadowLevel = 0.4;

Starting from Babylonjs v4.2, there’s also a new shadowOnly property that only renders shadow, making the material behave like the ShadowOnlyMaterial material but without the single light restriction.

When shadowOnly = true, you can use primaryColor to tint the shadow color and alpha to make the shadows more or less strong

1
2
3
4
5
let backgroundMaterial = new BABYLON.BackgroundMaterial("backgroundMaterial", scene);

backgroundMaterial.primaryColor = new BABYLON.Color4(0.6, 0, 0, 1);
backgroundMaterial.shadowOnly = true;
backgroundMaterial.alpha = 0.4;