Configurable Materials


Materials give your meshes color and texture. Materials can be opaque or have different degrees of transparency. When you form one material in Babylon.js it can be used to cover as many meshes as you wish, the only requirement is a light to be seen by. Their reaction to light can be diffuse, specular, emissive or ambient.

Diffuse shows the color or texture under white light, the amount of light falling on a particular part lightening or darkening the shade. Specular highlights where the light is most intense. Emissive shows the color or texture as if the light were inside, so with no other lights the color or texture will be uniform all over. For ambient to work it must be set on both the scene and material and then the material also takes on the ambient color of the scene.

An example of the creation and use of a material is

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

myMaterial.diffuseTexture = new BABYLON.Texture("URL", scene);
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;

Properties and Features.


Want to render a mesh with vertex points rather than facet triangles then use the pointscloud option.

var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
myMaterial.pointsCloud = true;


Generally set using an alpha value from 0, fully transparent to 1 opaque.

material.alpha = 0.5;

When using an image with transparent areas for a texture then you need to set the hasAlpha property of the diffuseTexture to true and leave the alpha on its default setting. In addition should you wish to place the texture around a mesh so that you can see through the front to the back then you will need to set backFaceCulling to false.

material.diffuseTexture.hasAlpha = true;
material.backFaceCulling = false;

Do you have an image with a transparency gradient then Babylon.js can cater for this as well, using the opacityTexture .

var material = new BABYLON.StandardMaterial("mat", scene);
mat.opacityTexture = new BABYLON.Texture("URL GRADIENT IMAGE", scene);

Transparency can adversely affect the drawing of overlapping meshes. To help the correct rendering of transparent overlapping meshes Babylon.js provides access to the depth buffer by enabling the DepthRenderer object.


Blending is the method of combining colors on screen. For example when one color is (r0, g0, b0) and another (r1, g1, b1) then the second color could just replace the first, or could be (r0 + r1, g0 + g1, b0 + b1) or perhaps (r0 - r1, g0 - g1, b0 - b1) or other combinations.

Babylon.js gives a way to set the method of blending when one mesh overlaps another through the material property alphaMode with five options.

material.alpha = 0.9999;        // when material is opaque artificially set as alpha blended
material.alphaMode = BABYLON.Engine.ALPHA_COMBINE; //default option


Repeat you texture as tiles across a mesh or even offset your texture on a mesh, all possible.

var material = new BABYLON.StandardMaterial("mat0", scene);
material.diffuseTexture = new BABYLON.Texture("URL TEXTURE", scene);
material.diffuseTexture.uScale = 2;
material1.diffuseTexture.vScale = 4;

material.diffuseTexture.uOffset = 0.25;
material.diffuseTexture.vOffset = 0.5;


There are times when you want to see the underlying structure of the mesh putting

material.wireframe = true;

does that.

More Than One Material on a Mesh

Possible? Of course it is. All meshes can use the multi-material approach of dividing the mesh into submeshes and using a different color or texture on each sub-mesh.

Meshes that have distinct faces or surfaces such as a box or cylinder and are built using the BABYLON.MeshBuilder.Create<Mesh> method can have color or texture applied to these faces individually. When using texture material one image file which is composed of multiple images forms the basis for the texture. This is done using arrays faceUV or faceColors.

Dynamic Texture

A dynamic texture allows you to have an active material that you can draw and write on.

3D Surface Effects

Sometimes you want your material to appear more textured (more 3D than smooth) in which case bump mapping and parallax mapping are available.

The use of parallax mapping with bump mapping enhances the apparent depth of the texture.

Reflection and Refraction

Reflection of these can be simulated in Babylon.js using a reflectionTexture with cube, HDR cube, spherical and mirror textures or with Fresnel parameters. Refraction uses the refractionTexture or again Fresnel parameters can be used.

Procedural Textures

These are texture that you can have some control over by changing some parameters. Find out more from the Further Reading list.

How Materials Work

Sometimes in order to use materials more effectively it is good to know what is happening under the Babylon.js hood. Have a look at how color is applied to the vertices of the facets that make up the mesh and their effects. Find out more how materials are chached and compiled and how to improve the user experience. All available from the links in Further Reading.

Compressed Texture for GPU

There are special formats of textures which are optimized for access by graphics processors. A .jpg can be very small on disk, but gets expanded by the CPU on its way to the GPU. Retaining its compressed form is what gives these formats their advantages. These are relatively new and little known and there are issue. Please read more using the link in Further Reading.

Depth Buffer

When rendering meshes the depth buffer is used to determine for any screen point the pixel of which material is displayed on screen taking into account which meshes are behind which for the current camera view. How the depth buffer is used during rendering can be changed by using the DepthRenderer object or the logarithmic depth buffer.


A shader is code written for the GPU and is what finally renders your material onto the screen. Babylon.js deals with the shader code for you, all you need to do is to set the material and lighting. However should you wish to do so you can write your own shader to produce the effect you want. You can edit and try out any shader code at http://cyos.babylonjs.com/

A range of shaders including fire, water, lava and fur can be found in the materials library section of Extensions.

Further Reading

Basic - L1

Materials 101
Bumps, Opacity, Tiling textures
Multi Materials
Dynamic Textures
Individual Faces
Video Texture

Mid Level - L2

Using Parallax Mapping

More Advanced - L3

Reflection and Refraction
Fresnel Parameters
Procedural textures
Transparency and Rendering
How Materials are Applied to Vertices
How Materials Work
Multi-Platform Compressed Textures

Introduction to Shaders
How To Put Shader Code in Babylon.js
How To Use ShaderMaterial
Example A Vertical Wave with Shader Code
Example Fireworks with Shader Code