
![Screenshot](/img/extensions/materials/lava.webp)

PG: <Playground id="#1BLVWO#25" title="Lava Material" description="An example of lava material"/>

The Lava material can be found here: [https://cdn.babylonjs.com/materialsLibrary/babylon.lavaMaterial.js](https://cdn.babylonjs.com/materialsLibrary/babylon.lavaMaterial.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 lava material

The lava material needs at least a noise texture and a diffuse texture to render properly.
Just create a new instance of the material and assign the 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 provides the color of your lava, while the noise texture represents the lava deformation.
Notice that this material updates the position of each vertex on your object. If there are not enough vertices,
some artifacts may appear.

## Lights
By default, the material is affected by lights. If you wish, you can disable this by using 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.
```



![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;
}
```



![Water material](/img/extensions/materials/water.webp)

# Using the water material

The water material can be found here: [https://cdn.babylonjs.com/materialsLibrary/babylon.waterMaterial.js](https://cdn.babylonjs.com/materialsLibrary/babylon.waterMaterial.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."/>

A demo can be found here: PG: <Playground id="#1SLLOJ#20" title="Water Material" description="Example of water material"/>

# Water material demos

- 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 only a bump texture to render properly.
Just create a new instance 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 desired 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 the material with these properties:

```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
```
