
# Brick Procedural texture

![Brick Procedural texture](/img/extensions/proceduraltextures/brickpt.webp)

## 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 vertically (Int)
- **numberOfBricksWidth** controls the number of bricks horizontally (Int)
- **jointColor** changes the color of 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.webp)

## 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 clouds (BABYLON.Color3/4)

Sample code 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.webp)

## 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 several parameters:
- **time** can be set manually (float) if autoGenerateTime(boolean) is set to false. It is used inside the fire shader for animation
- **speed** controls the velocity (speed and direction) of the flames (BABYLON.Vector2)
- **fireColors** is an array of 6 (BABYLON.Color3/4) values defining the different colors of the fire. You can define them manually or 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.webp)

## 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) values for the grass. These should be green, but you can create red grass if you want to
- **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.webp)

## 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 vertically (Int)
- **numberOfTilesWidth** controls the number of tiles horizontally (Int)
- **jointColor** changes the color of 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.webp)

## 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 road color (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.webp)

## 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** changes the color of the wood in the texture (BABYLON.Color3/4)
- **ampScale** changes the wave 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, which are generated textures you can use to 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.webp)

## 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 the properties of the EdgeDetection PostProcess.
Furthermore, you can also check the cel materials with outlines.

![Screenshot](/img/resources/edgeDetectionPP/EDPP2.webp)

<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.

Procedural Texture Library

Coming next

Cloud Procedural Texture

Check out the free Cloud Procedural Texture.

Brick Procedural Texture

Check out the free Brick 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.