
## 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.



## 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 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


Reflection Probes

How to use Reflection Probes

Probes and PBR

Further reading

Reflections and Refractions

Learn all about reflection and refraction in Babylon.js.