
![Screenshot](/img/extensions/materials/gradient.webp)

You can get the gradient material by:

* Using npm with npm install --save babylonjs babylonjs-materials
* With a direct reference to: https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.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 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) that can be used to define the speed of the color change along the 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"/>



![Sky Material](/img/extensions/materials/sky.webp)

## Introduction

The sky material allows you 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).
It was 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 implemented in Three.js by [zz85](http://twitter.com/blurspline).

The challenge for skyboxes is to reproduce and configure the sky while accounting for the state of the atmosphere.
In other words, it means determining, for example, how light from the 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

You can customize the appearance of the sky, including the time of day. The properties are:

```javascript
skyMaterial.turbidity = 1; // Represents the amount (scattering) of haze as opposed to molecules in atmosphere
```

![skyTurbidity](/img/extensions/materials/skyTurbidity.webp)

```javascript
skyMaterial.luminance = 1; // Controls the overall luminance of sky in interval [0, 1190]
```

![skyLuminance](/img/extensions/materials/skyLuminance.webp)

```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.webp)

```javascript
skyMaterial.rayleigh = 2; // Represents the sky appearance (globally)
```

![skyRayleigh](/img/extensions/materials/skyRayleigh.webp)

```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.webp)

## 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 fly 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 is considered far enough away, even when the camera is very high.

## Using the sky material to create a reflection texture

A common technique is to use the result of the sky material to reflect the environment, for example when using a PBR material.

The technique consists of creating a reflection probe (which is a cube texture) and rendering the sky mesh with the sky material assigned to it. For example: PG: <Playground id="#4R1H1U" title="Sky Material" description="Example of sky material reflecting the environment"/>



![Tri-Planar Mapping Material](/img/extensions/materials/triPlanar.webp)

# 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 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](/img/extensions/materials/triPlanarProblem.webp)

It should look like this:

![Tri-Planar Mapping Material Resolved](/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.


Gradient material

Using the gradient material

Playground example