
![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"/>



![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"/>



![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.


Gradient material

Using the gradient material

Playground example