
# 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)

<Alert severity="warning" title="Warning" description="The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN."/>

A demo can be found here: <Playground id="#1CL0BO#18" 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)

<Alert severity="warning" title="Warning" description="The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN."/>

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)

<Alert severity="warning" title="Warning" description="The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN."/>

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 velocity (speed and 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)

<Alert severity="warning" title="Warning" description="The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN."/>

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)

<Alert severity="warning" title="Warning" description="The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN."/>

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)

<Alert severity="warning" title="Warning" description="The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN."/>

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)

<Alert severity="warning" title="Warning" description="The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN."/>

A demo can be found here: <Playground id="#K41IJ#3" 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 Edge detection post-process

With this Edge Detection post-process, you can create full-scene outlines in a style suited for comics or games, which cannot be achieved with renderOutline, edgeRendering, or HighlightLayer.

If you’re aiming for that look, this tutorial is for you.

![Screenshot](/img/resources/edgeDetectionPP/EDPP.png)

## How to use ?

To use it, attach the post-process to your main camera to enable the effect.

```javascript
// Creates the post process
var edgeDetectionPostProcess = new BABYLON.EdgeDetectionPostProcess("EdgeDetection", camera);
```
<Playground id="#HBSUDW" title="Edge Detection Post Process Demo" description="Edge Detection Post Process Demo"/>

## Going further

You can adjust the thickness of the outlines like so:

```javascript
// Creates the post process with custom width, intensity, color
edgeDetectionPostProcess.edgeWidth = 1; // default is 1.0 
edgeDetectionPostProcess.edgeIntensity = 1;
edgeDetectionPostProcess.edgeColor = BABYLON.Color3.Red();
```

<Playground id="#HBSUDW#1" title="Edge Detection Post Process Render Mode Demo" description="Edge Detection Post Process Render Mode Demo"/>

Additionally, you can change the render mode

```javascript
// General :0, Normal: 1, Depth: 2, Only Outline: 3 
edgeDetectionPostProcess.renderMode = 3; // default is 1 
```

Here is a full demo where you can control all properties of the EdgeDetection PostProcess."
Futhermore, you can check the cel materials with outline.

![Screenshot](/img/resources/edgeDetectionPP/EDPP2.png)

<Playground id="#T6IKWW" title="Edge Detection Post Process Full Demo" description="Edge Detection Post Process Full  Demo"/>

The available parameters are:

- edgeWidth: Controls the thickness of the edge lines. Higher values create thicker outlines. Default is 1.0.
- edgeIntensity: Adjusts the intensity or brightness of the outline effect. Higher values make edges appear more prominent. Default is 1.0.
- edgeColor: Defines the color of the outline using BABYLON.Color3 format, allowing for customization of edge hue. Default is BABYLON.Color3.Black().
- renderMode: Sets the rendering mode for the post-process effect:
    0: General (combined view with edge effect and scene),
    1: Normal (shows the scene with edge overlay),
    2: Depth (emphasizes depth for 3D effect),
    3: Only Outline (displays only the edges, hiding other details).

For optimal results, adjust edgeWidth and edgeIntensity in combination. 
Modifying only one may make it difficult to achieve the desired effect, as these parameters work best when balanced to create clear and precise outlines.