features

Configurable Materials


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.

Transparency

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

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 -


Tiling

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 -


Wireframe

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

material.wireframe = true;

does that.

Playground Example Wireframe -


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.

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<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.

Playground Example faceUV on Cylinder -


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.

Plyground Example Bump Map -


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

Playground Example Parallax Mapping -


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.

Playground Example Reflection Texture in Mirror -



Playground Example Refraction Texture -


Playground Example Fresenel Parameters

Procedural Textures

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 -


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.

Shaders

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
Individual Faces
Video Texture

Mid Level - L2

Using Parallax Mapping

More Advanced - L3

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
How To Put Shader Code in Babylon.js
How To Use ShaderMaterial
Example A Vertical Wave with Shader Code
Example Fireworks with Shader Code