
![Screenshot](/img/extensions/materials/normal.webp)

## Playground Example 
    
PG: <Playground id="#22VQKB" title="Normal Material" description="Example of normal material"/>

## Using the normal material

It's 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 also add a diffuse texture to the normal material.
The normal colors will be mixed with the texture color.

```
normalMaterial.diffuseTexture = new BABYLON.Texture("textures/amiga.jpg", scene);
```



![Terrain Material](/img/extensions/materials/terrain.webp)

## 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 to the channels R (red), G (green), and B (blue). (required)

In other words, the Mixmap texture mixes the 3 diffuse textures using the RGB color channels.
A Mixmap texture looks like this (the result is shown in the screenshot above):
![](/img/extensions/materials/terrainMixMap.webp)

The method applied by the terrain material is also called "texture splatting".

```
var terrain = BABYLON.MeshBuilder.CreateGroundFromHeightMap("terrain", "heightMap.png", { width: 100, height: 100, subdivisions: 100, minHeight: 0, maxHeight: 10 }, scene);

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.



![Fur material high](/img/extensions/materials/furHigh.webp)

Fur material can be found here: [https://cdn.babylonjs.com/materialsLibrary/babylon.furMaterial.js](https://cdn.babylonjs.com/materialsLibrary/babylon.furMaterial.js)

<Alert severity="warning" title="Warning" description="The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN."/>

## 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 long been the subject of many theories and conference talks, with multiple implementations made possible by different technologies.
Here, with WebGL, we chose one of these implementations because it is easy to use and performs well with simple models.

First, activate High Level mode, which is enabled by default:

```javascript
furMaterial.highLevelFur = true;
```

That's all. The most difficult part is configuring 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 now works!
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 High Level mode (it is enabled by default, so the following line must be included):

```javascript
furMaterial.highLevelFur = false;
```

![Fur material](/img/extensions/materials/fur.webp)

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 triangular facets in the mesh to work well.
The number of facets needed also depends on the size of the mesh.
Examples that seem to work for the 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 will 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 at 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 meshes, the number of facets per face 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 their own vertices and normals at those 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 produce some artifacts 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;
}
```
