Background Material

Introduction

Fully lit materials are not always desired in a scene. We are introducing a new unlit and fast material to help address the constraints you may have with standard or PBR materials.

The background material is fully unlit but can still receive shadows and be subject to image processing. This makes it a great fit for use as a skybox or ground material.

Expand

Diffuse

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

import { Texture } from "@babylonjs/core/Materials/Textures/texture";
backgroundMaterial.diffuseTexture = new Texture("textures/grass.jpg", scene);

You can see an example of this here: Simple Diffuse Background Material

Shadows

The material is able to receive shadows despite being unlit \o/ This is actually one of its strengths, making it very attractive for grounds. If you want to reduce the amount of shadow, you can use the dedicated properties:

backgroundMaterial.shadowLevel = 0.4;

You can see an example here: Background Material with Shadows

Starting with Babylon.js v4.2, there is also a new shadowOnly property that renders only shadows, 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: Background Material with Tinted Shadows

Opacity

If you want to make a transparent ground and the diffuse texture contains transparency information, it will be used by the material.

backgroundMaterial.diffuseTexture.hasAlpha = true;

You can see an example here: Background Material with Transparnecy

Opacity Fresnel

Also, by default, the ground will disappear as your view gets close to being aligned with it. This prevents a harsh cut while navigating the scene. It is possible to disable it by:

backgroundMaterial.opacityFresnel = false;

You can see an example here: Removing opacityFresnel

Reflection

Unlit materials are a great fit for creating a skybox. You can, just like with the standard material, set your reflection texture:

import { CubeTexture } from "@babylonjs/core/Materials/Textures/cubeTexture";
import { Texture } from "@babylonjs/core/Materials/Textures/texture";
backgroundMaterial.reflectionTexture = new CubeTexture("textures/TropicalSunnyDay", scene);
backgroundMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;

You can see an example here: Background Material with Reflection Texture

Mirror

As the reflection setup is comparable to the standard material, using a mirror works in the same way.

import { MirrorTexture } from "@babylonjs/core/Materials/Textures/mirrorTexture";
import { Plane } from "@babylonjs/core/Maths/math.plane";
mirror = new MirrorTexture("mirror", 512, scene);
mirror.mirrorPlane = new Plane(0, -1, 0, 0);
mirror.renderList.push(sphere);
backgroundMaterial.reflectionTexture = mirror;

You can see an example here: Background Material with Mirror Reflection Texture

Reflection Fresnel

As we can use both reflection and diffuse, reflection fresnel can help you feel more immersed in the experience:

import { BackgroundMaterial } from "@babylonjs/core/Materials/Background/backgroundMaterial";
import { MirrorTexture } from "@babylonjs/core/Materials/Textures/mirrorTexture";
import { Texture } from "@babylonjs/core/Materials/Textures/texture";
import { Plane } from "@babylonjs/core/Maths/math.plane";
backgroundMaterial = new BackgroundMaterial("backgroundMaterial", scene);
backgroundMaterial.diffuseTexture = new Texture("https://assets.babylonjs.com/environments/backgroundGround.png", scene);
backgroundMaterial.diffuseTexture.hasAlpha = true;
backgroundMaterial.opacityFresnel = false;
backgroundMaterial.shadowLevel = 0.4;
mirror = new MirrorTexture("mirror", 512, scene);
mirror.mirrorPlane = new Plane(0, -1, 0, 0);
mirror.renderList.push(sphere);
backgroundMaterial.reflectionTexture = mirror;
backgroundMaterial.reflectionFresnel = true;
backgroundMaterial.reflectionStandardFresnelWeight = 0.8;
ground.material = backgroundMaterial;

You can see an example here: Reflection Fresnel Example

Misc and Colors

Sometimes all we need is color, and you can use the texture as grayscale information to mix with a color.

import { Color3 } from "@babylonjs/core/Maths/math.color";
backgroundMaterial.useRGBColor = false;
backgroundMaterial.primaryColor = Color3.Magenta();

You can see an example here: Mix Gray Scale and Color

Environment

Going further, you can take a look at the Environment documentation where you can find information on how to speed up the setup of your scene with a skybox and a ground.

For the ground projection capabilities of the material, you can have a look at the dedicated section within the skybox documentation.