Materials allow you to cover your meshes in color and texture and they need light to be seen. One material can be used to cover as many meshes as you wish.
Whether the material is a color or a texture there are different ways it can react to light.
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.
scene.ambientColor = new BABYLON.Color3(1, 1, 1);
Create a material using
var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
Set the material color using one, some or all of diffuseColor, specularColor, emissiveColor and ambientColor. Remember that ambientColor will only apply if the scene ambient color has been set.
var 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;
To give an idea on how the material diffuse color reacts to the diffuse light color the following playground example shows how different color materials react to white, red, green and blue diffuse spot lights.
This reaction of
Yellow Material | Purple Material |
Cyan Material | White Material |
to white, red, green and blue diffuse spot lights can also be seen in the following image.
In this playground example -
Transparency is achieved by setting a materials alpha property from 0 (invisible) to 1 (opaque).
myMaterial.alpha = 0.5;
Textures are formed using a saved image.
Create a material using
var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
Set the material texture using one, some or all of diffuseTexture, specularTexture, emissiveTexture and ambientTexture. Notice that ambientTexture is applied without the scene ambient color having been set.
var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
myMaterial.diffuseTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.specularTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.emissiveTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.ambientTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
mesh.material = myMaterial;
Note: When no normals are specified, Babylon's standard material will compute the normals.
In this playground example -
As for colors the transparency is achieved by setting a materials alpha property from 0 (invisible) to 1 (opaque).
myMaterial.alpha = 0.5;
In addition the image used for the texture might already have a transparency setting, such as this picture of a dog from wikimedia commons, which has a transparent background;
In this case we set the hasAlpha property of the texture to true.
myMaterial.diffuseTexture.hasAlpha = true;
For the back faces of the cube to be visible through the transparent areas of the front faces we have to deal with back face culling.
This is a method for efficiently drawing the 2D screen rendering of the 3D model. 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 BabylonJS the default setting is, as you might expect, set to true.
Looking at the images below, when the material property backFaceCulling is true you can see that the transparent areas around the dog are still transparent, you can see the background through them. However, you cannot see the images on the back faces as they have been culled (or removed). When backFaceCulling is false the back faces are not removed during rendering so they can be seen through the transparent areas of the front faces.
Back Face Culling True | Back Face Culling False |
---|---|
![]() |
![]() |
You can see a mesh in wireframe mode by using:
materialSphere1.wireframe = true;
Great, your scene is looking better than ever with those materials! Later we will see how to use advanced techniques with materials. But for now, we have to learn how to use cameras.