
## Using the Ascii Art post-process

How cool (...or nerdish) would it be to render your entire BJS scene in ASCII art?

If that sounds good, this tutorial is for you.

## How to use?

Ascii Art Post Process scripts can be found here: 
- Normal: https://cdn.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.js
- Minified: https://cdn.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.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."/>

First, reference this script on your page:

```
	<script src="babylon.asciiArtPostProcess.js"></script>
```

Then, you only need to instantiate the post-process and attach it to your main camera to bring it to life.

```
// Creates the post process
var postProcess = new BABYLON.AsciiArtPostProcess("AsciiArt", camera);
```

<Playground id="#2I28SC#24" title="Ascii Post Process Demo" description="Ascii Post Process Demo"/>

## Going further

The first thing you can do is change the font used in the post process.

```
// Creates the post process
var postProcess = new BABYLON.AsciiArtPostProcess("AsciiArt", camera, "10px Monospace");
```

<Playground id="#2I28SC#25" title="Modified Ascii Post Process Demo 1" description="Modified Ascii Post Process Demo"/>

But you could also play with more parameters:

```
// Creates the post process
var postProcess = new BABYLON.AsciiArtPostProcess("AsciiArt", camera, 
    {
        font: "20px Monospace",
        characterSet: " -+@",
        mixToNormal: 0.5,
        mixToTile: 0.5        
    });
```

<Playground id="#2I28SC#26" title="Modified Ascii Post Process Demo 2" description="Modified Ascii Post Process Demo 2"/>

The available parameters are:

- font: the font to use, defined in the W3C CSS style, such as "30px Monospace". Note: a monospace font provides better results.
- caracterSet: the set of characters to use in order of light intensity.
- mixToNormal: defines how much of the "tile" or character space coloring in the ASCII art to mix in (between 0 and 1).
- mixToTile: defines how much of the normal rendering pass to mix into the ASCII art (between 0 and 1).

Two of them, mixToNormal and mixToTile, are also available at runtime to allow a smooth fade from the matrix effect to your normal scene.

```
// Creates the post process
var postProcess = new BABYLON.AsciiArtPostProcess("AsciiArt", 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#27" title="Modified Ascii Post Process Demo 3" description="Modified Ascii Post Process Demo 3"/>




## Using the Digital Rain post-process

How cool (...or nerdish) would it be to render your entire BJS scene with a digital rain effect?

If that sounds good, this tutorial is 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

<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."/>

First, reference this script on your page:

```
	<script src="babylon.digitalRainPostProcess.js"></script>
```

Then, you only need to instantiate the post-process and attach it 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 thing you can do is change 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 available parameters are:

- font: the font to use, defined in the W3C CSS style, such as "30px Monospace". Note: a monospace font provides better results.
- mixToNormal: defines how much of the "tile" or character space coloring in the digital rain to mix in (between 0 and 1).
- mixToTile: defines how much of the normal rendering pass to mix into the digital rain (between 0 and 1).

Two of them, mixToNormal and mixToTile, are also available at runtime to allow a smooth fade from the matrix effect 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"/>




## 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.


# Post Process Library

A library of prebuilt post-processes for Babylon.js.



## Available Meshes for Importing into Playground

All the Playground examples are loaded using the default environment and default camera methods. The meshes are different sizes, and using the default methods places the camera at a distance where the whole image can be seen clearly. To find [values for other cameras](/toolsAndResources/assetLibraries/availableMeshes#finding-camera-values), you can use the Playground scene inspector.

Meshes with a large file size can take some time to load, so please be patient.

Some meshes appear in both file locations.

## From the Playground Scenes Folder

These files are in the GitHub repo [scenes folder](https://github.com/BabylonJS/Babylon.js/tree/master/packages/tools/playground/public/scenes) for the Playground and are available for use.

When using a `scene` method to append or import scenes or meshes, the `rootUrl` parameter has the form `scenes/` or `scenes/folder/`, and the `filename` parameter is as given below. The Playground will show the actual terms required.


Filename | Size | Image | Playground
---|---|---|---|
Alien.gltf | 15.1 MB | ![alien](/img/resources/meshes/alien.webp) | <Playground id="#8IMNBM#1" title="Alien" description=""/>
BrainStem.gltf | 3.19 MB | ![brainstem](/img/resources/meshes/brainstem.webp) | <Playground id="#J62R3F#1" title="Brainstem" description=""/>
BoomBox.glb | 10.7 MB | ![boombox](/img/resources/meshes/boombox.webp) | <Playground id="#QCU8DJ#2" title="Boombox" description=""/>
Buggy.gltf | 1.09 MB | ![buggy](/img/resources/meshes/buggy.webp) | <Playground id="#K7TJIG#1" title="Buggy" description=""/>
Dude.babylon | 3.46 MB | ![dude](/img/resources/meshes/dude.webp) | <Playground id="#WLDCUC#2" title="Dude" description=""/>
babylonJS_logo_v3.babylon | 7.51 KB | ![logo](/img/resources/meshes/logo.webp) | <Playground id="#17LHMG#1" title="Logo" description=""/>
candle.babylon | 2.21 MB | ![candle](/img/resources/meshes/candle.webp) | <Playground id="#TSCJPP#1" title="Candle" description=""/>
dummy2.babylon | 16.1 MB | ![dummy2](/img/resources/meshes/dummy2.webp) | <Playground id="#TBK09I#2" title="Dummy2" description=""/>
dummy3.babylon | 7.6 MB | ![dummy3](/img/resources/meshes/dummy2.webp) | <Playground id="#C38BUD#1" title="Dummy3" description=""/>
Rabbit.babylon | 164 KB | ![rabbit](/img/resources/meshes/rabbit.webp) | <Playground id="#NMU4ZM#1" title="Rabbit" description=""/>
seagulf.glb | 934 KB | ![seagull](/img/resources/meshes/seagull.webp) | <Playground id="#8LFTCH#2" title="Seagull" description=""/>
skull.babylon | 3.94 MB | ![skull](/img/resources/meshes/skull.webp) | <Playground id="#VV935G#2" title="Skull" description=""/>
SSAOcat.babylon | 201 KB | ![cat](/img/resources/meshes/cat.webp) | <Playground id="#LCUPCU#1" title="Cat" description=""/>
StanfordBunny.obj | 4.69 MB | ![bunny](/img/resources/meshes/bunny.webp) | <Playground id="#95MJI8#1" title="Bunny" description=""/>
ufo.glb | 17 MB | ![ufo](/img/resources/meshes/ufo.webp) | <Playground id="#058SEW#3" title="UFO" description=""/>
Elf.gltf | 401 KB | ![elf](/img/resources/meshes/elf.webp) | <Playground id="#XY6QF0" title="Elf" description=""/>

## From the Assets Library

This list of files is a small subset of the available models in the asset library [from the GitHub repo](https://github.com/BabylonJS/Assets/blob/master/Assets.md). When using a `scene` method to append or import scenes or meshes, the `rootUrl` parameter uses the Asset Librarian like this: Assets.meshes.meshname.rooturl, and the `filename` parameter is similar: Assets.meshes.meshname.filename. See the Playgrounds below for examples.

Filename | Size | Image | Playground
---|---|---|---
aerobatic_plane.glb | 4.4 MB | ![plane](/img/resources/meshes/plane.webp) | <Playground id="#5NIBE1#207" title="Plane" description=""/>
alien.glb | 15.1 MB | ![alien](/img/resources/meshes/alien.webp) | <Playground id="#8IMNBM#721" title="Alien" description=""/>
BabylonJS-logo/v3/babylonJS_logo_solid_v3.babylon<br/>BabylonJS-logo/v3/babylonJS_logo_v3.babylon | 59 KB<br/>8 KB | ![babylonJS_logo_v3](/img/resources/meshes/babylonJS_logo_v3.webp) | <Playground id="#Q9JFZ1#3" title="Babylon_log_v3" description=""/>
Chair/Chair.obj | 1.09 MB | ![chair](/img/resources/meshes/chair.webp) | <Playground id="#KJV35B#21" title="Chair" description=""/>
Channel9/Channel9.stl | 1.03 MB | ![channel9](/img/resources/meshes/channel9.webp) | <Playground id="#AJJ8U5#52" title="Channel9" description=""/>
clothFolds.glb | 2.21 MB | ![clothFolds](/img/resources/meshes/clothFolds.webp) | <Playground id="#5NIBE1#208" title="Cloth Folds" description=""/>
CornellBox/cornellBox.glb | 162 kB | ![cornellBox-glb](/img/resources/meshes/cornellBox-glb.webp) | <Playground id="#4AJ16M#675" title="cornellBox-glb" description=""/>
dragon.glb | 20 MB | ![georgia tech dragon](/img/resources/meshes/dragon.webp) | <Playground id="#MZ1I83#17" title="Dragon" description=""/>
Dude/dude.babylon | 3.46 MB | ![dude](/img/resources/meshes/dude.webp) | <Playground id="#WLDCUC#190" title="Dude" description=""/>
emoji_heart.glb | 1.08 MB | ![heart](/img/resources/meshes/heart.webp) | <Playground id="#4AJ16M#676" title="Heart" description=""/>
ExplodingBarrel.glb | 2.9 MB | ![ExplodingBarrel](/img/resources/meshes/ExplodingBarrel.webp) | <Playground id="#4AJ16M#677" title="ExplodingBarrel" description=""/>
flightHelmet.glb | 50.4 MB | ![helmet](/img/resources/meshes/helmet.webp) | <Playground id="#BVK9I0#102" title="Helmet" description=""/>
fish.glb | 45.4 MB | ![fish](/img/resources/meshes/fish.webp) | <Playground id="#9CMU0F#38" title="Fish" description=""/>
haunted_house.glb | 37.2 MB | ![haunted house](/img/resources/meshes/haunted_house.webp) | <Playground id="#E8UGIC#20" title="Haunted House" description=""/>
head.glb | 25.9 MB | ![lee perry smith head](/img/resources/meshes/lee-perry-smith-head.webp) | <Playground id="#GA8DG5#6" title="Head" description=""/>
marble.gltf | 30 KB | ![marble](/img/resources/meshes/marble.webp) | <Playground id="#36YIWS#5" title="Marble" description=""/>
marbleTower.gltf | 2.60 MB | ![MarbleTower](/img/resources/meshes/MarbleTower.webp) | <Playground id="#FN0IGW#3" title="MarbleTower" description=""/>
seagulf.glb | 934 KB | ![seagull](/img/resources/meshes/seagull.webp) | <Playground id="#8LFTCH#2131" title="Seagull" description=""/>
shaderBall.glb | 3.95 MB | ![shaderBall](/img/resources/meshes/shaderBall.webp) | <Playground id="#2UPLBH#10" title="Shader Ball" description=""/>
PBR_Spheres.glb | 3.38 Mo | ![PBR_Spheres](/img/resources/meshes/PBR_Spheres.webp) | <Playground id="#ISZ7Y2#98" title="PBR_Spheres" description=""/>
BabylonShaderBall_Simple.gltf | 1.86 MB | ![BabylonShaderBall_Simple](/img/resources/meshes/BabylonShaderBall_Simple.webp) | <Playground id="#AE8AA3#7" title="Babylon Simple Shader Ball" description=""/>
shark.glb | 14.7 MB | ![shark](/img/resources/meshes/shark.webp) | <Playground id="#ISZ7Y2#99" title="Shark" description=""/>
Skull/skull.babylon | 3.94 MB | ![skull](/img/resources/meshes/skull.webp) | <Playground id="#VV935G#54" title="Skull" description=""/>
solar_system.glb | 3.94 MB | ![solar system](/img/resources/meshes/solar_system.webp) | <Playground id="#KILIHT#22" title="Solar System" description=""/>
toast_acrobatics.glb | 7.45 MB | ![toast acrobatics](/img/resources/meshes/toast_acrobatics.webp) | <Playground id="#KM2N07#38" title="Acrobatic Toast" description=""/>
TrailMeshSpell/spellDisk.glb<br/>TrailMeshSpell/pinkEnergyBall.glb<br/>TrailMeshSpell/greenEnergyBall.glb<br/>TrailMeshSpell/yellowEnergyBall.glb | 2.37 MB<br/>2.41 MB<br/>4.45 MB<br/>2.22 MB | ![TrailMeshSpell](/img/resources/meshes/TrailMeshSpell.webp) | <Playground id="#AAP917#39" title="Trail Mesh Spell" description=""/>
vintageFan_animated.gltf | 3.43 MB | ![vintageFan_animated](/img/resources/meshes/vintageFan_animated.webp) | <Playground id="#YBEKDT#17" title="Vintage Fan" description=""/>
ufo.glb | 17 MB | ![ufo](/img/resources/meshes/ufo.webp) | <Playground id="#058SEW#331" title="UFO" description=""/>

## Finding Camera Values

To check the camera's distance from the displayed mesh, find the radius value by accessing the camera menu from the [Playground scene inspector](/toolsAndResources/inspectorv2) toolbar. Other useful values are angles, position, and the minZ and maxZ ranges.

![values](/img/resources/meshes/values.webp)


Post Process Library

Coming next

Ascii Art

Check out the free Ascii Art Post Process available for you to use in your Babylon.js scenes.

Digital Rain

Check out the free Digital Rain Post Process available for you to use in your Babylon.js scenes.

Edge Detection

Check out the edge detection post process in your Babylon.js scenes.