
# Brick Procedural texture

![Brick Procedural texture](/img/extensions/proceduraltextures/brickpt.PNG)

## Using the Brick procedural texture

Brick procedural texture can be found here: 
- Normal: [Normal](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.js)
- Minified : [Minified](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js)

A demo can be found here:  <Playground id="#1CL0BO" title="Brick Procedural Texture" description="Brick Procedural Texture"/>

This texture has 4 parameters :
- **numberOfBricksHeight** controls the number of bricks in height (Int)
- **numberOfBricksWidth** controls the number of bricks in width (Int)
- **jointColor** changes the color for the joint between bricks (BABYLON.Color3/4)
- **brickColor** changes the color for the brick itself (BABYLON.Color3/4)

```javascript
var brickMaterial = new BABYLON.StandardMaterial("brickMat", scene);
var brickTexture = new BABYLON.BrickProceduralTexture("brickTex", 512, scene);
brickTexture.numberOfBricksHeight = 6;
brickTexture.numberOfBricksWidth = 10;
brickMaterial.diffuseTexture = brickTexture;
```


# Cloud Procedural texture

![Cloud Procedural texture](/img/extensions/proceduraltextures/cloudpt.PNG)

## Using the cloud procedural texture

Cloud procedural texture can be found here: 
- Normal: [Normal](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.js)
- Minified : [Minified](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js)

A demo can be found here:  <Playground id="#NQDNM#0" title="Cloud Procedural Texture Demo" description="Cloud Procedural Texture Demo"/>

This texture has 2 parameters :
- **skyColor** : the color for the sky (BABYLON.Color3/4)
- **cloudColor** : the color for the cloud (BABYLON.Color3/4)

Sample to create a cloudy sky

```javascript
var cloud = BABYLON.MeshBuilder.CreateSphere("cloud", { segments: 100, diameter: 1000 }, scene);
var cloudMaterial = new BABYLON.StandardMaterial("cloudMat", scene);
var cloudProcTexture = new BABYLON.CloudProceduralTexture("cloudTex", 1024, scene);
cloudMaterial.emissiveTexture = cloudProcTexture;
cloudMaterial.backFaceCulling = false;
cloudMaterial.emissiveTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
cloud.material = cloudMaterial;
cloud.position = new BABYLON.Vector3(0, 0, 12);
```


# Fire Procedural texture

![Fire Procedural texture](/img/extensions/proceduraltextures/firept.PNG)

## Using the Fire procedural texture

Fire procedural texture can be found here: 
- Normal: [Normal](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.fireProceduralTexture.js)
- Minified : [Minified](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.fireProceduralTexture.min.js)

A demo can be found here:  <Playground id="#KM3TC" title="Fire Procedural Texture" description="Fire Procedural Texture"/>

This texture has 4 parameters :
- **time** can be set manually(float) if autoGenerateTime(boolean) is set to false. It is used inside the fire shader to animate it
- **speed** controls the speed of the flames (BABYLON.Vector2)
- **shift** controls the direction of the flames (BABYLON.Vector2)
- **fireColors** is an array of 6 (BABYLON.Color3/4) defining the different color of the fire. You can define them manually of use presets available as static properties of the class (PurpleFireColors, GreenFireColors, RedFireColors, BlueFireColors)

```javascript
var fireMaterial = new BABYLON.StandardMaterial("fireMat", scene);
var fireTexture = new BABYLON.FireProceduralTexture("fireTex", 256, scene);
fireMaterial.diffuseTexture = fireTexture;
fireMaterial.opacityTexture = fireTexture;
```


# Grass Procedural texture

![Grass Procedural texture](/img/extensions/proceduraltextures/grasspt.PNG)

## Using the Grass procedural texture

Grass procedural texture can be found here: 
- Normal: [Normal](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.grassProceduralTexture.js)
- Minified : [Minified](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.grassProceduralTexture.min.js)

A demo can be found here:  https://www.babylonjs-playground.com/#KM3TC#1

This texture has 2 parameters :
- **grassColors** is an array of 3 (BABYLON.Color3/4) for the grass. Should be green but you can create red grass if you want to (BABYLON.Color3/4)
- **groundColor** is the base color for the ground (BABYLON.Color3/4)

```javascript
var grassMaterial = new BABYLON.StandardMaterial("grassMat", scene);
var grassTexture = new BABYLON.GrassProceduralTexture("grassTex", 256, scene);
grassMaterial.ambientTexture = grassTexture;
```


# Marble Procedural texture

![Marble Procedural texture](/img/extensions/proceduraltextures/marblept.PNG)

## Using the Marble procedural texture

Marble procedural texture can be found here: 
- Normal: [Normal](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.marbleProceduralTexture.js)
- Minified : [Minified](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.marbleProceduralTexture.min.js)

A demo can be found here:  <Playground id="#HS1SK#4" title="Marble Procedural Texture Demo" description="Marble Procedural Texture Demo"/>

This texture has 4 parameters :
- **numberOfTilesHeight** controls the number of tiles in height (Int)
- **numberOfTilesWidth** controls the number of tiles in width (Int)
- **jointColor** changes the color for the joint between tiles (BABYLON.Color3/4)
- **marbleColor** changes the color for the tile itself (BABYLON.Color3/4)

```javascript
var marbleMaterial = new BABYLON.StandardMaterial("marbleMat", scene);
var marbleTexture = new BABYLON.MarbleProceduralTexture("marbleTex", 512, scene);
marbleTexture.numberOfTilesHeight = 5;
marbleTexture.numberOfTilesWidth = 5;
marbleMaterial.ambientTexture = marbleTexture;
```


# Road Procedural texture

![Road Procedural texture](/img/extensions/proceduraltextures/roadpt.PNG)

## Using the Road procedural texture

Road procedural texture can be found here: 
- Normal: [Normal](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.roadProceduralTexture.js)
- Minified : [Minified](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.roadProceduralTexture.min.js) 

A demo can be found here: <Playground id="#FBW4N#0" title="Road Procedural Texture Demo" description="Road Procedural Texture Demo"/>

This texture has 1 parameter :
- **roadColor** is the color for the road (BABYLON.Color3/4)

```javascript
var roadmaterial = new BABYLON.StandardMaterial("roadMat", scene);
var roadmaterialpt = new BABYLON.RoadProceduralTexture("roadTex", 512, scene);
roadmaterial.diffuseTexture = roadmaterialpt;
```


# Wood Procedural texture

![Wood Procedural texture](/img/extensions/proceduraltextures/woodpt.PNG)

## Using the Wood procedural texture

Wood procedural texture can be found here: 
- Normal: [Normal](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.woodProceduralTexture.js)
- Minified : [Minified](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylon.woodProceduralTexture.min.js)

A demo can be found here: <Playground id="#K41IJ" title="Wood Procedural Texture Demo" description="Wood Procedural Texture Demo"/>

This texture has 2 parameters :
- **woodColor** to modify the color of the wood in the texture (BABYLON.Color3/4)
- **ampScale** to change the waves amplitude in the wood (BABYLON.Vector2)

```javascript
var woodMaterial = new BABYLON.StandardMaterial("woodMat", scene);
var woodTexture = new BABYLON.WoodProceduralTexture("woodTex", 1024, scene);
woodTexture.ampScale = 80.0;
woodMaterial.diffuseTexture = woodTexture;
```


# Procedural Texture Library

A library of procedural textures, coded textures to run and enhance your scene.



## Using the Digital Rain post-process

How cool (... or nerd - ish) could it be to render all your BJS scene in a Digital Rain Fall?

If you would like it, this tutorial is made for you.

## How to use ?

Digital Rain Post Process Scripts can be found here: 
- Normal: https://cdn.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.js
- Minified: https://cdn.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.min.js

Please, first reference this script in your page:

```
	<script src="babylon.digitalRainPostProcess.js"></script>
```

Then, you only need to instantiate the post process attach to your main camera to bring it to life.

```
// Creates the post process
var postProcess = new BABYLON.DigitalRainPostProcess("DigitalRain", camera);
```

<Playground id="#2I28SC#6" title="Digital Rain Post Process Demo" description="Digital Rain Post Process Demo"/>

## Going further

The first you can do is changing the font used in the post process.

```
// Creates the post process
var postProcess = new BABYLON.DigitalRainPostProcess("DigitalRain", camera, "3px Monospace");
```

<Playground id="#2I28SC#7" title="Digital Rain Post Process Modified Demo 1" description="Digital Rain Post Process Modified Demo 1"/>

But you could also play with more parameters:

```
// Creates the post process
var postProcess = new BABYLON.DigitalRainPostProcess("DigitalRain", camera, 
    {
        font: "30px Monospace",
        mixToNormal: 0.5,
        mixToTile: 0.5        
    });
```

<Playground id="#2I28SC#8" title="Digital Rain Post Process Modified Demo 2" description="Digital Rain Post Process Modified Demo 2"/>

The availables parameters are:

- font: the font to use defined the W3C css way like "30px Monospace". Note: a monospace font would provide better result.
- mixToNormal: defines the amount you want to mix the "tile" or caracter space colored in the digital rain (between 0 and 1).
- mixToTile: defines the amount you want to mix the normal rendering pass in the digital rain (between 0 and 1).

Two of them mixToNormal and mixToTile are also available at run time to allow smoothly fading from matrix to your normal scene.

```
// Creates the post process
var postProcess = new BABYLON.DigitalRainPostProcess("DigitalRain", camera);
// Displays the scene.
var alpha = 0;
scene.registerBeforeRender(function() {
    alpha += 0.01;
    postProcess.mixToNormal = Math.cos(alpha) * 0.5 + 0.5; // between 0 and 1.
});
```

<Playground id="#2I28SC#9" title="Digital Rain Post Process Modified Demo 3" description="Digital Rain Post Process Modified Demo 3"/>


Procedural Texture Library

Coming next

Brick Procedural Texture

Check out the free Brick Procedural Texture.

Cloud Procedural Texture

Check out the free Cloud Procedural Texture.

Fire Procedural Texture

Check out the free Fire Procedural Texture.

Grass Procedural Texture

Check out the free Grass Procedural Texture.

Marble Procedural Texture

Check out the free Marble Procedural Texture.

Road Procedural Texture

Check out the free Road Procedural Texture.

Wood Procedural Texture

Check out the free Wood Procedural Texture.