
## How To Support Fog with ShaderMaterial

In order to support fog in your custom shaders, you will have to add some lines of code in your vertex and pixel shaders.

## Vertex shader

First, you need to make sure you are computing the world position in your vertex shader (it has to be named worldPos):

```
vec4 worldPos = world * p;
gl_Position = viewProjection * worldPos;
```

This means you have to declare these uniforms:

```
uniform mat4 world;    
uniform mat4 view;    
uniform mat4 viewProjection;
```

Please note the addition of view which is used by the fog functions. Then you need to import the fog functions:

```
#include<fogVertexDeclaration>
```

And call them:

```
#include<fogVertex>
```

Here is a full example of a working vertex shader:

```
BABYLON.Effect.ShadersStore["myVertexShader"] = `
precision highp float;
attribute vec3 position;
attribute vec2 uv;
uniform mat4 world;    
uniform mat4 view;    
uniform mat4 viewProjection;
varying vec2 vUV;

#include<fogVertexDeclaration>

void main() {
    vec4 p = vec4(position, 1.);
    vec4 worldPos = world * p;
    gl_Position = viewProjection * worldPos;
    vUV = uv;

    #include<fogVertex>
}`
```

## Fragment shader

For the fragment shader, you also need to import the fog functions:

```
#include<fogFragmentDeclaration>
```

Then use them:

```
#include<fogFragment>(color,gl_FragColor)
```

The full version will look like this:

```
BABYLON.Effect.ShadersStore['myFragmentShader'] = `
varying vec2 vUV;

uniform sampler2D tex;
#include<fogFragmentDeclaration>

vec2 uvPixelPerfect(vec2 uv) {
    vec2 res = vec2(textureSize(tex, 0));
    
    uv = uv * res;
    vec2 seam = floor(uv + 0.5);
    uv = seam + clamp((uv-seam) / fwidth(uv), -0.5, 0.5);
    return uv / res;
}

void main() {
    vec4 color = texture2D(tex,vUV);
    gl_FragColor = color;
    #include<fogFragment>(color,gl_FragColor)
}`
```

## Javascript

You then have to add the following code in the `onBind` callback of your ShaderMaterial:

```javascript
shaderMaterial.onBind = function () {
  const effect = shaderMaterial.getEffect();
  effect.setFloat4("vFogInfos", scene.fogMode, scene.fogStart, scene.fogEnd, scene.fogDensity);
  effect.setColor3("vFogColor", scene.fogColor);
};
```

And you're done :)

Please find an example here: <Playground id="#11GAIH#17" title="Fog And Shader Material" description="Example of supporting fog with the shader material."/>



In case you are using an `ImageProcessingPostProcess` on your scene, or another post process that may use `ImageProcessingPostProcess` under the hood, like `MotionBlurPostProcess`, you will notice a slightly different color output in the final image, compared to what you want to output with `gl_FragColor`.

This is because `ImageProcessingPostProcess` expects a linear color input and therefore converts every pixel to gamma color space. If you want to read more about linear color space versus gamma color space, read [this](https://en.wikipedia.org/wiki/Gamma_correction).

## Fix my pixel shader

To spare you the reading, basically, your `gl_FragColor` is put to the power `1 / 2.2`, which we call a standard gamma transformation.

To counteract that, you should apply the opposite transformation, which in [GLSL](https://www.khronos.org/opengl/wiki/OpenGL_Shading_Language) is:

```
#ifdef IMAGEPROCESSINGPOSTPROCESS
    gl_FragColor.rgb = pow(gl_FragColor.rgb, vec3(2.2));
#endif
```

Of course, you only want this additional line in your shader if an `ImageProcessingPostProcess` is active in your scene. That's why you must enclose it in a `#define` statement.

For convenience, we added a small shader include that does just that. You can add this after every `gl_FragColor` output:

```
#include<imageProcessingCompatibility>
```

Now you need to toggle that define based on the presence of an `ImageProcessingPostProcess`.
In your material code, it should look something like this:

```
defines.IMAGEPROCESSINGPOSTPROCESS = scene.imageProcessingConfiguration.applyByPostProcess;
```

And now, whether you have the post-process active or not, the color should be similar!

### Further Reading

You may have a similar problem if you want to use fog in your scene with a custom shader material.

[Here](/features/featuresDeepDive/materials/shaders/Fog+ShaderMat) is a helpful page to get your shaders to be fog-ready.

## Tonemapping

If you are using tonemapping on your materials, your image may appear brighter than expected. This means that several image-processing steps are being applied in your pipeline.

Some post processes internally use a prepass to gather information, and this prepass performs some image processing itself. In that case, color can be processed several times, which is incorrect. For instance, this can happen if you use `pbr.imageProcessingConfiguration = myImageProcessingConfiguration;` along with an `SSAO2RenderingPipeline`.

So if you notice that problem, try to manually deactivate the gamma transform in the prepass:

```javascript
scene.enablePrePassRenderer().disableGammaTransform = true;
```

Colors should then behave as expected from your `imageProcessingConfiguration`.



## ShaderMaterial

The ShaderMaterial object has the necessary methods to pass data from your scene to the Vertex and Fragment Shaders and creates a material that can be applied to any mesh. This material affects how the mesh looks based on the code in the shaders.

It is created with:

```javascript
const myShaderMaterial = new BABYLON.ShaderMaterial(name, scene, route, options);
```

- `name`: A string, naming the shader
- `scene`: The scene in which the shader is to be used
- `route`: The route to the shader code. It can be any one of these:

  1. object: `{ vertex: "custom", fragment: "custom" }`, used with `BABYLON.Effect.ShadersStore["customVertexShader"]` and `BABYLON.Effect.ShadersStore["customFragmentShader"]`.
  2. object: `{ vertexElement: "vertexShaderCode", fragmentElement: "fragmentShaderCode" }`, used with shader code in `<script>` tags.
  3. object: `{ vertexSource: "vertex shader code string", fragmentSource: "fragment shader code string" }`, used with strings containing the shader code.
  4. string: `"./COMMON_NAME"`, used with external files _COMMON_NAME.vertex.fx_ and _COMMON_NAME.fragment.fx_, accessible through a file server (local or remote).

- `options`: An object containing `attributes` and `uniforms` arrays, with their names as strings.

An example:

```javascript
const myShaderMaterial = new BABYLON.ShaderMaterial("shader", scene, "./COMMON_NAME",
{
  attributes: ["position", "normal", "uv"],
  uniforms: ["world", "worldView", "worldViewProjection", "view", "projection", "time", "direction" ],
  samplers: ["textureSampler"],
  defines: ["MyDefine"],
  needAlphaBlending: true,
  needAlphaTesting: true
});
```

- Any attribute in the Vertex Shader code **must** appear in the `attributes` array.
- The uniform `worldViewProjection` **must** be declared in the Vertex Shader as type `mat4` and **must** be in the `uniforms` array, if it is to be used.
- Attributes and uniforms named in the arrays and not used in the shader code are ignored.
- If your shader code contains #define values, you can specify the ones you want to activate in the `defines` array.
- Uniforms assigned to textures in the shader code must be present in the samplers array. All other uniforms must be present in the uniforms array.

<Playground id="#5T8G3I" title="Simplest Shader Material" description="Most basic example of ShaderMaterial" isMain={true} category="Materials" />

<Playground id="#2TGH43" title="Accessing a shader code file from Github" description="Showing how to refer to shader files stored in a Github repository" />

An example of passing a texture:

```javascript
const myShaderMaterial = new BABYLON.ShaderMaterial("shader", scene, "./COMMON_NAME", {
  "attributes": ["position", "uv"],
  "uniforms": ["worldViewProjection"],
  "samplers": ["textureSampler"]
});
const amigaTexture = new BABYLON.Texture("amiga.jpg", scene);
myShaderMaterial.setTexture("textureSampler", amigaTexture);
```

<Playground id="#D8IDR8" title="Passing a texture sampler to a shader" description="Demonstrating how to pass a texture sampler to a shader" />

Other uniforms are passed, for example, as

```javascript
myShaderMaterial.setFloat("time", 0);
myShaderMaterial.setVector3("direction", BABYLON.Vector3.Zero());
```

where the set method's name depends on the type.

<Playground id="#5T8G3I#16" title="Passing and updating a Color3 uniform to a shader" description="Demonstrating how to pass a Color3 uniform to a shader" isMain={true} category="Materials" />

## Troubleshoot

When working with shaders, it is very useful to have a debug tool that can show the values passed to the shaders. For that purpose, you can use the Babylon Spector.js tool: https://github.com/BabylonJS/Spector.js, which works for any shader code, not just Babylon.js.

In some specific cases when you use post-processes, you might notice a slightly brighter color output than what you implemented in your shader. Read [this](/features/featuresDeepDive/materials/shaders/image_processing) if you want to know how to fix it.


Supporting Fog With ShaderMaterial

How To Support Fog with ShaderMaterial

Vertex shader

Fragment shader

Javascript