
To create the minified version of Babylon.js you just have to 
use [gulp](https://github.com/BabylonJS/Babylon.js/tree/master/Tools/Gulp)

But you may want to work with all basic files. In this case, please download the code and use the following include (be aware to have the babylon folder at the root of your site. If you want to use your own shaders in this case, you just have to reference them with a "./" at beginning):

```html
	<script src="tools/DevLoader/BabylonLoader.js"></script>
```

And add this command to your script:

```javascript
    BABLONDEVTOOLS.Loader
        .load(function() {
            // Your code using Babylon.
        }
    );
```

This will take care of referencing all the required files and launch your code once ready.

If you need any script files to load after Babylon, you can require them:

```javascript
    BABLONDEVTOOLS.Loader
        .require('index.js')
        .load();
```

You can also control the root of your Babylon Folder:

```javascript
    BABLONDEVTOOLS.Loader
        .root('../../')
        .require('index.js')        
        .require('other.js')
        .load();
```

When working with all files, you can provide the following information to the engine:

* BABYLON.Engine.CodeRepository: By default, this value points to "/src/"
* BABYLON.Engine.ShadersRepository: By default, this value points to "/src/Shaders/"


## 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 declare a varying variable:

```
varying float fFogDistance;
```

Then you have to compute this value inside the shader:

```
fFogDistance = (view * worldPosition).z; // This is the distance of the vertex from the point of view of the camera (Camera space)
```

## Pixel shader
Next, you need to add the following code to be able to compute the fog accordingly to parameters sent by the scene:

```
#define FOGMODE_NONE 0.
#define FOGMODE_EXP 1.
#define FOGMODE_EXP2 2.
#define FOGMODE_LINEAR 3.
#define E 2.71828

uniform vec4 vFogInfos;
uniform vec3 vFogColor;
varying float fFogDistance;

float CalcFogFactor()
{
 float fogCoeff = 1.0;
 float fogStart = vFogInfos.y;
 float fogEnd = vFogInfos.z;
 float fogDensity = vFogInfos.w;

 if (FOGMODE_LINEAR == vFogInfos.x)
 {
  fogCoeff = (fogEnd - fFogDistance) / (fogEnd - fogStart);
 }
 else if (FOGMODE_EXP == vFogInfos.x)
 {
  fogCoeff = 1.0 / pow(E, fFogDistance * fogDensity);
 }
 else if (FOGMODE_EXP2 == vFogInfos.x)
 {
  fogCoeff = 1.0 / pow(E, fFogDistance * fFogDistance * fogDensity * fogDensity);
 }

 return clamp(fogCoeff, 0.0, 1.0);
}
```

Then, inside the shader, you have to use this function to get the fog color:

```
float fog = CalcFogFactor();
color.rgb = fog * color.rgb + (1.0 - fog) * vFogColor;
```

## Javascript

You then have to add the following code for the onBind callback of your ShaderMaterial:

```
shaderMaterial.onBind = function(mat, mesh) {
    var effect = mat.getEffect();
    effect.setMatrix("view", scene.getViewMatrix());
    effect.setFloat4("vFogInfos", scene.fogMode, scene.fogStart, scene.fogEnd, scene.fogDensity); 
    effect.setColor3("vFogColor", scene.fogColor);
}
```

And, you are done :)

Please find an example here: <Playground id="#11GAIH#17" title="Fog And Shader Material" description="Example of supporting fog with the shader material." image=""/>

Image Processing

Fix my pixel shader

Further Reading

Tonemapping