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


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


Lens Flares

How to use Lens Flares

Further reading