
## How To 360 Photo
360 Photo is a simplex mix of specific geometry, textures, and material properties; however, rather than put the burden on you to figure out how to connect them, we've created the PhotoDome.

## PhotoDome
PhotoDome needs a source image that must be "Equirectangular", without an equirectangular source the class won't function correctly.

Example of equirectangular image:
![equirectangular](//playground.babylonjs.com/textures/360photo.jpg)

## PhotoDome Code
Within the playground you can copy and paste the following into your scene and then adjust the options.

```javascript
photoDome = new BABYLON.PhotoDome("testdome", url, {<options>}, scene);
```

All of the settings in the options object are optional, but the object itself is not. Please provide an empty object at minimum.
All the options are based through the corresponding classes, mainly the dome geometry and the Texture:

* resolution = 32: Integer, lower resolutions have more artifacts at extreme fovs
* size = 1000: Physical radius to create the dome at, defaults to approximately half the far clip plane
* useDirectMapping = true: Use a direct mapping technique to render the video. You should leave this value on unless you want to use the `fovMultiplier` property

<Playground id="#14KRGG#3" title="PhotoDome Example" description="Simple example of how to use a PhotoDome in your scene." image="/img/playgroundsAndNMEs/divingDeeperPhotoDome1.jpg"/>

## FOV adjustment
Sometimes 360 photo can feel an uncomfortable distance from the camera, to help with this a material based FOV adjustment is available.
Adjust it between 0.0 and 2.0 with the following code.

```javascript
photoDome.fovMultiplier = newValue;
```

Please note that `fovMultiplier` only works when using `useDirectMapping = false` creation option.

As a warning, the further the value gets from 1 the more distortion will be visible. Higher resolutions on the photo dome help reduce, but not eliminate, this.

<Playground id="#14KRGG#4" title="PhotoDome using fovMultiplier" description="Simple example of how to use a PhotoDome with fovMultiplier." image="/img/playgroundsAndNMEs/divingDeeperPhotoDome2.jpg"/>

## Image Types
Several types of 360 image exist today. The most common being Monoscopic Panoramic, Stereoscopic Side by Side panoramic and Top bottom panoramic.

The first one represents a panoramic view which is dedicated to one eye. The second one contains two panoramic views dedicated to each eyes whereas the last one contains both panoramic views respectively on the top and bottom of the image.

In the Photo Dome you can change adapt to the type of your image source by using :

```javascript
photoDome.imageMode = BABYLON.PhotoDome.MODE_MONOSCOPIC;
// or
photoDome.imageMode = BABYLON.PhotoDome.MODE_SIDEBYSIDE;
// or
photoDome.imageMode = BABYLON.PhotoDome.MODE_TOPBOTTOM;
```

Examples:

- Side by side: <Playground id="#WP9WDU" title="Steroscopic SidexSide Panoramic" description="Simple example of using a photoDome with a stereoscopic side by side panoramic source." image="/img/playgroundsAndNMEs/divingDeeperPhotoDome3.jpg"/>
- Top bottom: <Playground id="#SM3YHE" title="Top Bottom Panoramic" description="Simple example of using a photoDome with a top bottom panoramic source." image="/img/playgroundsAndNMEs/divingDeeperPhotoDome2.jpg"/>


## How To 360 Photo with WebVR
You can combine 360 Photo with WebVR. Just add the following code.

```javascript
 var vrHelper = scene.createDefaultVRExperience();
```
It will also create an enterVR button at the bottom right of the screen which will start rendering to the HMD on click.

You can come back to 2D view with adding the following code.

```javascript
scene.actionManager = new BABYLON.ActionManager(scene);

// From 2D view to fullscreen VR
scene.actionManager.registerAction(
new BABYLON.ExecuteCodeAction({
        trigger: BABYLON.ActionManager.OnKeyDownTrigger,
        parameter: 's' //press "s" key
    },
    function () { vrHelper.enterVR(); }
));

// From fullscreenVR to 2D view
scene.actionManager.registerAction(
new BABYLON.ExecuteCodeAction({
        trigger: BABYLON.ActionManager.OnKeyDownTrigger,
        parameter: 'e' //press "e" key
    },
    function () { vrHelper.exitVR(); document.exitFullscreen();}
));
```


## How To 360 Video

360 Video is a simplex mix of specific geometry, textures, and material properties; however, rather than put the burden on you to figure out how to connect them, we've created the VideoDome.

Note that the video dome also supports 180 degrees video. Read below for further information.

## VideoDome

VideoDomes rely heavily on the [VideoTexture](/divingDeeper/materials/using/videoTexture) class, check out it's documentation so that some parameters make more sense.
The source video itself should be "Equirectangular", without an equirectangular source the class won't function correctly.

## VideoDome Code

Within the playground you can copy and paste the following into your scene and then adjust the options.

``` javascript
videoDome = new BABYLON.VideoDome("videoDome", url, { < options >
}, scene);
```

All of the settings in the options object are optional, but the object itself is not. Please provide an empty object at minimum.

All the options are based through the corresponding classes, mainly the dome geometry and the VideoTexture:

* resolution = 32: Integer, defines the resolution of the sphere used to host the video. Lower resolutions have more artifacts at extreme fovs
* clickToPlay = false: Add a click to play listener to the video, does not prevent autoplay
* autoPlay = true: Automatically attempt to begin playing the video. Will auto mute the audio and try again if 1st attempt to play fails due to browser policy.
* loop = true: Automatically loop video on end
* size = 1000: Physical radius to create the dome at, defaults to approximately half the far clip plane
* poster: URL of the image displayed during the video loading or until the user interacts with the video
* useDirectMapping = true: Use a direct mapping technique to render the video. You should leave this value on unless you want to use the `fovMultiplier` property
* halfDomeMode = false: Enable the support for 180 videos instead of 360.

<Playground id="#SQ5UC1#22" title="Playground Example of a VideoDome" description="Simple example of using a videoDome in your scene." image="/img/playgroundsAndNMEs/divingDeeperVideoDome1.jpg"/>


## Auto Play

Modern browsers have strict policies for auto playing video. See  [VideoTexture](/divingDeeper/materials/using/videoTexture) documentation for details.  The underlying VideoTexture used by VideoDome is available as `videoTexture`.  Code to manually play video might look like this:

``` javascript
scene.onPointerDown = function () {
    videoDome.videoTexture.video.play();
    scene.onPointerDown = null;
};

```

That is essentially what the `clickToPlay=true` option does. However, there can be non-obvious interactions with `autoPlay` in certain browsers, especially when `autoPlay=false`.  

## FOV adjustment

Sometimes 360 Video can feel an uncomfortable distance from the camera, to help with this a material based FOV adjustment is available.
Adjust it between 0.0 and 2.0 with the following code.

``` javascript
videoDome.fovMultiplier = newValue;
```

Please note that `fovMultiplier` only works when using `useDirectMapping = false` creation option.

As a warning, the further the value gets from 1 the more distortion will be visible. Higher resolutions on the video dome help reduce, but not eliminate, this.

<Playground id="#SQ5UC1#0" title="VideoDome with fovMultiplier" description="Simple example of using a videoDome with an fovMultiplier." image="/img/playgroundsAndNMEs/divingDeeperVideoDome2-fov.jpg"/>

## Video Types

Several types of 360 video exist today. The most common being Monoscopic Panoramic, Stereoscopic Side by Side panoramic and Top bottom panoramic.

The first one represents a panoramic view which is dedicated to one eye. The second one contains two panoramic views dedicated to each eyes whereas the last one contains both panoramic views respectively on the top and bottom of the video.

In the video Dome you can change adapt to the type of your source video by using :

``` javascript
videoDome.videoMode = BABYLON.VideoDome.MODE_MONOSCOPIC;
// or
videoDome.videoMode = BABYLON.VideoDome.MODE_SIDEBYSIDE;
// or
videoDome.videoMode = BABYLON.VideoDome.MODE_TOPBOTTOM;
```

## 180 Video

Another format of VR-enabled videos are the 180 degrees videos. The front of the user is recorded, but the back is black.

There are two ways to enable the 180 video mode (which we call `half dome mode` ):

* During construction enable the halfDomeMode in the options:

``` javascript
let videoDome = new BABYLON.VideoDome(
    "videoDome",
    ["https://videourl.com/videos/180.mp4"], {
        resolution: 32,
        clickToPlay: true,
        halfDomeMode: true
    },
    scene
);
```

* set `videoDome.halfDome` to true : 

``` javascript
let videoDome = ....
videoDome.halfDome = true;
```


## Disposal
When disposing a video dome, the second parameter is important to make sure the texture resources are also disposed.
```javascript
videoDome.dispose(false, true)
```
See also documentation regarding [VideoTexture disposal](/divingDeeper/materials/using/videoTexture#disposal). 



# Background Material

## Introduction

As fully lit materials are not always desired in a scene. We are introducing a new unlit and fast material to help addressing the constraints you may have with standard or PBR materials.

The background material is fully unlit but can still receive shadows or be subject to image processing information. This makes it the best fit to use as a skybox or ground material.

![background](/img/how_to/backgroundMaterial.png)

## Diffuse

The diffuse part is used to simply give a color to the mesh.

```javascript
backgroundMaterial.diffuseTexture = new BABYLON.Texture("textures/grass.jpg", scene);
```

You can see an example of this here: <Playground id="#157MGZ" title="Simple Diffuse Background Material" description="Simple example of how to add an unlit diffuse material to your scene." image="/img/playgroundsAndNMEs/divingDeeperBackgroundMat1.jpg"/>

### Shadows

The material is able to receive shadows despite being unlit \o/ This is actually one of its strength making it really attractive for grounds. If you want to dim the amount of shadows, you can use the dedicated properties:

```javascript
backgroundMaterial.shadowLevel = 0.4;
```

You can see an example here: <Playground id="#G3HSAW#3" title="Background Material with Shadows" description="Simple example of a background material receiving shadows." image="/img/playgroundsAndNMEs/divingDeeperBackgroundMat2.jpg"/>

Starting from Babylonjs v4.2, there's also a new `shadowOnly` property that only renders shadow, making the material behave like the `ShadowOnlyMaterial` material but without the single light restriction.

When `shadowOnly = true`, you can use `primaryColor` to tint the shadow color and `alpha` to make the shadows more or less strong: <Playground id="#G3HSAW#33" title="Background Material with Tinted Shadows" description="Simple example of a background material receiving tinted shadows." image="/img/playgroundsAndNMEs/divingDeeperBackgroundMat3.jpg"/>

### Opacity

As you might want to make a transparent ground, if the diffuse texture contains some transparency information, they will be used by the material.

```javascript
backgroundMaterial.diffuseTexture.hasAlpha = true;
```

You can see an example here: <Playground id="#G3HSAW#4" title="Background Material with Transparnecy" description="Simple example of a background material with transparency." image="/img/playgroundsAndNMEs/divingDeeperBackgroundMat4.jpg"/>

### Opacity Fresnel

Also, by default the ground will disappear as your eyes are close to being aligned with it. This prevents a harsh cut navigating in the scene. It is possible to disable it by:

```javascript
backgroundMaterial.opacityFresnel = false;
```

You can see an example here: <Playground id="#G3HSAW#5" title="Removing opacityFresnel" description="Simple example of turning off the opacityFresnel of the background material." image="/img/playgroundsAndNMEs/divingDeeperBackgroundMat5.jpg"/>

## Reflection

Unlit materials are a great fit to create skybox. You can, exactly like with the standard material, set your reflection texture:

```javascript
backgroundMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
backgroundMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
```

You can see an example here:<Playground id="#G3HSAW#6" title="Background Material with Reflection Texture" description="Simple example of a background material with a reflection texture." image="/img/playgroundsAndNMEs/divingDeeperBackgroundMat6.jpg" isMain={true} category="Environment"/>

### Mirror

As the reflection can be compared to the standard material, using a mirror works also in the same way.

```javascript
var mirror = new BABYLON.MirrorTexture("mirror", 512, scene);
mirror.mirrorPlane = new BABYLON.Plane(0, -1, 0, 0);
mirror.renderList.push(sphere);

backgroundMaterial.reflectionTexture = mirror;
```

You can see an example here: <Playground id="#G3HSAW#9" title="Background Material with Mirror Reflection Texture" description="Simple example of a background material with a mirror reflection texture." image="/img/playgroundsAndNMEs/divingDeeperBackgroundMat7.jpg"/>

### Reflection Fresnel

As we can both use reflection and diffuse, reflection fresnel can help feeling more immersed in the experience:

```javascript
var backgroundMaterial = new BABYLON.BackgroundMaterial("backgroundMaterial", scene);
backgroundMaterial.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/backgroundGround.png", scene);
backgroundMaterial.diffuseTexture.hasAlpha = true;
backgroundMaterial.opacityFresnel = false;
backgroundMaterial.shadowLevel = 0.4;

var mirror = new BABYLON.MirrorTexture("mirror", 512, scene);
mirror.mirrorPlane = new BABYLON.Plane(0, -1, 0, 0);
mirror.renderList.push(sphere);
backgroundMaterial.reflectionTexture = mirror;
backgroundMaterial.reflectionFresnel = true;
backgroundMaterial.reflectionStandardFresnelWeight = 0.8;

ground.material = backgroundMaterial;
```

You can see an example here: <Playground id="#G3HSAW#10" title="Reflection Fresnel Example" description="Simple example of a using reflection fresnel." image="/img/playgroundsAndNMEs/divingDeeperBackgroundMat8.jpg"/>

## Misc and Colors

As from time to time all we need is color, you can use the texture as gray scaled information to mix with a color.

```javascript
backgroundMaterial.useRGBColor = false;
backgroundMaterial.primaryColor = BABYLON.Color3.Magenta();
```

You can see an example here: <Playground id="#G3HSAW#11" title="Mix Gray Scale and Color" description="Simple example of a mixing grayscale and color." image="/img/playgroundsAndNMEs/divingDeeperBackgroundMat9.jpg"/>

## Environment

Going further, you can take a look at the [Environment documentation](/start/chap5/sky) where you can find information on how to speed up the setup of your scene with a skybox and a ground.



# Environment

How do you achieve a good and appropriately realistic environment for your game or app? We will start off with simple scene `clearColor` (background color), then talk briefly about scene `ambientColor`, then on to 6-texture skyboxes, and then fog to give an illusion of depth to your scenes.

![Environment](/img/how_to/13.JPG)

_A picture showing Babylon.js fog in action_

## How can I do this?

We will talk about that nice fog effect, shortly. First, I want to introduce you to two interesting properties on the [scene class object](/typedoc/classes/babylon.scene):

* `scene.clearColor` - changes the 'background' color.
* `scene.ambientColor` - changes the color used in several effects, including ambient lighting.

Both of them are very useful, and powerful in their own right.

### Changing the Background color (`scene.clearColor`)

The 'clearColor' property on the scene object is the most rudimentary of environment properties/adjustments. Simply stated, this is how you change the background color of the scene. Here is how it is done:

```javascript
scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);
```
Or maybe you want to use one of our preset colors and avoid using the `new` keyword:
```javascript
scene.clearColor = BABYLON.Color3.Blue();
```
This color and property is not used in any calculations for the final colors of mesh, materials, textures, or anything else. It is simply the background color of the scene. Easy.

### Changing the Ambient color (`scene.ambientColor`)

Conversely, the `ambientColor` property on the scene object is a very powerful and influential environment property/adjustment. First, let's have a look at its syntax:

```javascript
scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);
```
As you can see, it is set using the same format as `clearColor`, but `ambientColor` is used in quite a few calculations toward determining the final colors of scene items.&nbsp; Mainly, it is used in conjunction with a mesh's `StandardMaterial.ambientColor` to determine a FINAL `ambientColor` for the mesh material. 

You will find that when there is no `scene.ambientColor`, then `StandardMaterial.ambientColor` and `StandardMaterial.ambientTexture` will appear to do nothing.&nbsp; Set a `scene.ambientColor` of some value, like the example above, and `StandardMaterial.ambientColor`/`StandardMaterial.ambientTexture` will become active on meshes where you have applied such.

By default, `scene.ambientColor` is set to `Color3(0, 0, 0)`, which means there is no `scene.ambientColor`.

(Please see the section on ambientColors in our [Unleash the Standard Material](https://www.eternalcoding.com/babylon-js-unleash-the-standardmaterial-for-your-babylon-js-game/) tutorial, for more information.)

### Skybox

To give a perfect illusion of a beautiful sunny sky, we are going to create a simple box, but with a special texture.
There are two ways to create a skybox. Let's start with the manual one to understand how things work under the hood and then we will be able to use the automatic one.

#### Manual creation
First, our box, nothing new, just take notice of the disabled [backface culling](https://en.wikipedia.org/wiki/Back-face_culling):
```javascript
var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.disableLighting = true;
skybox.material = skyboxMaterial;
```

Next, we set the `infiniteDistance` property. This makes the skybox follow our camera's position.
```javascript
skybox.infiniteDistance = true;
```

Now we must remove all light reflections on our box (the sun doesn't reflect on the sky!):
```javascript
skyboxMaterial.disableLighting = true;
```

Next, we apply our special sky texture to it. This texture must have been prepared to be a skybox, in a dedicated directory, named “skybox” in our example:
```javascript
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
```
(More about reflectionTextures can be found in our [Unleash the Standard Material](https://www.eternalcoding.com/babylon-js-unleash-the-standardmaterial-for-your-babylon-js-game/) tutorial.)

In that `/skybox` directory, we must find 6 sky textures, one for each face of our box. Each image must be named per the corresponding face: “skybox_nx.jpg” (left), “skybox_ny.jpg” (down), “skybox_nz.jpg” (back), “skybox_px.jpg” (right), “skybox_py.jpg” (up), “skybox_pz.jpg” (front). The "\_nx.jpg" is added to your path.

Skybox textures need not be textures of sky alone. You can search the Internet for skyboxes and find buildings, hills, mountains, trees, lakes, planets, stars, you name it (all can be used nicely) as part of skybox textures, but some require a payment.

You can also use dds files to specify your skybox. These special files can contain all information required to setup a cube texture:

```javascript
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("/assets/textures/SpecularHDR.dds", scene);
```

Final note, if you want your skybox to render behind everything else, set the skybox's `renderingGroupId` to `0`, and every other renderable object's `renderingGroupId` greater than zero, for example:
```javascript
skybox.renderingGroupId = 0;

// Some other mesh
myMesh.renderingGroupId = 1;
```

More info about rendering groups and rendering order can be found [here](/divingDeeper/materials/advanced/transparent_rendering).

#### Automatic creation
Now that we understand how a skybox can be created let's move to a simpler way:

```javascript
var envTexture = new BABYLON.CubeTexture("/assets/textures/SpecularHDR.dds", scene);
scene.createDefaultSkybox(envTexture, true, 1000);
```

<Playground id="#BH23ZD#1" title="Playground Example Skybox Helper" description="Simple example of using the Skybox Helper." image="/img/playgroundsAndNMEs/divingDeeperEnvironmentIntro1.jpg" isMain={true} category="Environment"/>

Check out [scene helpers](/divingDeeper/scene/fastBuildWorld#environmental-helper) for more information on this and other helpers.

### Fog

Fog is quite an advanced effect, but fog in Babylon.js has been simplified to the maximum. It’s now very easy to add fog to your scenes.&nbsp; First, we define the fog mode like this:

```javascript
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
```

Here are the available modes:
- `BABYLON.Scene.FOGMODE_NONE` - default one, fog is deactivated.
- `BABYLON.Scene.FOGMODE_EXP` - the fog density is following an exponential function.
- `BABYLON.Scene.FOGMODE_EXP2` - same that above but faster.
- `BABYLON.Scene.FOGMODE_LINEAR` - the fog density is following a linear function.

If you choose the `EXP`, or `EXP2` mode, then you can define the density option (default is `0.1`):
```javascript
scene.fogDensity = 0.01;
```
Otherwise, if you choose `LINEAR` mode, then you can define where fog starts and where fog ends:
```javascript
scene.fogStart = 20.0;
scene.fogEnd = 60.0;
```

Finally, whatever the mode, you can specify the color of the fog (default is `BABYLON.Color3(0.2, 0.2, 0.3)`):
```javascript
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
```
See, we told you it was easy.

If you want to see and play with the playground scene for this tutorial, you can check it out here: <Playground id="#7G0IQW" title="Simple Fog Example" description="Simple example of how to add fog to your scene." image="/img/playgroundsAndNMEs/divingDeeperEnvironmentIntro2.jpg" isMain={true} category="Environment"/>





## How to use Lens Flares

Babylon.js allows you to simply create lens flares effect:

![Lens flares](/img/features/lensFlare.jpg)

<Playground id="#TQ67L1#5" title="Lens Flares" description="Show how to create a lens flares" />

To do so, you have to first create a LensFlareSystem:

```javascript
var lensFlareSystem = new BABYLON.LensFlareSystem("lensFlareSystem", myEmitter, scene);
```

The second parameter defines the source (the emitter) of the lens flares (it can be a camera, a light or a mesh).

Then, you can add flares to your system with the following code:
```javascript
var flare00 = new BABYLON.LensFlare(
    0.1, // size
    0, // position
    new BABYLON.Color3(1, 1, 1), // color
    "textures/flare.png", // texture
    lensFlareSystem // lens flare system
);
var flare01 = new BABYLON.LensFlare(0.075, 0.5, new BABYLON.Color3(0.8, 0.56, 0.72), "textures/flare3.png", lensFlareSystem);
var flare02 = new BABYLON.LensFlare(0.1, -0.15, new BABYLON.Color3(0.71, 0.8, 0.95), "textures/Flare2.png", lensFlareSystem);
var flare03 = new BABYLON.LensFlare(0.15, 0.25, new BABYLON.Color3(0.95, 0.89, 0.71), "textures/flare.png", lensFlareSystem);
```

To create a flare, you must specify the following parameters:

- Size (a floating value between 0 and 1) 
- Position (a floating value between -1 and 1). A value of 0 is located on the emitter. A value greater than 0 is beyond the emitter and a value lesser than 0 is behind the emitter 
- Color 
- Texture 

Babylon.js can also detect occlusions for you. A mesh can occlude the lens flares if the following conditions are met:

- has a material
- isVisible === true
- isEnabled() === true
- isBlocker === true



## How to use Reflection probes
![Reflection Probes example](/img/reflectionProbe.jpg)

Reflection probes are used to dynamically generate cube maps that can the be used as reflection textures for instance.

Here is how to use them:

```
var probe = new BABYLON.ReflectionProbe("main", 512, scene);
probe.renderList.push(yellowSphere);
probe.renderList.push(greenSphere);	
probe.renderList.push(blueSphere);	
probe.renderList.push(mirror);	

mainMaterial.reflectionTexture = probe.cubeTexture;
```

As you can see, you have to define which meshes will be rendered by the reflection probe.

**You have to be cautious with reflection probes as they need to actually generate 6 textures per frame (One per face).**

You can change the update rate (on every frame by default) with this code:

```
probe.refreshRate = BABYLON.RenderTargetTexture.REFRESHRATE_RENDER_ONCE;	
// or
probe.refreshRate = BABYLON.RenderTargetTexture.REFRESHRATE_RENDER_ONEVERYFRAME;	
// or
probe.refreshRate = BABYLON.RenderTargetTexture.REFRESHRATE_RENDER_ONEVERYTWOFRAMES;
// or
probe.refreshRate = 3;
```

To get the best possible rendering, you also need to move your probe at the center of the mesh which should use the generated cube map.
(Internally the probe will generate a ghost camera at the specific position and will then render the faces from there). You have two options to achieve this:

```
probe.attachToMesh(root);
// or
probe.position = new BABYLON.Vector3(0, 1, 0);
```

If you want to try it, check this out: <Playground id="#KA93U#243" title="Reflection Probe Example" description="Simple example of how to use reflection probes in your scene." image="/img/playgroundsAndNMEs/divingDeeperReflectionProbes1.jpg"/> 

## Probes and PBR

If you want to achieve the highest quality for your PBR materials using probes for realtime reflections, the engine needs additionnal processing to achieve the right glossiness / roughness effect.
Getting it right is really simple, first setup a probe on your mesh with a PBR material, as described in the previous paragraph. Then you need to enable this flag on your material :

```
mainMaterial.reflectionTexture = probe.cubeTexture;
mainMaterial.realTimeFiltering = true;
```

This flag will ensure your PBR material is correctly rendered with the probe. However, this flag involves more GPU processing for your materials, so be sure to use it wisely. In order to keep performance under control, you can set the quality of the filtering process of your material :

```
mainMaterial.realTimeFilteringQuality = BABYLON.Constants.TEXTURE_FILTERING_QUALITY_MEDIUM;
```

Default is `TEXTURE_FILTERING_QUALITY_LOW`. Try with different qualities and see what's the best performance / quality tradeoff for your scene.

Here is a playground example with a reflection probe and PBR material: <Playground id="#FEEK7G#116" title="Reflection Probe and PBR Example" description="Simple example of how to use reflection probes with PBR in your scene." image="/img/playgroundsAndNMEs/divingDeeperReflectionProbes2.jpg"/> 

You can also have a look at this [blog post](https://medium.com/@babylonjs/real-time-pbr-filtering-is-coming-to-babylon-cb0e81159d79) for more info about HDR filtering.



## About Skyboxes

A simulated sky can be added to a scene using a "skybox" ([wikipedia]([https://en.wikipedia.org/wiki/Skybox_(video_games)](https://en.wikipedia.org/wiki/Skybox_(video_games)))). A skybox is a large standard cube surrounding the scene, with a sky image painted on each face. (Images are a lot easier and faster to render than 3D objects, and just as good for far-distant scenery.)

In Babylon.js, skyboxes typically use [CubeTexture](/typedoc/classes/babylon.cubetexture) as a [pseudo-reflection texture](#making-the-skybox) on a large cube.

## Creating a CubeTexture

The [CubeTexture constructor](/typedoc/classes/babylon.cubetexture#constructor) takes a base URL and (by default) appends "\_px.jpg", "\_nx.jpg", "\_py.jpg", "\_ny.jpg", "\_pz.jpg" and "\_nz.jpg" to load the +x, -x, +y, -y, +z, and -z facing sides of the cube. (These suffixes may be customized if needed.)

CubeTexture images need to be .jpg format (unless the suffixes are customized) and square. For efficiency, use a power of 2 size, like 1024x1024.

![Diagram of X/Y/Z axes and CubeTexture sides](/img/how_to/Materials/cubetexture1.png)

Note, despite being a "Texture", CubeTexture can ONLY be used with [reflectionTexture and refractionTexture](/divingDeeper/materials/using/reflectionTexture), NOT other Material properties like diffuseTexture. [See below](#makingtheskybox) for the appropriate settings for a skybox.

## Making or Finding Skybox Images

This is an example set of skybox images:

| <img src="/img/getstarted/skybox_px.jpg" width="100" height="100" alt="some clouds"/> | <img src="/img/getstarted/skybox_nx.jpg" width="100" height="100" alt="more clouds"/> | <img src="/img/getstarted/skybox_py.jpg" width="100" height="100" alt="the sun overhead"/> | <img src="/img/getstarted/skybox_ny.jpg" width="100" height="100" alt="solid gray"/> | <img src="/img/getstarted/skybox_pz.jpg" width="100" height="100" alt="more clouds"/> | <img src="/img/getstarted/skybox_nz.jpg" width="100" height="100" alt="more clouds"/> |
| :-----------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------: |
|                                     skybox_px.jpg                                     |                                     skybox_nx.jpg                                     |                                       skybox_py.jpg                                        |                                    skybox_ny.jpg                                     |                                     skybox_pz.jpg                                     |                                     skybox_nz.jpg                                     |

<br/>

Notice that the images match seamlessly at the edges of the box:

<table style={{width: 0}}><tbody>
<tr>
  <th style={{padding: 0}}><img src="/img/getstarted/skybox_nz.jpg" width="100" height="100" alt="some clouds"/></th>
  <th style={{padding: 0}}><img src="/img/getstarted/skybox_nx.jpg" width="100" height="100" alt="adjacent clouds"/></th>
  <th style={{padding: 0}}><img src="/img/getstarted/skybox_pz.jpg" width="100" height="100" alt="adjacent clouds"/></th>
  <th style={{padding: 0}}><img src="/img/getstarted/skybox_px.jpg" width="100" height="100" alt="adjacent clouds"/></th>
  <th style={{padding: 0}}><img src="/img/getstarted/skybox_nz.jpg" width="100" height="100" alt="wrapping around to the original clouds"/></th>
</tr>
<tr>
  <td>_nz</td>
  <td>_nx</td>
  <td>_pz</td>
  <td>_px</td>
  <td>_nz (again)</td>
</tr>
</tbody></table>
<p></p>

You can search the web for "skybox images" to find many examples. These are often a single image of an unfolded cube, which you would need to slice into the six separate images for CubeTexture to load. The [cube textures in the playground library](/toolsAndResources/assetLibraries/availableTextures#cubetextures) may also be useful, and they are already in the appropriate format.

## Making the Skybox

Cube textures must be applied using [reflectionTexture](/divingDeeper/materials/using/reflectionTexture) even though skyboxes are not actually reflections; set [coordinatesMode](/typedoc/classes/babylon.texture#coordinatesmode) to SKYBOX_MODE to paint the texture directly on the cube rather than simulating reflection.

Within the playground you can copy and paste the following into your scene:

```javascript
var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;
```

To use your own skybox images, make them web-accessible (a localhost server is okay), and change the `BABYLON.CubeTexture` call:

```javascript
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("URL TO IMAGE DIRECTORY/COMMON PART OF IMAGE FILENAMES", scene);
```

<Playground id="#UU7RQ#1" title="Simple Skybox Example" description="Simple example of how to add a skybox to your scene." image="/img/playgroundsAndNMEs/divingDeeperEnvironmentSkybox1.jpg"/>



## Realistic Environments

Of course working on games or apps the level of realism achieved will depend on your design decisions. Babylon.js can help you achieve whatever level you wish and in this section we will cover some of the ways to do this. For example lighting the background, lens flare, adding sky and fog or working with HDR.

Other ways need a section to themselves, such as infinite terrains, post processes and shaders.


This tutorial will guide you through the process of creating a procedural texture for the [procedural textures library](https://github.com/BabylonJS/Babylon.js/tree/master/packages/dev/proceduralTextures)

## Setting up environment

First of all, you need to create a folder for your shader in the /proceduralTexturesLibrary/src folder. Let's call it **cloudBis**.

Then you need to create your files:

- babylon.**cloudBis**ProceduralTexture.ts (just copy/paste from babylon.woodProceduralTexture.ts )
- **cloudBis**ProceduralTexture.fragment.fx (just copy/paste from woodProceduralTexture.fragment.fx )

To integrate your new procedural texture to the build process, you have to edit the config.json file in the tools/gulp folder and add an entry in the "proceduralTextureLibrary/libraries" section of the file:

```javascript
  "libraries": [
    ...
      {
        "output": "babylon.brickProceduralTexture.min.js",
        "entry": "./legacy/legacy-brick.ts",
        "preventLoadLibrary": true
      }
    ...
  ]
```

To build all the procedural textures and generate the _dist_ folder, just run from the tools/gulp folder:

```bash
gulp proceduralTextureLibrary
```

## Update the shaders

Open the **cloudBisProceduralTexture.fragment.fx** file.
The shader is composed of 3 parts:

- The variables and uniforms definition

```
precision highp float;

varying vec2 vUV;

uniform vec4 skyColor;
uniform vec4 cloudColor;

```

- All the functions you need (here **rand**, **noise** and **fbm**)

```
float rand(vec2 n) {
	return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
}

float noise(vec2 n) {
	const vec2 d = vec2(0.0, 1.0);
	vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
	return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
}

float fbm(vec2 n) {
	float total = 0.0, amplitude = 1.0;
	for (int i = 0; i < 4; i++) {
		total += noise(n) * amplitude;
		n += n;
		amplitude *= 0.5;
	}
	return total;
}
```

- The **main** function which is the one called to get the pixel color

```c
void main() {
	vec2 p = vUV * 12.0;
	vec4 c = mix(skyColor, cloudColor, fbm(p));
	gl_FragColor = c;
}
```

## Write the procedural texture

The procedural texture is a .ts file. It contains a class which has to inherit from the **ProceduralTexture** class.

To be sure that you have intelliSense and that the compilation phase works well you have to add a reference at the top of your **babylon.cloudBisProceduralTexture.ts** file :

```javascript
/// <reference path="../../../dist/preview release/babylon.d.ts"/>
```

The main part of the magic for a procedural texture is happening in the shader file. The TypeScript file is mainly here to give its caller the ability to set values for uniforms and pass it to the shader itself.
By convention we create a function named **updateShaderUniforms()** which will be called from the construtor and in every setters for each property.

Here is an example for the CloudBisProceduralTexture.

As you can see the **setXXX** function is used to send a specific value to the shader.

The shader is called by its name in the constructor using the **super** function.

```javascript
module BABYLON {
    export class CloudBisProceduralTexture extends ProceduralTexture {
        private _skyColor = new Color4(0.15, 0.68, 1.0, 1.0);
        private _cloudColor = new Color4(1, 1, 1, 1.0);

        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
            super(name, size, "cloudProceduralTexture", scene, fallbackTexture, generateMipMaps);
            this.updateShaderUniforms();
            this.refreshRate = 0;
        }

        public updateShaderUniforms() {
            this.setColor4("skyColor", this._skyColor);
            this.setColor4("cloudColor", this._cloudColor);
        }

        public get skyColor(): Color4 {
            return this._skyColor;
        }

        public set skyColor(value: Color4) {
            this._skyColor = value;
            this.updateShaderUniforms();
        }

        public get cloudColor(): Color4 {
            return this._cloudColor;
        }

        public set cloudColor(value: Color4) {
            this._cloudColor = value;
            this.updateShaderUniforms();
        }
    }
}
```

## Update the test page

To test your material, open the /proceduralTextureLibrary/index.html page. References are added automatically.

Then add the procedural texture line 192:

```javascript
var cloudBis = new BABYLON.CloudBisProceduralTexture("cloudPTBis", 256, scene);
```

Finally update the UI control:

```javascript
gui.add(options, "texture", ["default", "fire", "wood", "cloud", "grass", "road", "brick", "marble", "starfield", "cloudBis"]).onFinishChange(function () {
  resetPTOptions();
  switch (options.texture) {
    case "fire":
      currentTexture = firePT;
      addPToptions(firePT, ["time", "alphaThreshold", "speed"]);
      break;
    case "wood":
      currentTexture = woodPT;
      addPToptions(woodPT, ["ampScale", "woodColor"]);
      break;
    case "cloud":
      currentTexture = cloudPT;
      addPToptions(cloudPT, ["skyColor", "cloudColor"]);
      break;
    case "grass":
      currentTexture = grassPT;
      addPToptions(grassPT, ["groundColor"]);
      break;
    case "road":
      currentTexture = roadPT;
      addPToptions(roadPT, ["roadColor"]);
      break;
    case "brick":
      currentTexture = brickPT;
      addPToptions(brickPT, ["numberOfBricksHeight", "numberOfBricksWidth", "brickColor", "jointColor"]);
      break;
    case "marble":
      currentTexture = marblePT;
      addPToptions(marblePT, ["numberOfTilesHeight", "numberOfTilesWidth", "amplitude", "jointColor"]);
      break;
    case "starfield":
      currentTexture = starfieldPT;
      addPToptions(starfieldPT, ["saturation", "distfading", "darkmatter", "alpha", "time", "beta", "zoom", "formuparam", "stepsize", "tile", "brightness"]);
      break;
    case "cloudBis":
      currentTexture = cloudBis;
      break;
    case "none":
    default:
      currentTexture = diffuseTexture;
      break;
  }

  std.diffuseTexture = currentTexture;
  window.enableTexture(options.texture);
});
```

## (Optional) enable a graphical interface.

If your procedural texture contains properties that allows the dev to customize it, you can enable an interface to change them live in the sample.

To do that, you only have to add a call to the **addPToptions** helper function in your **case**

Your code will look like this :

```javascript
case "cloudBis":
currentTexture = cloudBis;
addPToptions(cloudBis, ['skyColor', 'cloudColor']);
break;
```

The first parameter is the texture object and the second one is an array containing the list of properties you want to make editable in the sample.

## Launch the test server

To Launch the server, you can start from the tools/gulp folder:

```bash
gulp webserver
```


Environment

Realistic Environments

Coming next

Skyboxes

Learn how to add a skybox to your Babylon.js scene.

Environment

Begin your learning about environments in Babylon.js.

Background Material

Learn how to add a background material to your Babylon.js scene.

Lens Flares

Learn how to use lens flares in your Babylon.js scene.

Reflection Probes

Learn how to use reflection probes in your Babylon.js scene.

360 Photo Domes

Learn all about Babylon.js 360 photo domes.

360 Video Domes

Learn all about Babylon.js 360 video domes.