
## How To 360 Photo

360 Photo is a simple 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 passed through to 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.webp"/>

## FOV adjustment

Sometimes a 360 photo can feel uncomfortably distant 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 the `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 this, but not eliminate it.

<Playground id="#14KRGG#4" title="PhotoDome using fovMultiplier" description="Simple example of how to use a PhotoDome with fovMultiplier." image="/img/playgroundsAndNMEs/divingDeeperPhotoDome2.webp"/>

## Image Types

Several types of 360 images exist today. The most common are Monoscopic Panoramic, Stereoscopic Side-by-Side panoramic, and Top-Bottom panoramic.

The first one represents a panoramic view dedicated to one eye. The second one contains two panoramic views dedicated to each eye, whereas the last one contains both panoramic views on the top and bottom of the image, respectively.

In the PhotoDome, you can adapt it to the type of your source image 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.webp"/>
- 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.webp"/>

## How To 360 Photo with WebVR

You can combine 360 Photo with WebVR. Just add the following code:

```javascript
vrHelper = scene.createDefaultVRExperience();
```

It will also create an enterVR button at the bottom right of the screen that will start rendering to the HMD when clicked.

You can come back to 2D view by 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 fullscreen VR 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 simple 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-degree video. Read below for more information.

## VideoDome

VideoDomes rely heavily on the [VideoTexture](/features/featuresDeepDive/materials/using/videoTexture) class. Check out its 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 passed through to 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 attempts to begin playing the video. It will auto-mute the audio and try again if the first 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#457" title="Playground Example of a VideoDome" description="Simple example of using a videoDome in your scene." image="/img/playgroundsAndNMEs/divingDeeperVideoDome1.webp"/>

## Auto Play

Modern browsers have strict policies for autoplaying video. See the [VideoTexture](/features/featuresDeepDive/materials/using/videoTexture) documentation for details. The underlying VideoTexture used by VideoDome is available as `videoTexture`. Code to manually play the 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 uncomfortably distant 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 the `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 this, but not eliminate it.

<Playground id="#SQ5UC1#458" title="VideoDome with fovMultiplier" description="Simple example of using a videoDome with an fovMultiplier." image="/img/playgroundsAndNMEs/divingDeeperVideoDome2-fov.webp"/>

## Video Types

Several types of 360 video exist today. The most common are Monoscopic Panoramic, Stereoscopic Side-by-Side panoramic, and Top-Bottom panoramic.

The first one represents a panoramic view dedicated to one eye. The second one contains two panoramic views dedicated to each eye, whereas the last one contains both panoramic views on the top and bottom of the video, respectively.

In the VideoDome, you can adapt it 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 VR-enabled video format is 180-degree video. The area in front of the user is recorded, but the back is black.

There are two ways to enable 180 video mode (which we call `half dome mode`):

- During construction, enable `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](/features/featuresDeepDive/materials/using/videoTexture#disposal).



# Background Material

## Introduction

Fully lit materials are not always desired in a scene. We are introducing a new unlit and fast material to help address the constraints you may have with standard or PBR materials.

The background material is fully unlit but can still receive shadows and be subject to image processing. This makes it a great fit for use as a skybox or ground material.

![background](/img/how_to/backgroundMaterial.webp)

## 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.webp"/>

### Shadows

The material is able to receive shadows despite being unlit \o/ This is actually one of its strengths, making it very attractive for grounds. If you want to reduce the amount of shadow, 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.webp"/>

Starting with Babylon.js v4.2, there is also a new `shadowOnly` property that renders only shadows, 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.webp"/>

### Opacity

If you want to make a transparent ground and the diffuse texture contains transparency information, it 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.webp"/>

### Opacity Fresnel

Also, by default, the ground will disappear as your view gets close to being aligned with it. This prevents a harsh cut while navigating 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.webp"/>

## Reflection

Unlit materials are a great fit for creating a skybox. You can, just 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.webp" isMain={true} category="Environment"/>

### Mirror

As the reflection setup is comparable to the standard material, using a mirror works in the same way.

```javascript
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.webp"/>

### Reflection Fresnel

As we can use both reflection and diffuse, reflection fresnel can help you feel more immersed in the experience:

```javascript
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;

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.webp"/>

## Misc and Colors

Sometimes all we need is color, and you can use the texture as grayscale 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.webp"/>

## Environment

Going further, you can take a look at the [Environment documentation](/features/introductionToFeatures/chap5/sky) where you can find information on how to speed up the setup of your scene with a skybox and a ground.

For the ground projection capabilities of the material, you can have a look at the dedicated section within the [skybox documentation](/features/featuresDeepDive/environment/skybox#ground-projection).



# Environment

How do you achieve a good and appropriately realistic environment for your game or app? We will start with the simple scene `clearColor` (background color), then talk briefly about scene `ambientColor`, move on to 6-texture skyboxes, and finally cover fog to give an illusion of depth to your scenes.

![Environment](/img/how_to/13.webp)

_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 basic environment adjustment. Simply put, 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 are not used in any calculations for the final colors of meshes, 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`, `StandardMaterial.ambientColor` and `StandardMaterial.ambientTexture` will appear to do nothing.&nbsp; Set `scene.ambientColor` to some value, like in the example above, and `StandardMaterial.ambientColor`/`StandardMaterial.ambientTexture` will become active on meshes where you have applied them.

By default, `scene.ambientColor` is set to `Color3(0, 0, 0)`, which effectively means there is no ambient color.

(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.)

### Fog

Fog is quite an advanced effect, but Babylon.js simplifies it as much as possible. 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` - the default mode; fog is deactivated.
- `BABYLON.Scene.FOGMODE_EXP` - the fog density follows an exponential function.
- `BABYLON.Scene.FOGMODE_EXP2` - the same as above, but faster.
- `BABYLON.Scene.FOGMODE_LINEAR` - the fog density follows 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.webp" isMain={true} category="Environment"/>

### Skybox

To give a perfect illusion of a beautiful sunny sky, we are going to create a simple box, but with a special texture to simulate a sky.

All the information regarding this skybox creation can be found in the [skybox documentation](/features/featuresDeepDive/environment/skybox).



## How to use Lens Flares

Babylon.js lets you create lens flare effects easily:

![Lens flares](/img/features/lensFlare.webp)

<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
const 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
const flare00 = new BABYLON.LensFlare(
  0.1, // size
  0, // position
  new BABYLON.Color3(1, 1, 1), // color
  "textures/flare.png", // texture
  lensFlareSystem, // lens flare system
);
const flare01 = new BABYLON.LensFlare(0.075, 0.5, new BABYLON.Color3(0.8, 0.56, 0.72), "textures/flare3.png", lensFlareSystem);
const flare02 = new BABYLON.LensFlare(0.1, -0.15, new BABYLON.Color3(0.71, 0.8, 0.95), "textures/Flare2.png", lensFlareSystem);
const 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 less 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.webp)

Reflection probes are used to dynamically generate cube maps that can then be used as reflection textures, for instance.

Here is how to use them:

```javascript
const 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 generate 6 textures per frame (one per face).**

You can change the update rate (on every frame by default) with this code:

```javascript
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 to the center of the mesh that should use the generated cube map.
(Internally, the probe will generate a ghost camera at that position and then render the faces from there.) You have two options to achieve this:

```javascript
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.webp" isMain={true} category="Environment"/>

## Probes and PBR

If you want to achieve the highest quality for your PBR materials using probes for real-time reflections, the engine needs additional processing to achieve the right glossiness/roughness effect.
Getting it right is really simple: first, set up 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:

```javascript
mainMaterial.reflectionTexture = probe.cubeTexture;
mainMaterial.realTimeFiltering = true;
```

This flag will ensure your PBR material is rendered correctly with the probe. However, it involves more GPU processing for your materials, so be sure to use it wisely. To keep performance under control, you can set the quality of the filtering process for your material:

```javascript
mainMaterial.realTimeFilteringQuality = BABYLON.Constants.TEXTURE_FILTERING_QUALITY_MEDIUM;
```

The default is `TEXTURE_FILTERING_QUALITY_LOW`. Try different qualities and see which gives 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.webp" isMain={true} category="Environment"/>

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 information 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)>)). 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.webp)

Note, despite being a "Texture", CubeTexture can ONLY be used with [reflectionTexture and refractionTexture](/features/featuresDeepDive/materials/using/reflectionTexture), NOT other Material properties like diffuseTexture. [See below](#makingtheskybox) for the appropriate settings for a skybox.

### Using Equirectangular Images

Normally, Babylon.js skyboxes require six separate cube faces. However, if you only have a single equirectangular image (like an HDR 360 panorama), you can convert it efficiently using GPU acceleration.

See the [Single-Draw Equirectangular to Cubemap Converter](https://forum.babylonjs.com/t/single-draw-equirectangular-to-cubemap-converter/62329) community project for a demo and implementation details.


## Making or Finding Skybox Images

This is an example set of skybox images:

| <img src="/img/getstarted/skybox_px.webp" width="100" height="100" alt="some clouds"/> | <img src="/img/getstarted/skybox_nx.webp" width="100" height="100" alt="more clouds"/> | <img src="/img/getstarted/skybox_py.webp" width="100" height="100" alt="the sun overhead"/> | <img src="/img/getstarted/skybox_ny.webp" width="100" height="100" alt="solid gray"/> | <img src="/img/getstarted/skybox_pz.webp" width="100" height="100" alt="more clouds"/> | <img src="/img/getstarted/skybox_nz.webp" 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><tbody>
<tr>
  <th style={{padding: 10}}><img src="/img/getstarted/skybox_nz.webp" width="100" height="100" alt="some clouds"/></th>
  <th style={{padding: 10}}><img src="/img/getstarted/skybox_nx.webp" width="100" height="100" alt="adjacent clouds"/></th>
  <th style={{padding: 10}}><img src="/img/getstarted/skybox_pz.webp" width="100" height="100" alt="adjacent clouds"/></th>
  <th style={{padding: 10}}><img src="/img/getstarted/skybox_px.webp" width="100" height="100" alt="adjacent clouds"/></th>
  <th style={{padding: 10}}><img src="/img/getstarted/skybox_nz.webp" 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/featuresDeepDive/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.

There are two ways to proceed. Let's start with a manual creation to understand how things work under the hood, and then we will be able to use an automatic one.

### Manual creation

First, create our box. There is nothing new here; just note the disabled [backface culling](https://en.wikipedia.org/wiki/Back-face_culling):

```javascript
const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 100.0 }, scene);
const 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 as 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, and more as part of skybox textures, but some require 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` to a value 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/featuresDeepDive/materials/advanced/transparent_rendering).

<Playground id="#UU7RQ#1" title="Simple Skybox Example" description="Simple example of how to add a skybox to your scene." image="/img/playgroundsAndNMEs/divingDeeperEnvironmentSkybox1.webp"/>

### Automatic creation

Now that we understand how a skybox can be created, let's move to a simpler way:

```javascript
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.webp" isMain={true} category="Environment"/>

Check out [scene helpers](/features/featuresDeepDive/scene/fastBuildWorld#environmental-helper) for more information on this and other helpers.

## Ground Projection

Introduced in version 6.27.0, ground projection lets you "fake" a ground from within your skybox. This can help a lot with grounding your models without requiring extra meshes or textures. It ensures a smooth transition from the "ground" to the environment. As this can be hard to understand, here is a Playground showing the same scene with and without ground projection.

<Playground id="#25JK74#0" title="Ground Projection Playground" description="Simple example of using Ground Projection." image="/img/playgroundsAndNMEs/divingDeeperSkyboxGroundProjection.webp" category="Environment"/>

Enabling ground projection requires a few steps similar to creating a skybox.

First, create a box right below your object. **The bottom face position needs to be coplanar with the "fake ground" to support shadows and ensure they do not suffer from any distortions.**

```javascript
const size = 1000;
const skydome = BABYLON.MeshBuilder.CreateBox("sky", { size, sideOrientation: BABYLON.Mesh.BACKSIDE }, scene);
skydome.position.y = size / 2;
skydome.receiveShadows = true;
```

Notice that the side orientation is flipped so you can see the faces from within the box. This prevents the need to alter the backFaceCulling setup.

Next, let's create a [BackgroundMaterial](/features/featuresDeepDive/environment/backgroundMaterial) to support ground projection.

```javascript
const sky = new BABYLON.BackgroundMaterial("skyMaterial", scene);
sky.enableGroundProjection = true;
sky.projectedGroundRadius = 20;
sky.projectedGroundHeight = 3;
skydome.material = sky;
```

The `projectedGroundRadius` and `projectedGroundHeight` respectively simulate the radius of the disc representing the ground and how high it should be within the skybox. The size of the box you picked in the first step should be at least equal to or larger than the selected radius.

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
sky.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
```



## Realistic Environments

Of course, when 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 want, and in this section we cover some of the ways to do this. For example, lighting the background, creating lens flares, adding sky and fog, or working with HDR.

Other topics need sections of their own, such as infinite terrains, post processes, and shaders.


## Prerequisites

Internally, a navigation mesh with support for obstacles differs from the 'standard' use case of a single static navigation mesh.
Obstacles mark tiles as dirty. Those tiles need to be reprocessed to compute a portion of the navigation mesh.
To do so, Recast introduces the concept of tiles. Each tile is a square portion of the nav mesh. Tiles are processed each frame.
This makes large changes process over a couple of frames.

In order to build a Tiled nav mesh instead of a single mesh, add the following lines to the nav mesh creation parameters:

```javascript
const navmeshParameters = {
  cs: 0.2,
  ch: 0.2,
  walkableSlopeAngle: 0,
  walkableHeight: 0.0,
  walkableClimb: 0,
  walkableRadius: 1,
  maxEdgeLen: 12,
  maxSimplificationError: 1.3,
  minRegionArea: 8,
  mergeRegionArea: 20,
  maxVertsPerPoly: 6,
  detailSampleDist: 6,
  detailSampleMaxError: 15,
  borderSize: 1,
  tileSize: 20,
};
```

Note the addition of `tileSize`. It is the world-unit size of each tile. If it is not present or has a value of zero, it falls back to the standard use case and obstacles will not work.
Also, depending on your use case, this value must be chosen carefully to balance too many tiles against overly CPU-intensive updates.

**Note :**
The `ComputePath` method will handle obstacles only when a crowd has been instantiated. Otherwise, the path will adhere to the navmesh without considering obstacles. If your use case involves computing a path with obstacles, agents are optional, but a crowd is mandatory.

## Obstacles API

Once the navigation mesh is updated to take tiles into account, obstacles are accessible through 3 simple functions:

```javascript
addCylinderObstacle(position: Vector3, radius: number, height: number): IObstacle;
addBoxObstacle(position: Vector3, extent: Vector3, angle: number): IObstacle;
removeObstacle(obstacle: IObstacle): void;
```

Keep a list of added obstacles in order to remove them later. An obstacle that is not colliding with the navigation mesh will have no influence.

<Playground id="#WCSDE1" title="Adding a door to a navigation mesh" description="Example of door simulation using nav mesh obstacles."/>


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.