Introduction
In Babylon.js, materials are essential components that define how objects appear in a 3D scene. They determine the surface properties, including color, texture, and reflectivity.
There are four possible ways that a material can react to light:
| TYPE | DESCRIPTION |
|---|---|
| Diffuse | The basic color or texture of the material as viewed under a light. |
| Specular | The highlight given to the material by a light. |
| Emissive | The color or texture of the material as if self lit. |
| Ambient | The color or texture of the material lit by the environmental background lighting. |
Diffuse Color
The diffuse color determines the base color of a material as it appears under direct lighting. It represents how the material reflects light, creating the primary visible hue of an object when illuminated. This color is crucial for achieving the object’s overall appearance in the scene.
In the following example, you can observe how various colored materials respond to diffuse spotlights in white, red, green, and blue. Every two seconds, the diffuse color of the ground is changed in order to yellow, magenta, cyan, and white, allowing you to see the impact of each color on the materials.
const [groundColor, setGroundColor] = useState<Color3>(Color3.Yellow());
useEffect(() => {
let index = 1;
const interval = setInterval(() => {
setGroundColor(colors[index]);
index++;
if (index > 3) {
index = 0;
}
}, 2000);
return () => clearInterval(interval);
}, []);
// ...
<>
<spotLight name='light-1' position={new Vector3(0, 1, 1)} direction={Vector3.Down()} angle={Tools.ToRadians(90)} exponent={1.5} diffuse={Color3.White()} specular={Color3.Black()}>
<sphere name='sphere-1' options={{ diameter: 0.25 }}>
<standardMaterial name='material-1' emissiveColor={Color3.White()} />
</sphere>
</spotLight>
{/* @ts-expect-error - missing constructor parameters because it is a clone and they are not needed */}
<spotLight name='light-2' cloneFrom='light-1' position={new Vector3(0, 1, 0)} diffuse={Color3.Green()}>
<sphere name='sphere-2' options={{ diameter: 0.25 }}>
<standardMaterial name='material-2' emissiveColor={Color3.Green()} />
</sphere>
</spotLight>
{/* @ts-expect-error - missing constructor parameters because it is a clone and they are not needed */}
<spotLight name='light-3' cloneFrom='light-1' position={new Vector3(-1, 1, -1)} diffuse={Color3.Red()}>
<sphere name='sphere-3' options={{ diameter: 0.25 }}>
<standardMaterial name='material-3' emissiveColor={Color3.Red()} />
</sphere>
</spotLight>
{/* @ts-expect-error - missing constructor parameters because it is a clone and they are not needed */}
<spotLight name='light-4' cloneFrom='light-1' position={new Vector3(1, 1, -1)} diffuse={Color3.Blue()}>
<sphere name='sphere-4' options={{ diameter: 0.25 }}>
<standardMaterial name='material-4' emissiveColor={Color3.Blue()} />
</sphere>
</spotLight>
<ground name='ground' options={{ width: 6, height: 6 }}>
<standardMaterial name='ground-material' diffuseColor={groundColor} />
</ground>
</>
Ambient Color
The ambient color simulates the indirect light that affects an object, giving it a softer and more uniform appearance in shaded areas. Unlike the diffuse color, which reacts to direct light sources, ambient color helps illuminate parts of the object that are not directly lit, contributing to a more realistic rendering.
In the following example all spheres are lit by the same hemispheric light, with diffuse color red, specular color blue and ground color green. The first sphere has no ambient color, the middle has red ambient color and the one on the right has a green ambient color. The scene ambient color, which must be present, is white.
const scene = useScene();
useEffect(() => {
scene.ambientColor = Color3.White();
}, []);
// ...
<>
<hemisphericLight name='light' direction={new Vector3(-1, 1, 0)} diffuse={Color3.Red()} specular={Color3.Blue()} groundColor={Color3.Green()} />
<sphere name='sphere-1' positionX={-1.5} />
<sphere name='sphere-2'>
<standardMaterial name='material-1' ambientColor={Color3.Red()} />
</sphere>
<sphere name='sphere-3' positionX={1.5}>
<standardMaterial name='material-2' ambientColor={Color3.Green()} />
</sphere>
</>Transparent Color
Transparent color allows for the blending of the material with the background or other objects behind it. By adjusting transparency levels, developers can create effects like glass or water, enabling users to see through objects while still displaying color and texture.
For colors, the transparency is achieved by setting a materials alpha property from 0 (invisible) to 1 (opaque).
In the following example the two spheres are lit by the same hemispheric light, with diffuse color red, specular color blue and ground color green. On the closes sphere (green) is applied alpha equal to 0.5.
<>
<hemisphericLight name='light' direction={new Vector3(-1, 1, 0)} diffuse={Color3.Red()} specular={Color3.Blue()} groundColor={Color3.Green()} />
<sphere name='sphere-1' positionZ={1.5}>
<standardMaterial name='material-1' diffuseColor={Color3.Red()} />
</sphere>
<sphere name='sphere-2'>
<standardMaterial name='material-2' diffuseColor={Color3.Green()} alpha={0.5} />
</sphere>
</>Textures
Textures are images applied to a material to add detail and complexity beyond simple colors. They can represent various surface properties, such as patterns, imperfections, or surface relief (using normal maps). Textures enhance the visual richness of 3D objects and help create a more immersive environment.
Using kind Reactylon property, you can specify the kind of the texture and it will be automatically applied to the closest material.
In the following example all spheres are lit by the same hemispheric light, with diffuse color red, specular color blue and ground color green. The first sphere has a diffuse texture, the middle an emissive texture and the one on the right has material with red diffuse color and an ambient texture.
<>
<hemisphericLight name='light' direction={new Vector3(-1, 1, 0)} diffuse={Color3.Red()} specular={Color3.Blue()} groundColor={Color3.Green()} />
<sphere name='sphere-1' positionX={-1.5}>
<standardMaterial name='material-1'>
<texture kind='diffuseTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_ASSETS_URL}/textures/grass.png`} />
</standardMaterial>
</sphere>
<sphere name='sphere-2'>
<standardMaterial name='material-2'>
<texture kind='emissiveTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_ASSETS_URL}/textures/grass.png`} />
</standardMaterial>
</sphere>
<sphere name='sphere-3' positionX={1.5}>
<standardMaterial name='material-3' diffuseColor={Color3.Red()}>
<texture kind='ambientTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_ASSETS_URL}/textures/grass.png`} />
</standardMaterial>
</sphere>
</>Back Face Culling
Back face culling is a performance optimization technique that determines which faces of a mesh are rendered based on their orientation to the camera. By default, Babylon.js does not render the back faces of objects, which can improve performance and reduce visual clutter, especially for complex models.
In the following example you can observe the effect of the backFaceCulling property on materials. When backFaceCulling is set to true, the transparent areas around the dog remain transparent, allowing you to see the background through them. However, the back faces of the material are culled, meaning they do not render and are not visible. Conversely, when backFaceCulling is set to false, the back faces are rendered, allowing them to be seen through the transparent areas of the front faces. The backFaceCulling property is switched every two seconds.
useEffect(() => {
const intervalId = setInterval(() => {
setIsBackFaceCulling(isBackFaceCulling => !isBackFaceCulling);
}, 2000);
return () => clearInterval(intervalId);
}, []);
// ...
<>
<hemisphericLight name='light' direction={Vector3.Up()} />
<box name='box'>
<standardMaterial name='material' backFaceCulling={isBackFaceCulling}>
<texture kind='diffuseTexture' url={'https://upload.wikimedia.org/wikipedia/commons/8/87/Alaskan_Malamute%2BBlank.png'} hasAlpha />
</standardMaterial>
</box>
</>Wireframe
Wireframe mode displays the outline or wire structure of a 3D model, emphasizing its geometric shape without surface details. This mode is useful for debugging and understanding the underlying mesh structure, as well as for artistic effects in certain visual styles.
Every material has the capacity to display as a wireframe by setting the wireframe property of the material to true.
<>
<hemisphericLight name='light' direction={Vector3.Up()} />
<sphere name='box'>
<standardMaterial wireframe name='material' />
</sphere>
</>Learn More
For additional info, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/materials/using/materials_introduction.
