# 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.

Source: https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/triPlanarMat

![Tri-Planar Mapping Material](https://doc.babylonjs.com/img/extensions/materials/triPlanar.webp)

# Playground Example

PG: [Playground: Tri-Panar Material](https://playground.babylonjs.com/#E6OZX#9) - Example of tri-planar material

Press "1" to activate the Tri-Planar material (by default).
Press "2" to activate the default material.

# What is tri-planar mapping?
In the case of very large scenes, you are likely to use terrain generated with procedural methods.
In this case, you'll have to compute the vertex positions, normals, UVs, and so on.
One of the trickiest tasks is generating the UV coordinates properly while accounting for possible abrupt changes in the terrain.

For example, an abrupt change can cause this kind of glitch:

![Tri-Planar Mapping Material Problem](https://doc.babylonjs.com/img/extensions/materials/triPlanarProblem.webp)

It should look like this:

![Tri-Planar Mapping Material Resolved](https://doc.babylonjs.com/img/extensions/materials/triPlanarResolved.webp)

The tri-planar mapping material helps resolve this kind of problem and, above all, completely eliminates UV calculations: no UVs needed.

# Using the tri-planar mapping material

The tri-planar material works with at least 3 textures: each texture represents how it is applied along each axis (X, Y, and Z).

Of course, each axis can share the same texture. For 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 dive deeper into 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.