Dev►Babylon.js

Babylon.js: Unleash the StandardMaterial for your babylon.js game

After discovering how to load a scene in the previous chapter, I would like to share with you some informations about the StandardMaterial object of Babylon.js.

You want to discuss about this article: reach me on Twitter: @deltakosh

The StandardMaterial object is in charge of defining how an object is rendered and how it looks like.

Let’s start with a small html page:

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>Using babylon.js - How to load a scene</title>
    <script src="hand.js"></script>
    <script src="babylon.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: ;
            margin: ;
            overflow: hidden;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

You can then add a small script to create a Babylon.js scene:

<script>
    if (BABYLON.Engine.isSupported()) {
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        var scene = new BABYLON.Scene(engine);
        var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 1, scene);
        var light = new BABYLON.PointLight("light01", new BABYLON.Vector3(0, 3, -2), scene);
        var camera = new BABYLON.FreeCamera("camera01", new BABYLON.Vector3(0, 3, -2), scene);

        camera.setTarget(new BABYLON.Vector3(0, 0, 0));
        camera.attachControl(canvas);

        // Render
        engine.runRenderLoop(function() {
            scene.render();
        });
    }
</script>

This simple script creates a scene composed of a light, a camera and a sphere:

To be able to configure the aspect of our sphere, we need a material:

// Material
var material = new BABYLON.StandardMaterial("material01", scene);

sphere.material = material;

You can notice that you will have the same result with or without a material because an object without a material is rendered using a default material.

Adding some colors

The StandardMaterial supports a lot of colors combination. We will see here how things works.

Diffuse color

The diffuse color defines the basic color of an object. This color depends of the lights which means that if there is no light, there is no diffuse color or in another way, the final color is equal to the diffuse color multiplied by the light intensity for every pixel.

The final color depends on the diffuse color of the light and the diffuse color of the material (material.diffuseColor and light.diffuseColor):

material.diffuseColor = new BABYLON.Color3(1, 0, 0);


Diffuse color

Specular color

The specular color is the color of the highlight produced by a light on a surface (this is the white spot on the previous picture). It depends on the specular color of the light and the specular color of the material (material.specularColor and light.specularColor). The size of the highlight dépends on material.specularPower.

Here is an example with specular only (no diffuse):

material.diffuseColor = new BABYLON.Color3(0, 0, 0); // No diffuse color

material.specularColor = new BABYLON.Color3(1, 0, 0);
material.specularPower = 32;


Specular color


Ambient color


The ambient color is the color of the object relatively to the ambient color of the scene. The ambient color of a scene is a color available everywhere (no occlusion, no direction, no position).


To use it, just use the following code:

material.diffuseColor = new BABYLON.Color3(0, 0, 0); // No diffuse color

material.specularColor = new BABYLON.Color3(0, 0, 0); // No specular color


scene.ambientColor = new BABYLON.Color3(1, 1, 1);
material.ambientColor = new BABYLON.Color3(1, 0, 0);


Ambient color

Emissive color

Finally the emissive color is the inner color of the object (the color of the object without any light source):

material.diffuseColor = new BABYLON.Color3(0, 0, 0); // No diffuse color

material.specularColor = new BABYLON.Color3(0, 0, 0); // No specular color
material.specularPower = 32;

scene.ambientColor = new BABYLON.Color3(1, 1, 1);
material.ambientColor = new BABYLON.Color3(0, 0, 0); // No ambient color

material.emissiveColor = new BABYLON.Color3(0, 1, 0);


Emissive color

All together

So when you bring all these colors together, the result is the following:

material.diffuseColor = new BABYLON.Color3(0, 1, 0);

material.specularColor = new BABYLON.Color3(1, 1, 1);
material.specularPower = 32;

scene.ambientColor = new BABYLON.Color3(1, 1, 1);
material.ambientColor = new BABYLON.Color3(0, 0, 1);  

material.emissiveColor = new BABYLON.Color3(1, 0, 0);

Using textures

The StandardMaterial object can also use textures instead of solid colors.

Diffuse texture

To define the diffuse color using a texture, you just have to use the following code:

// Material
var material = new BABYLON.StandardMaterial("material01", scene);

sphere.material = material;

material.diffuseTexture = new BABYLON.Texture("Tree.png", scene);

The “Tree.png” texture is the following (please this is a picture with an alpha channel);

And the resulting render is the following:


Diffuse texture

You can configure the Texture object to take into account the alpha channel to activate alpha testing (discarding of pixels with alpha < 0.5):

material.diffuseTexture = new BABYLON.Texture("Tree.png", scene);
material.diffuseTexture.hasAlpha = true;


Diffuse texture with alpha testing

Specular texture

In a same way, you can also define a specular texture to control how the highlight looks like:

material.diffuseColor = new BABYLON.Color3(1, 1, 1);
material.specularPower = 32;
material.specularTexture = new BABYLON.Texture("Tree.png", scene);


Specular texture

Ambient texture

The main goal of the ambient texture is to provide a support for lightmaps (textures that contains baked shadows). Mainly the value of the ambient texture is multiplied by the diffuse value to produce the final result:

material.diffuseColor = new BABYLON.Color3(1, 0, 0);
material.ambientTexture = new BABYLON.Texture("Tree.png", scene);


Ambient texture with red diffuse

Emissive texture

The emissive texture can define the color of the object without any light:

material.emissiveTexture = new BABYLON.Texture("Tree.png", scene);


Emissive texture with diffuse color

Reflection texture

The StandardMaterial object supports 4 kinds of reflection:

  • Spherical
  • Cubic
  • Planar
  • Projection

To use a reflection texture, you can use a standard Texture or a CubeTexture:

var material = new BABYLON.StandardMaterial("material01", scene);
material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
material.reflectionTexture = new BABYLON.Texture("Tree.png", scene);
material.reflectionTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE;
sphere0.material = material;

material = new BABYLON.StandardMaterial("material02", scene);
material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
material.reflectionTexture = new BABYLON.Texture("Tree.png", scene);
material.reflectionTexture.coordinatesMode = BABYLON.Texture.CUBIC_MODE;
sphere1.material = material;

material = new BABYLON.StandardMaterial("material03", scene);
material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
material.reflectionTexture = new BABYLON.Texture("Tree.png", scene);
material.reflectionTexture.coordinatesMode = BABYLON.Texture.PLANAR_MODE;
sphere2.material = material;

material = new BABYLON.StandardMaterial("material04", scene);
material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
material.reflectionTexture = new BABYLON.Texture("Tree.png", scene);
material.reflectionTexture.coordinatesMode = BABYLON.Texture.PROJECTION_MODE;
sphere3.material = material;

material = new BABYLON.StandardMaterial("material05", scene);
material.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0.2);
material.reflectionTexture = new BABYLON.CubeTexture("refcube3", scene);
sphere4.material = material;

The CubeTexture must be fed with 6 files representing each size of the cube (with a specific naming):



For IE11 preview users, you can click on this picture, to open a new tab with the demo:


All kind of reflection textures


Bump texture


The bump texture simulates bumps and dents using a map called a normal map.


A normal map

var material = new BABYLON.StandardMaterial("kosh", scene);
material.bumpTexture = new BABYLON.Texture("normalMap.jpg", scene);


The bump texture pertubates the normal to produce a result like this:


Bumped object


Opacity texture


The opacity texture allows the object to define his transparency (alpha blending) on a per-pixel basis:

// Material
var material = new BABYLON.StandardMaterial("material01", scene);
material.emissiveColor = new BABYLON.Color3(1, 0, 0);
material.opacityTexture = new BABYLON.Texture("Degrade.png", scene);
sphere0.material = material;


Alpha blended object


Other properties


The StandardMaterial also supports the following properties to control its behavior:



  • backFaceCulling: Enable or disable back faces removal (mostly used with alpha testing or blending)


  • alpha: The global alpha of the object


  • wireframe: display the object as a wireframe


 


Wireframe object


What’s next ?


If you want to go more deeply into babylon.js, here are some useful links: