> Check out the free Fire Procedural Texture.

Source: https://doc.babylonjs.com/toolsAndResources/assetLibraries/proceduralTexturesLibrary/fire

# Fire Procedural texture

![Fire Procedural texture](https://doc.babylonjs.com/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)

> [!WARNING]
> **Warning**
>
> 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: Fire Procedural Texture](https://playground.babylonjs.com/#KM3TC)

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;
```