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;
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;
Playground Example Transparent Texture -
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);
Playground Example Opacity Texture -
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
Playground Example Blending Modes -
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;
Playground Example of Tiling and Offset -
There are times when you want to see the underlying structure of the mesh putting
material.wireframe = true;
does that.
Playground Example Wireframe -
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.
Playground Example Multi-Mesh with Color -
Meshes that have distinct faces or surfaces such as a box or cylinder and are built using the BABYLON.MeshBuilder.Create..... method can color or texture 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.
Playground Example faceUV on Cylinder -
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.
Playground Example Parallax Mapping -
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.
Playground Example Reflection Texture in Mirror -
These are texture that you can have some control over by changing some parameters. Find out more from the Further Reading list.
Playground Example Procedural Textures -
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.
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.
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.
Materials 101
Bumps, Opacity, Tiling textures
Multi Materials
Reflection and Refraction
Fresnel Parameters
Procedural textures
Transparency and Rendering
DepthRenderer
Blending
How Materials are Applied to Vertices
How Materials Work
Multi-Platform Compressed Textures
Introduction to Shaders
Putting Shader Code in Babylon.js
Shader Material
Example A Vertical Wave with Shader Code
Example Fireworks with Shader Code