How To

Background Material


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.

background

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 a live version here -


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 a live version here -


Opacity

As you might want to make a transparent groung, if the diffuse texture contains some transparency information, they will be used by the material.

backgroundMaterial.diffuseTexture.hasAlpha = true;

You can see a live version here -


Opacity Fresnel

Also, by default the ground will disappear as your eyes are close to be 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 a live version here -


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 a live version here -


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 a live version here -


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 a live version here -


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.primaryColor = BABYLON.Color3.Magenta();
backgroundMaterial.primaryLevel = 1;
backgroundMaterial.secondaryLevel = 0;
backgroundMaterial.tertiaryLevel = 0;

In this mode the result color is a mix of:

finalColor = colorBase.r * vPrimaryColor.rgb * vPrimaryColor.a;
finalColor += colorBase.g * vSecondaryColor.rgb * vSecondaryColor.a;
finalColor += colorBase.b * vTertiaryColor.rgb * vTertiaryColor.a;

This can help faking light spots color independantly for instance.

You can see a live version here -


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.