
## 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](/features/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](/features/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/features/divingDeeperEnvironmentSkybox1.jpg"/>



# 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/features/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/features/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/features/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/features/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/features/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/features/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/features/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/features/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/features/divingDeeperBackgroundMat9.jpg"/>

## Environment

Going further, you can take a look at the [Environment documentation](/features/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](/features/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/features/divingDeeperEnvironmentIntro1.jpg" isMain={true} category="Environment"/>

Check out [scene helpers](/features/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/features/divingDeeperEnvironmentIntro2.jpg" isMain={true} category="Environment"/>




Skyboxes

About Skyboxes

Creating a CubeTexture

Making or Finding Skybox Images

Making the Skybox

Further reading

Reflections and Refractions

Learn all about reflection and refraction in Babylon.js.