Babylon.js: Unleash the StandardMaterial for your babylon.js game - Eternal Coding - HTML5 / JavaScript / 3D development - Site Home - MSDN Blogs

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


 

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

  • Comments 2

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="http://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: 0;
            margin: 0;
            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:

image

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);

imageDiffuse 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;

imageSpecular 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);

imageAmbient 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);

imageEmissive 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);

image

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);

image

And the resulting render is the following:

imageDiffuse 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;

imageDiffuse 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);

imageSpecular 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);

imageAmbient 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);

imageEmissive 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):

image

You can play with the result just here:

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

imageAll kind of reflection textures

Bump texture

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

imageA 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:

imageBumped 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;

imageAlpha 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

 

imageWireframe object

What’s next ?

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

Leave a Comment
  • Please add 6 and 8 and type the answer here:
  • Post
  • For lightmaps you would usually need a second UV set. I'm struggling with blender while exporting that. Babylon JS throws an exception with models containing 2 UV set.

  • Could you share you blender scene?

Page 1 of 1 (2 items)