Introduction To Material

Materials allow you to cover your meshes in color and texture. How a material appears depends on the lights used in the scene and how it is set to react.

There are four possible ways that a material can react to light.

Diffuse - the basic color or texture of the material as viewed under a light;
Specular - the highlight given to the material by a light;
Emissive - the color or texture of the material as if self lit;
Ambient - the color or texture of the material lit by the environmental background lighting.

Diffuse and Specular material require a light source to be created.
Ambient color requires the ambient color of the scene to be set, giving the environmental background lighting.

const myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);

myMaterial.diffuseColor = new BABYLON.Color3(1, 0, 1);
myMaterial.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87);
myMaterial.emissiveColor = new BABYLON.Color3(1, 1, 1);
myMaterial.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53);

mesh.material = myMaterial;

Transparent Color

Transparency is achieved by setting a materials alpha property from 0 (invisible) to 1 (opaque).

1	myMaterial.alpha = 0.5;

In addition, the image used for the texture might already have a transparency setting,In this case we set the hasAlpha property of the texture to true.

1	myMaterial.diffuseTexture.hasAlpha = true;

Back-Face Culling

Usually there is no need to draw the back face of a cube, or other object, as it will be hidden by the front face. In Babylon.js the default setting is set to true. But, in some cases such as transparent front side, you need to see the back face, then you should set the material property backFaceCulling to false

1	myMaterial.backFaceCulling = false;

WireFrame

You can see a mesh in wireframe mode by using:

1	materialSphere1.wireframe = true;

Bump Map

Bump mapping is a technique to simulate bump and dents on a rendered surface. These are made by creating a normal map from an image. The means to do this can be found on the web, a search for ‘normal map generator’ will bring up free and paid for methods of doing this.

1 2	const myMaterial = new BABYLON.StandardMaterial("myMaterial", scene); myMaterial.bumpTexture = new BABYLON.Texture("PATH TO NORMAL MAP", scene);

Use invertNormalMapX and/or invertNormalMapY on the material can invert Bumps and Dents

const myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
myMaterial.bumpTexture = new BABYLON.Texture("PATH TO NORMAL MAP", scene);
myMaterial.invertNormalMapX = true;
myMaterial.invertNormalMapY = true;

Opacity Map

The opacity of a material can be graded using an image with varying tranparency

1 2	const myMaterial = new BABYLON.StandardMaterial("myMaterial", scene); myMaterial.opacityTexture = new BABYLON.Texture("PATH TO OPACITY MAP", scene);

Tiling and Offsetting

When a material is applied to a mesh the image used for a texture is positioned according to coordinates. Rather than x, y which are already in use for the 3D axes the letters u and v are used for the coordinates.

To tile an image you use the uScale and/or vScale properties, of the texture, to set the number of tiles in each direction.

1 2	myMaterial.diffuseTexture.uScale = 5.0; myMaterial.diffuseTexture.vScale = 5.0;

To offset your texture on your mesh, you use the uOffset and vOffset properties, of the texture, to set the offset in each direction.

1 2	myMaterial.diffuseTexture.uOffset = 1.5; // 1.5 is actually equal to 0.5 myMaterial.diffuseTexture.vOffset = 0.5;

Details Map

A detail map (also called secondary map) is generally used to add extra details to the regular main texture when viewed up close.

The detail map can contains albedo (diffuse), normal and roughness (for PBR materials only) channels, dispatched this way (following Unity convention):

Red channel: greyscale albedo
Green channel: green component of the normal map
Blue channel: roughness
Alpha channel: red component of the normal map

1 2	myMaterial.detailMap.texture = new BABYLON.Texture("textures/detailmap.png", scene); myMaterial.detailMap.isEnabled = true;

Parallax Mapping

Parallax Mapping is an algorithm which, based from a height map, apply an offset on the material’s textures in order to accentuate the effect of relief in the geometry’s surface.

While this technique is independent from Normal Mapping (a.k.a Bump) it’s often used in conjunction with it. The simple reason is that the height map needed to perform Parallax Mapping is most of the time encoded in the Alpha channel of the Normal Map texture. (A diffuse texture is required for using parallax mapping).

Babylon.js supports two kinds of Parallax Mapping Principle: Parallax Mapping and Parallax Occlusion

Parallax Mapping:The core algorithm which perform an offset computation for the texture UV coordinates, based on a height map. This algorithm is really quick to perform, you can almost think of it as being free if you already are using Bump.
Parallax Occlusion Mapping (POM): While traditional Parallax mapping compute the offset based on one sample of the height map, the Occlusion version will make a loop to sample the height map many times in order to reach a more precise location of what the pixel to compute should reflect. The outcome is way more realistic than traditional Parallax but there can be a performance hit that needs consideration.

In Babylon.js we think of a parallax mapping as an extension of Normal Mapping, hence to benefit of the former, you have to enable the later. The reason is that we support only the height map being encoded in the Alpha channel of the normal map, as explained above.

You have three properties to work with Parallax:

useParallax: enables Parallax Mapping over Bump. This property won’t have any effect if you didn’t assigned a bumpTexture.
useParallaxOcclusion: enables Parallax Occlusion, when setting this property, you must also set useParallax to true.
parallaxScaleBias: apply a scaling factor that determine which “depth” the height map should represent. A value between 0.05 and 0.1 is reasonable in Parallax, you can reach 0.2 using Parallax Occlusion.

material.bumpTexture = someTextureFromNormalMap;
material.useParallax = true;
material.useParallaxOcclusion = true;
material.parallaxScaleBias = 0.075;

Understanding Normal Maps

Babylon.js was originally designed based on DirectX principles, it has since become more convention agnostic as there are plenty of tools available to make your assets work correctly so long as you know where you are coming from and where you are going.