Background Material
Introduction
As fully lit materials are not always desired in a scene. We are introducing a new unlit and fast material to help addressing the constraints you may have with standard or PBR materials.
The background material is fully unlit but can still receive shadows or be subject to image processing information. This makes it the best fit to use as a skybox or ground material.
Diffuse
The diffuse part is used to simply give a color to the mesh.
backgroundMaterial.diffuseTexture = new BABYLON.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 strength making it really attractive for grounds. If you want to dim the amount of shadows, you can use the dedicated properties:
backgroundMaterial.shadowLevel = 0.4;
You can see an example here: Background Material with Shadows
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: Background Material with Tinted Shadows
Opacity
As you might want to make a transparent ground, if the diffuse texture contains some transparency information, they 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 eyes are close to being aligned with it. This prevents a harsh cut navigating in 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 to create skybox. You can, exactly like with the standard material, set your reflection texture:
backgroundMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);backgroundMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
You can see an example here:Background Material with Reflection Texture
Mirror
As the reflection can be compared to the standard material, using a mirror works also in the same way.
var mirror = new BABYLON.MirrorTexture("mirror", 512, scene);mirror.mirrorPlane = new BABYLON.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 both use reflection and diffuse, reflection fresnel can help feeling more immersed in the experience:
var backgroundMaterial = new BABYLON.BackgroundMaterial("backgroundMaterial", scene);backgroundMaterial.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/backgroundGround.png", scene);backgroundMaterial.diffuseTexture.hasAlpha = true;backgroundMaterial.opacityFresnel = false;backgroundMaterial.shadowLevel = 0.4;var mirror = new BABYLON.MirrorTexture("mirror", 512, scene);mirror.mirrorPlane = new BABYLON.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
As from time to time all we need is color, you can use the texture as gray scaled information to mix with a color.
backgroundMaterial.useRGBColor = false;backgroundMaterial.primaryColor = BABYLON.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.