
![Toon material](/img/extensions/materials/toon.png)

# Using the cell material

Cell material can be found here: [https://cdn.babylonjs.com/materialsLibrary/babylon.cellMaterial.js](https://cdn.babylonjs.com/materialsLibrary/babylon.cellMaterial.js)

A demo can be found here: PG: <Playground id="#36VUUE" title="Cell Material" description="Example of cell material"/>

# Creating and customizing the cell material

You can customize special properties of the material:

```javascript
// Create a new cell material
var cell = new BABYLON.CellMaterial("cell", scene);

// Set up the diffuse texture
cell.diffuseTexture = new BABYLON.Texture("textures/amiga.jpg", scene);

// Set up diffuse color
cell.diffuseColor = new BABYLON.Color3(1, 0.5, 0);

// Set the material to be high level (default value is true)
// The high level can compute until 5 different lighting levels
// If false, only two levels are available
cell.computeHighLevel = true;
```



![Fire material](/img/extensions/materials/fire.png)

## Using the fire material

Fire material can be found here: [https://cdn.babylonjs.com/materialsLibrary/babylon.fireMaterial.js](https://cdn.babylonjs.com/materialsLibrary/babylon.fireMaterial.js)

A demo can be found here: PG: <Playground id="#NES8QN" title="Fire Material" description="Example of fire material"/>

The fire material works with 3 textures:

- The diffuse texture (fire texture)
- The distortion texture (to create perturbations on diffuse texture)
- The opacity texture (black and white)

**Note:** _The fire material doesn't work with lighting. So, shadow maps are also disabled._

```javascript
var fireMaterial = new BABYLON.FireMaterial("fireMaterial", scene);
fireMaterial.diffuseTexture = new BABYLON.Texture("diffuse.png", scene);
fireMaterial.distortionTexture = new BABYLON.Texture("distortion.png", scene);
fireMaterial.opacityTexture = new BABYLON.Texture("opacity.png", scene);

var plane = BABYLON.Mesh.CreatePlane("fireplane", 1.0, scene);
plane.material = fireMaterial;
```

The speed of fire flames can be customized like:

```javascript
fireMaterial.speed = 5.0; // Default is 1.0
```



![Fur material high](/img/extensions/materials/furHigh.png)

Fur material can be found here: [https://cdn.babylonjs.com/materialsLibrary/babylon.furMaterial.js](https://cdn.babylonjs.com/materialsLibrary/babylon.furMaterial.js)

## Using the High Level mode

A demo can be found at: PG: <Playground id="#2322Y7#0" title="Fur Material" description="Example using high level mode"/>

Fur materials have always been subjects of a lot of theories and conferences with multiple implementations thanks to multiple technologies.
Here, with WebGL, we decided to choose one of these implementations, not hard to use and pretty smart (with performances) with simple models

First, activate the high level (activated by default):

```javascript
furMaterial.highLevelFur = true;
```

That's all. Now, the most difficult part should be to configure the shells and the fur texture to create the fur effect.
Indeed, you'll have to draw several times the same mesh with an offset (computed in the effect) to create the illusion of fur.
Hopefully, there is a function that creates and returns the shells:

```javascript
// Generate a fur texture (internally used), working like a noise texture, that will be shared between all the shells
var furTexture = BABYLON.FurMaterial.GenerateTexture("furTexture", scene);

furMaterial.furTexture = furTexture;
myMesh.material = furMaterial;

var quality = 30; // Average quality

// Create shells
var shells = BABYLON.FurMaterial.FurifyMesh(myMesh, quality);
```

It is now working!
The function "BABYLON.FurMaterial.FurifyMesh" returns an array of "BABYLON.Mesh" that you can dispose later.
The first element is the mesh you used as the source mesh (myMesh here):

```javascript
for (let i = 0; i < shells.length; i++) {
  shells[i].material.dispose();
  shells[i].dispose();
}
```

You can customize the high level fur rendering thanks to some properties:

```javascript
allFurMaterials.furSpacing = 2; // Computes the space between shells. In others words, works as the fur height
```

```javascript
allFurMaterials.furDensity = 20; // Computes the fur density. More the density is high, more you'll have to zoom on the model
```

```javascript
allFurMaterials.furSpeed = 100; // Divides the animation of fur in time according to the gravity
```

```javascript
// Compute the gravity followed by the fur
allFurMaterials.furGravity = new BABYLON.Vector3(0, -1, 0);
```

## Using the fur material without High Level Mode

First, deactivate the high level (activated by default so following line MUST be included):

```javascript
furMaterial.highLevelFur = false;
```

![Fur material](/img/extensions/materials/fur.png)

Demos can be found at:
PG: <Playground id="#EUCNP#6" title="Fur Material" description="Example using low level mode"/>  
 PG: <Playground id="#EUCNP#7" title="Fur Material" description="Example using low level mode and heightmap"/>

The fur material needs a high number of the triangular facets that make up a mesh to work well.
The number of facets needed also depends on the size of the mesh.
Example that seem to work for ground and sphere are:

```javascript
var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 8, height: 8, subdivisions: 200 }, scene);
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { segments: 500, diameter: 8 }, scene);
```

The fur material is created using

```javascript
var furMaterial = new BABYLON.FurMaterial("fur_material", scene);

ground.material = furMaterial;
```

## Customize the fur material

You can customise three properties of the fur material:

```javascript
furMaterial.furLength = 3; // Represents the maximum length of the fur, which is then adjusted randomly. Default value is 1.
furMaterial.furAngle = Math.PI / 6; // Represents the angle the fur lies on the mesh from 0 to Math.PI/2. The default angle of 0 gives fur sticking straight up and PI/2 lies along the mesh.
furMaterial.furColor = new BABYLON.Color3(0.44, 0.21, 0.02); // is the default color if furColor is not set.
```

## Using textures

## heightTexture

A greyscale image can be used to set the fur length.
A speckled greyscale image can produce fur like results.
Any greyscale image with affect the fur length producing a heightMap type effect.

```javascript
furMaterial.heightTexture = new BABYLON.Texture("speckles.jpg", scene); // Set the fur length with a texture.
```

## diffuseTexture

A texture can also be used to paint the mesh.
The leopard fur texture used in the test is by Martin Wegmann from [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Leopard_fur.JPG)
under the [license](https://creativecommons.org/licenses/by-sa/3.0/deed.en)

```javascript
furMaterial.diffuseTexture = new BABYLON.Texture("leopard_fur.jpg", scene); // Set the fur length with a texture.
```

## Meshes where the number of facets is not user controlled on creation.

Demos can be found at:
PG: <Playground id="#EUCNP#16" title="Fur Material" description="Leopard fur converted to smooth before increasing facets"/>  
 PG: <Playground id="#EUCNP#17" title="Fur Material" description="Leopard fur converted to smooth after increasing facets"/>

Unlike the ground mesh where you can supply the number of subdivisions or the sphere mesh where you can supply the number of segments the majority of meshes are created using a minimum number of facets.
To apply the fur material to these the number of facets per face of the mesh needs to be increased.

The function increasedFacets will do this:
When n is the number of points per side added to each side of a facet the number of facets is increased by the square of (n + 1).

```javascript
function increasedFacets(mesh, pps) {
  //pps points per side
  var gaps = pps + 1;
  var n = gaps + 1;
  var fvs = [];
  for (let i = 0; i < n; i++) {
    fvs[i] = [];
  }
  var A, B;
  var d = { x: 0, y: 0, z: 0 };
  var u = { x: 0, y: 0 };
  var indices = [];
  var vertexIndex = [];
  var side = [];
  var uvs = mesh.getVerticesData(BABYLON.VertexBuffer.UVKind);
  var meshIndices = mesh.getIndices();
  var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
  var normals = [];

  for (let i = 0; i < meshIndices.length; i += 3) {
    vertexIndex[0] = meshIndices[i];
    vertexIndex[1] = meshIndices[i + 1];
    vertexIndex[2] = meshIndices[i + 2];
    for (let j = 0; j < 3; j++) {
      A = vertexIndex[j];
      B = vertexIndex[(j + 1) % 3];
      if (side[A] === undefined && side[B] === undefined) {
        side[A] = [];
        side[B] = [];
      } else {
        if (side[A] === undefined) {
          side[A] = [];
        }
        if (side[B] === undefined) {
          side[B] = [];
        }
      }
      if (side[A][B] === undefined && side[B][A] === undefined) {
        side[A][B] = [];
        d.x = (positions[3 * B] - positions[3 * A]) / gaps;
        d.y = (positions[3 * B + 1] - positions[3 * A + 1]) / gaps;
        d.z = (positions[3 * B + 2] - positions[3 * A + 2]) / gaps;
        u.x = (uvs[2 * B] - uvs[2 * A]) / gaps;
        u.y = (uvs[2 * B + 1] - uvs[2 * A + 1]) / gaps;
        side[A][B].push(A);
        for (let k = 1; k < gaps; k++) {
          side[A][B].push(positions.length / 3);
          positions.push(positions[3 * A] + k * d.x, positions[3 * A + 1] + k * d.y, positions[3 * A + 2] + k * d.z);
          uvs.push(uvs[2 * A] + k * u.x, uvs[2 * A + 1] + k * u.y);
        }
        side[A][B].push(B);
        side[B][A] = [];
        l = side[A][B].length;
        for (let a = 0; a < l; a++) {
          side[B][A][a] = side[A][B][l - 1 - a];
        }
      } else {
        if (side[A][B] === undefined) {
          side[A][B] = [];
          l = side[B][A].length;
          for (let a = 0; a < l; a++) {
            side[A][B][a] = side[B][A][l - 1 - a];
          }
        }
        if (side[B][A] === undefined) {
          side[B][A] = [];
          l = side[A][B].length;
          for (let a = 0; a < l; a++) {
            side[B][A][a] = side[A][B][l - 1 - a];
          }
        }
      }
    }
    fvs[0][0] = meshIndices[i];
    fvs[1][0] = side[meshIndices[i]][meshIndices[i + 1]][1];
    fvs[1][1] = side[meshIndices[i]][meshIndices[i + 2]][1];
    for (let k = 2; k < gaps; k++) {
      fvs[k][0] = side[meshIndices[i]][meshIndices[i + 1]][k];
      fvs[k][k] = side[meshIndices[i]][meshIndices[i + 2]][k];
      d.x = (positions[3 * fvs[k][k]] - positions[3 * fvs[k][0]]) / k;
      d.y = (positions[3 * fvs[k][k] + 1] - positions[3 * fvs[k][0] + 1]) / k;
      d.z = (positions[3 * fvs[k][k] + 2] - positions[3 * fvs[k][0] + 2]) / k;
      u.x = (uvs[2 * fvs[k][k]] - uvs[2 * fvs[k][0]]) / k;
      u.y = (uvs[2 * fvs[k][k] + 1] - uvs[2 * fvs[k][0] + 1]) / k;
      for (let j = 1; j < k; j++) {
        fvs[k][j] = positions.length / 3;
        positions.push(positions[3 * fvs[k][0]] + j * d.x, positions[3 * fvs[k][0] + 1] + j * d.y, positions[3 * fvs[k][0] + 2] + j * d.z);
        uvs.push(uvs[2 * fvs[k][0]] + j * u.x, uvs[2 * fvs[k][0] + 1] + j * u.y);
      }
    }
    fvs[gaps] = side[meshIndices[i + 1]][meshIndices[i + 2]];

    indices.push(fvs[0][0], fvs[1][0], fvs[1][1]);
    for (let k = 1; k < gaps; k++) {
      for (let j = 0; j < k; j++) {
        indices.push(fvs[k][j], fvs[k + 1][j], fvs[k + 1][j + 1]);
        indices.push(fvs[k][j], fvs[k + 1][j + 1], fvs[k][j + 1]);
      }
      indices.push(fvs[k][j], fvs[k + 1][j], fvs[k + 1][j + 1]);
    }
  }

  var vertexData = new BABYLON.VertexData();
  vertexData.positions = positions;
  vertexData.indices = indices;
  vertexData.uvs = uvs;

  BABYLON.VertexData.ComputeNormals(positions, indices, normals);
  vertexData.normals = normals;
  mesh.dispose();
  var newmesh = new BABYLON.Mesh("newmesh", scene);
  vertexData.applyToMesh(newmesh);

  return newmesh;
}
```

For sharp edged meshes such as a box the shader can separate the faces since the faces meeting at the corners have there own vertices and normals at these vertices.
These meshes are flat shaded. If this separation of the edges is a problem then the function convertToSmoothShadedMesh() can be used.
However this can then produce some artefacts at the edges.

```javascript
function convertToSmoothShadedMesh(mesh) {
  var meshIndices = mesh.getIndices();
  var meshPositions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
  var mesh_uvs = mesh.getVerticesData(BABYLON.VertexBuffer.UVKind);
  var setPositions = [];
  var indices = [];
  var positions = [];
  var uvs = [];
  var normals = [];
  var p;
  var indexMap = [];
  for (let i = 0; i < meshPositions.length; i += 3) {
    var temp = [];
    temp.push(i / 3, meshPositions[i], meshPositions[i + 1], meshPositions[i + 2], mesh_uvs[(2 * i) / 3], mesh_uvs[(2 * i) / 3 + 1]);
    setPositions.push(temp);
  }
  var i = 0;
  while (setPositions.length > 0) {
    p = setPositions.shift();
    positions.push(p[1], p[2], p[3]);
    uvs.push(p[4], p[5]);
    indexMap[p[0]] = i;
    var j = 0;
    while (j < setPositions.length) {
      if (Math.abs(p[1] - setPositions[j][1]) < Math.pow(0.1, 10) && Math.abs(p[2] - setPositions[j][2]) < Math.pow(0.1, 10) && Math.abs(p[3] - setPositions[j][3]) < Math.pow(0.1, 10)) {
        indexMap[setPositions[j][0]] = i;
        setPositions.splice(j, 1);
      } else {
        j++;
      }
    }
    i++;
  }
  for (let i = 0; i < meshIndices.length; i++) {
    indices.push(indexMap[meshIndices[i]]);
  }

  var vertexData = new BABYLON.VertexData();
  vertexData.positions = positions;
  vertexData.indices = indices;
  vertexData.uvs = uvs;

  BABYLON.VertexData.ComputeNormals(positions, indices, normals);
  vertexData.normals = normals;
  vertexData.applyToMesh(mesh);

  return mesh;
}
```



![Screenshot](/img/extensions/materials/gradient.jpg)

You can get the gradient material:

* Using npm with npm install --save babylonjs babylonjs-materials
* With a direct reference to: https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js

## Using the gradient material

The material creates a smooth gradient with two colors:

```
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { segments: 32, diameter: 2 }, scene);

var gradientMaterial = new BABYLON.GradientMaterial("grad", scene);
gradientMaterial.topColor = BABYLON.Color3.Red(); // Set the gradient top color
gradientMaterial.bottomColor = BABYLON.Color3.Blue(); // Set the gradient bottom color
gradientMaterial.offset = 0.25;

sphere.material = gradientMaterial;
```

The gradient material can be configured with:
* `topColor` and `bottomColor` are the two colors used in this gradient material
* `offset` is a number used to offset the color on the Y axis
* `scale` is a number used to scale the color on the Y axis
* `smoothness` is a number (between 0 and 10) which can be used to define the speed of the color change along Y axis (1 by default)

## Playground example

You can find a live example here:  PG: <Playground id="#2IFRKC#63" title="Gradient Material" description="Example of gradient material"/>



## Grid material

![Grid Material](/img/extensions/materials/grid.png)

## Playground example

A full playground example can be found here: PG: <Playground id="#1UFGZH#12" title="Grid Material" description="Example of grid material"/>

## Using the Grid material

As the grid material is a babylonJS extension, it is not included in the main _babylon.js_ file. In order to use the material, please download and reference the extension from the cdn using [babylon.gridMaterial.js](https://cdn.babylonjs.com/materialsLibrary/babylon.gridMaterial.js) or its minified version [babylon.gridMaterial.min.js](https://cdn.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js).

The default grid behaviour does not require any setup and displays a black and white grid on your meshes:

![gridDefault](/img/extensions/materials/gridDefault.png)

You can access the live example in this PG: <Playground id="#2KKVBH" title="Grid Material" description="Example of grid material"/>

The grid is using the local position to outline any of the axis fitting with one unit in black. Only one on ten lines will be fully black, the other lines will be in lighter grey. You can imagine it as a ruler with bigger marks for centimeters and smaller for millimeters.

```javascript
var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "textures/heightMap.png", 100, 100, 100, 0, 10, scene, false);
ground.material = new BABYLON.GridMaterial("groundMaterial", scene);
```

## Customize the grid material

In order to help you making the grid fit in your scenes, a few controls are available:

- `mainColor`: the main color pilots the color of the empty area
- `lineColor`: the line color drives the line color... What an amazing surprise !!!
- `opacity`: the opacity helps changing the lines opacity. In transparent mode (opacity < 1.0), the empty area will always be at an opacity level of `0.08`
- `gridRatio`: subdivide the object size in order to fit with it
- `majorUnitFrequency`: frequency of strong lines
- `minorUnitVisibility`: level of minor lines compared to the major ones
- `gridOffset`: the offset vector3 will shift the cells of the grid by a set amount

### Few clarifications

#### gridRatio

The grid will be projected on objects according to their size. If an object has a size of 1, you'll only see one line on it.
For instance a 1 size cube will by default only have one line:

![Grid Ratio 1](/img/extensions/materials/gridRatio1.png)

PG: <Playground id="#5S6MD" title="Grid Material" description="Grid ratio of 1"/>

Using a gridRatio of 0.1, will then make appear ten lines on it:

![Grid Ratio 2](/img/extensions/materials/gridRatio2.png)

PG: <Playground id="#5S6MD#1" title="Grid Material" description="Grid ratio of 2"/>

#### majorUnitFrequency

You have now noticed on the gridRatio examples above that only one on ten lines is stronger. This is control by the parameter named `majorUnitFrequency` which gets its default value to 10.

Setting it to 2, will make appear one strong line each 2 lines. This is only a scary parameter name for something simple:

![Grid MUF](/img/extensions/materials/gridMUF.png)

PG: <Playground id="#5S6MD#2" title="Grid Material" description="Example of using multi unit frequency"/>

#### minorUnitVisibility

After sorting out the frequency of stronger lines, you could wonder how to control the strength of the minor ones. The parameter `minorUnitVisibility` will help you to control this. This value should be smaller than 1 which is the value applied to the main lines. The default value is 0.33 which corresponds to 33% of the `lineColor`.

Setting it to 0.1 will then reinforce the effect of the main lines (by dropping the value of the minor ones):

![Grid MUV](/img/extensions/materials/gridMUV.png)

PG: <Playground id="#5S6MD#3" title="Grid Material" description="Example of using minor unit visiblity"/>

#### gridOffset

Note that the shift for each axys allows a loop: using a `gridOffset` of `(0, 0, 0)` will give you the same visual result than `(1, 0, 0)`.

PG: <Playground id="#URSDPL#1" title="Grid Material" description="Example of using grid offset"/>

#### useMaxLine

Sometimes the points where grid lines intersect may appear brighter than the rest of the grid. Set useMaxLine to true to remove this effect.

PG: <Playground id="#1UFGZH#222" title="Grid Material" description="Example of using useMaxLine"/>



![Screenshot](/img/extensions/materials/lava.jpg)

PG: <Playground id="#1BLVWO#25" title="Lava Material" description="An example of lava material"/>


Lava material can be found here: [https://cdn.babylonjs.com/materialsLibrary/babylon.lavaMaterial.js](https://cdn.babylonjs.com/materialsLibrary/babylon.lavaMaterial.js)

## Using the lava material

The lava material needs at least a noise texture and a diffuse texture to render properly.
Just create a new reference of the material and assign it two textures:

```
var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 512, height: 512, subdivisions: 32 }, scene);

var lavaMaterial = new BABYLON.LavaMaterial("lava", scene);
lavaMaterial.noiseTexture = new BABYLON.Texture("cloud.png", scene); // Set the bump texture
lavaMaterial.diffuseTexture = new BABYLON.Texture("lavatile.jpg", scene); // Set the diffuse texture

ground.material = lavaMaterial;
```

The diffuse texture will be the color of your lava, the noise texture will represent the lava deformation.
Notice that this material will update each vertex position of your object. If there are not enough vertices, 
some artefacts may appears.

## Lights
By default, the material is subject to lights. If you wish, you can cancel this by relying on the unlit property.
```
material.unlit = true;
```

PG: <Playground id="#1BLVWO#22" title="Lava Material" description="Lava with unlit material"/>

## Customize the lava material

You can customize two properties of the material:

```
lavaMaterial.speed = 2.0; // Default 1. Represents speed of perturbations of the lava
lavaMaterial.fogColor = new BABYLON.Color3(1, 0, 0); // Default to (0,0,0) black. Represents the color of the fog displayed on the lava ground.
```




![Mix Material](/img/extensions/materials/mixResult.png)

## Playground example

PG: <Playground id="#1DFTDT" title="Mix Material" description="Example of mix material"/>

## Using the mix material

The mix material is based on the terrain material but works with up to 8 diffuse textures. It is composed of:
- 8 Diffuse textures. (at least 4 required)
- 2 Mixmap textures: represents the intensity of each diffuse texture according the channels R (red), G (green), B (blue) and A (alpha). (at least one required)

__Note 1: the alpha channel is inverted in order to help creating the mix map textures. In other words, less you have alpha, more the diffuse texture attached to the alpha channel will be visible.__

__Note 2: the mix material doesn't support bump mapping for instance.__

```
// Create a terrain
var terrain = BABYLON.Mesh.CreateGroundFromHeightMap("terrain", "heightMap.png", 100, 100, 100, 0, 10, scene, false);

// Create the mix material
var mix = new BABYLON.MixMaterial("mix", scene);

// Mix texture 1 (RGBA) is required
mix.mixTexture1 = new BABYLON.Texture("/playground/textures/mixMap.png", scene);

// Mix texture 2 (RGBA) is optional
mix.mixTexture2 = new BABYLON.Texture("/playground/textures/mixMap_2.png", scene);

// Diffuse textures (RGBA) attached to the "mixTexture1"
mix.diffuseTexture1 = new BABYLON.Texture("/playground/textures/floor.png", scene);
mix.diffuseTexture2 = new BABYLON.Texture("/playground/textures/rock.png", scene);
mix.diffuseTexture3 = new BABYLON.Texture("/playground/textures/grass.png", scene);
mix.diffuseTexture4 = new BABYLON.Texture("/playground/textures/floor.png", scene);

// Diffuse textures (RGBA) attached to the "mixTexture2"
mix.diffuseTexture5 = new BABYLON.Texture("/playground/textures/leopard_fur.jpg", scene);
mix.diffuseTexture6 = new BABYLON.Texture("/playground/textures/fur.jpg", scene);
mix.diffuseTexture7 = new BABYLON.Texture("/playground/textures/sand.jpg", scene);
mix.diffuseTexture8 = new BABYLON.Texture("/playground/textures/crate.png", scene);

// Apply the material
terrain.material = mix;
```

That's all!

## Result with only the mix texture 1
With ```mix.mixTexture2``` undefined or null, the material will only apply the mix texture 1:

![Mix Texture 1](/img/extensions/materials/mixMap.png)
![Mix Material 1](/img/extensions/materials/terrainMixtexture1.png)

## Result with both mix textures 1 & 2
With ```mix.mixTexture2 = new BABYLON.Texture("/playground/textures/mixMap_2.png", scene)``` the material will continue mixing the mix texture 1 with the mix texture2. Then, you are able to mix up to 8 diffuse textures:

![Mix Texture 2](/img/extensions/materials/mixMap_2.png)
![Mix Material 2](/img/extensions/materials/mixResult.png)



![Screenshot](/img/extensions/materials/normal.jpg)

## Playgound Example 
    
PG: <Playground id="#22VQKB" title="Normal Material" description="Example of normal material"/>

## Using the normal material

Very simple : 
```
var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 512, height: 512, subdivisions: 32 }, scene);
var normalMaterial = new BABYLON.NormalMaterial("normal", scene);
ground.material = normalMaterial;
```

## Customize the normal material

You can add a diffuse texture to the normal material, because why not?
Normal colors will be mixed with texture color.

```
normalMaterial.diffuseTexture = new BABYLON.Texture("textures/amiga.jpg", scene);
```




## General

![Screenshot](/img/extensions/materials/shadowOnly.jpg)

The goal of the ShadowOnlyMaterial is to display only shadows casted by a light on a receiving object. It is mostly useful when you want to display shadow on a transparent canvas (on top of your existing DOM).

ShadowOnly material can be found here: [https://cdn.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.js](https://cdn.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.js)

A demo can be found here:  PG: <Playground id="#1KF7V1" title="Shadow Only Material" description="Example of shadow only material"/>

## Using the ShadowOnly material

ShadowOnly material is dead simple to use. Just apply it as material to any mesh where you want to display only shadow:

```
var ground = BABYLON.Mesh.CreatePlane('ground', 1000, scene)
ground.rotation.x = Math.PI / 2
ground.material = new BABYLON.ShadowOnlyMaterial('shadowOnly', scene)
ground.receiveShadows = true
```

By default the shadow color is black but you can force an artificial color with `material.shadowColor = BABYLON.Color3.Red()`.

Demo here:  PG: <Playground id="#1KF7V1#19" title="Shadow Only Material" description="Example of shadow only material color"/>

**Limitation:** Please note that only the first light that can reach the mesh will be used. 
So if you have multiple lights in your scene you may end up using `light.includedOnlyMeshes` or `light.excludedMeshes` or `light.includeOnlyWithLayerMask` or `light.excludeWithLayerMask`.
You can also force the material to pick a specific light with `material.activeLight = light`.





![Sky Material](/img/extensions/materials/sky.png)

## Introduction

The sky material allows to create dynamic and texture free effects for skyboxes.

This work is based on ["A Practical Analytic Model for Daylight"](https://www2.cs.duke.edu/courses/cps124/spring08/assign/07_papers/p91-preetham.pdf).
First implemented by [Simon Wallner](http://simonwallner.at/project/atmospheric-scattering/),
improved by [Martin Upitis](http://blenderartists.org/forum/showthread.php?245954-preethams-sky-impementation-HDR)
and finally implmented in Three.js by [zz85](http://twitter.com/blurspline)

The challenge for skyboxes is to reproduce and configure the sky taking care of the atmosphere state.
In other words, for example, determine how the light (from sun) is scattered by particles.

## Playground example

PG: <Playground id="#E6OZX#221" title="Sky Material" description="Sky material animation"/>

Just press the following keys:

- 1: Set Day
- 2: Set Evening
- 3: Increase Luminance
- 4: Decrease Luminance
- 5: Increase Turbidity
- 6: Decrease Turbidity
- 7: Move horizon to -50
- 8: Restore horizon to 0

## How to use?

Simply create a skybox and assign a new instance of the Sky Material:

```javascript
const skyMaterial = new BABYLON.SkyMaterial("skyMaterial", scene);
skyMaterial.backFaceCulling = false;

const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, scene);
skybox.material = skyMaterial;
```

That's all!

## Configuring the Sky Material

The aspect of the sky can be customized, including the day/night time. The properties are:

```javascript
skyMaterial.turbidity = 1; // Represents the amount (scattering) of haze as opposed to molecules in atmosphere
```

![skyTurbidity](/img/extensions/materials/skyTurbidity.png)

```javascript
skyMaterial.luminance = 1; // Controls the overall luminance of sky in interval ]0, 1,190[
```

![skyLuminance](/img/extensions/materials/skyLuminance.png)

```javascript
// Control the planet's orientation over the sun
skyMaterial.inclination = 0.5; // The solar inclination, related to the solar azimuth in interval [0, 1]
skyMaterial.azimuth = 0.25; // The solar azimuth in interval [0, 1]
```

Otherwise, if you want to configure the sun position with a BABYLON.Vector3, you can set:

```javascript
// Manually set the sun position
skyMaterial.useSunPosition = true; // Do not set sun position from azimuth and inclination
skyMaterial.sunPosition = new BABYLON.Vector3(0, 100, 0);
```

![skyAzimuthInclination](/img/extensions/materials/skyAzimuthInclination.png)

```javascript
skyMaterial.rayleigh = 2; // Represents the sky appearance (globally)
```

![skyRayleigh](/img/extensions/materials/skyRayleigh.png)

```javascript
// Mie scattering (from [Gustav Mie](https://en.wikipedia.org/wiki/Gustav_Mie))
// Related to the haze particles in atmosphere

// The amount of haze particles following the Mie scattering theory
skyMaterial.mieDirectionalG = 0.8;

skyMaterial.mieCoefficient = 0.005; // The mieCoefficient in interval [0, 0.1], affects the property skyMaterial.mieDirectionalG
```

![skyMie](/img/extensions/materials/skyMie.png)

## Keeping the horizon relative to the camera elevation

In some cases, you would like to keep the horizon's "position" relative to the camera's position (typically a game where you can flight very high).
To do that, the material exposes a vector (`.cameraOffset`) that you can customize.

Typically:

```javascript
// Set the horizon elevation relative to the camera position
skyMaterial.cameraOffset.y = scene.activeCamera.globalPosition.y;
```

**Note**: this will not modify the sun position as it considered enought far, even when camera is really high.

## Using the sky material to create a reflection texture

As a common technique, it would be useful to use the sky material result to reflect the environment. For example, using a PBR material.

The technique consists on creating a reflection probe (which is a cube texture) and render the sky mesh with the sky material assigned to it. As an example PG: <Playground id="#4R1H1U" title="Sky Material" description="Example of sky material reflecting the environment"/>



![Terrain Material](/img/extensions/materials/terrain.jpg)

## Playground example

PG: <Playground id="#E6OZX#7" title="Terrain Material" description="Example of terrain material"/>

## Using the terrain material

The terrain material works with at least 4 textures:
- 3 Diffuse textures. (required)
- 3 Bump textures. (not required)
- 1 Mixmap texture: represents the intensity of each diffuse texture according the channels R (red), G (green) and B (blue). (required)

In other words, the Mixmap texture mixes the 3 diffuse textures thanks to the color channels RGB.
A Mixmap texture looks like (result on the screenshot above):
![](/img/extensions/materials/terrainMixMap.png)

The method applied by the terrain material is also called "texture splatting".

```
var terrain = BABYLON.Mesh.CreateGroundFromHeightMap("terrain", "heightMap.png", 100, 100, 100, 0, 10, scene, false);

var terrainMaterial = new BABYLON.TerrainMaterial("terrainMaterial", scene);
terrainMaterial.mixTexture = new BABYLON.Texture("mixMap.png", scene);
terrainMaterial.diffuseTexture1 = new BABYLON.Texture("grass.png", scene);
terrainMaterial.diffuseTexture2 = new BABYLON.Texture("rock.png", scene);
terrainMaterial.diffuseTexture3 = new BABYLON.Texture("floor.png", scene);

terrainMaterial.bumpTexture1 = new BABYLON.Texture("grassn.png", scene);
terrainMaterial.bumpTexture2 = new BABYLON.Texture("rockn.png", scene);
terrainMaterial.bumpTexture3 = new BABYLON.Texture("floor_bump.png", scene);

terrain.material = terrainMaterial;
```

That's all.




![Tri-Planar Mapping Material](/img/extensions/materials/triPlanar.jpg)

# Playground Example

PG: <Playground id="#E6OZX#9" title="Tri-Panar Material" description="Example of tri-planar material"/>

Press "1" to activate the Tri-Planar material (by default)
Press "2" to active the default material

# What are you talking about??
In the case of very large scenes, you are likely to use terrains generated using procedural methods.
In this case, you'll have to compute the vertices positions, normals and UVs (and so on).
One of the most tricky tasks should be to generate the UV coordinates properly without taking care of the possible abrupt changes of the terrains.

For example, an abrupt change can cause this kind of glitches:

![Tri-Planar Mapping Material Problem](/img/extensions/materials/triPlanarProblem.jpg)

That should look like:

![Tri-Planar Mapping Material Resolved](/img/extensions/materials/triPlanarResolved.jpg)

The tri-planar mapping material tends to resolve this kind of problem, but above all, allows to completely eliminate the UV calculations: no UV needed.

# Using the tri-planar mapping material

The tri-planar material works with at least 3 textures: each texture represents how it is applied on each axis (X, Y and Z).

Of course, each axis can share the same texture. Example:

```javascript
var triPlanarMaterial = new BABYLON.TriPlanarMaterial("triplanar", scene);

// The 3 diffuse textures must be set, even if they share the same texture reference
triPlanarMaterial.diffuseTextureX = new BABYLON.Texture("rock.png", scene);
triPlanarMaterial.diffuseTextureY = new BABYLON.Texture("grass.png", scene);
triPlanarMaterial.diffuseTextureZ = triPlanarMaterial.diffuseTextureX;
```

You can also customize the tile size by setting the `.tileSize` property:

```javascript
triPlanarMaterial.tileSize = 1.5;
```

For better quality, the tri-planar material also supports normal mapping. Just set the normal textures:

```javascript
var triPlanarMaterial = new BABYLON.TriPlanarMaterial("triplanar", scene);
// ...

// In the case of normal maps, it is not necessary to set the 3 textures
triPlanarMaterial.normalTextureX = new BABYLON.Texture("textures/rockn.png", scene);
triPlanarMaterial.normalTextureY = new BABYLON.Texture("textures/grassn.png", scene);
triPlanarMaterial.normalTextureZ = triPlanarMaterial.normalTextureX;
```


To go further in the theory, you can read this [great article](http://gamedevelopment.tutsplus.com/articles/use-tri-planar-texture-mapping-for-better-terrain--gamedev-13821) about tri-planar mapping.



![Water material](/img/extensions/materials/water.jpg)

# Using the water material

Water material can be found here: [https://cdn.babylonjs.com/materialsLibrary/babylon.waterMaterial.js](https://cdn.babylonjs.com/materialsLibrary/babylon.waterMaterial.js)

A demo can be found here: PG: <Playground id="#1SLLOJ#20" title="Water Material" description="Example of water material"/>

# Water material by demo

- PG: <Playground id="#1SLLOJ#15" title="Water Material" description="Calm lake"/>
- PG: <Playground id="#1SLLOJ#17" title="Water Material" description="Ocean, play with waves"/>
- PG: <Playground id="#1SLLOJ#18" title="Water Material" description="Deep water, play with water color"/>
- PG: <Playground id="#1SLLOJ#19" title="Water Material" description="Beach"/>

The water material needs at least only a bump texture to render properly.
Just create a new reference of the material and assign its bump texture:

```javascript
var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 512, height: 512, subdivisions: 32 }, scene);

var waterMaterial = new BABYLON.WaterMaterial("water_material", scene);
waterMaterial.bumpTexture = new BABYLON.Texture("bump.png", scene); // Set the bump texture

ground.material = waterMaterial;
```

To reflect and refract the world, you just have to add the wanted meshes to the render list:

```javascript
waterMaterial.addToRenderList(skybox);
waterMaterial.addToRenderList(mesh1);
waterMaterial.addToRenderList(mesh2);
// ... etc.
```

That's all.

# Customize the water material

You can customize special properties of the material:

```javascript
waterMaterial.windForce = 45; // Represents the wind force applied on the water surface
waterMaterial.waveHeight = 1.3; // Represents the height of the waves
waterMaterial.bumpHeight = 0.3; // According to the bump map, represents the pertubation of reflection and refraction
waterMaterial.windDirection = new BABYLON.Vector2(1.0, 1.0); // The wind direction on the water surface (on width and height)
waterMaterial.waterColor = new BABYLON.Color3(0.1, 0.1, 0.6); // Represents the water color mixed with the reflected and refracted world
waterMaterial.colorBlendFactor = 2.0; // Factor to determine how the water color is blended with the reflected and refracted world
waterMaterial.waveLength = 0.1; // The lenght of waves. With smaller values, more waves are generated
```



The Babylon.js materials library is a collection of advanced materials to be used in a Babylon.js scene.



# Asset Libraries

A range of libraries for textures, models and more to load into the playground. These can help you to illustrate issues you may have without having to find a CORs acceptable server to load your own assets into the playground. Also a range of programmable textures and material built using a variety of shaders.

Materials Library

Coming next

Fire Material

The Babylon.js materials library fire effects.

Water Material

The Babylon.js materials library water effect.

Lava Material

The Babylon.js materials library lava effect.

Fur Material

The Babylon.js materials library fur effect.

Normal Material

The Babylon.js materials library illustrates range of normals across the mesh.

Terrain Material

The Babylon.js materials library terrain material displays upto 4 terrain textures.

Tri-Planar Mapping Material

The Babylon.js materials library tri-planar mapping material provides an elegant technique to give realistic textures from any angle or on any complex shape.

Gradient material

The Babylon.js materials library gradient material creates a smooth gradient with two colors.

Sky Material

The Babylon.js materials library sky material allows the creation of dynamic and texture free effects for skyboxes.

Grid Material

The Babylon.js materials library displays a grid across the mesh.

ShadowOnly Material

The Babylon.js materials library ShadowOnlyMaterial displays only shadows casted by a light on a receiving object.

Cell material

The Babylon.js materials library cell material.

Mix Material

The Babylon.js materials library mix map textures.