
## Using the Ascii Art post-process

How cool (... or nerd - ish) could it be to render all your BJS scene in Ascii ART?

If you would like it, this tutorial is made 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

Please, first reference this script in your page:

```
	<script src="babylon.asciiArtPostProcess.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.AsciiArtPostProcess("AsciiArt", camera);
```

<Playground id="#2I28SC#24" title="Ascii Post Process Demo" description="Ascii 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.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 availables parameters are:

- font: the font to use defined the W3C css way like "30px Monospace". Note: a monospace font would provide better result.
- caracterSet: the set of caracter to use in order of llight intensity.
- mixToNormal: defines the amount you want to mix the "tile" or caracter space colored in the ascii art (between 0 and 1).
- mixToTile: defines the amount you want to mix the normal rendering pass in the ascii art (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.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 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"/>



# Post Process Library

A library of pre-constructed post processes to use with Babylon.js.



## Available Meshes for Importing into Playground

All the playground examples are loaded using the default environment and default camera methods. All the meshes are different sizes and using the default methods places the camera at a distance where the whole image can be seen clearly. In order 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, please be patient.

Some meshes appear in both file locations.

## From the Playground Scenes Folder

This list of files is in the github repo [scenes folder](https://github.com/BabylonJS/Babylon.js/tree/master/packages/tools/playground/public/scenes) of the Playground and are available for use.

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.png) | <Playground id="#8IMNBM#1" title="Alien" description=""/>
BrainStem.gltf | 3.19 MB | ![brainstem](/img/resources/meshes/brainstem.png) | <Playground id="#J62R3F#1" title="Brainstem" description=""/>
BoomBox.glb | 10.7 MB | ![boombox](/img/resources/meshes/boombox.png) | <Playground id="#QCU8DJ#2" title="Boombox" description=""/>
Buggy.gltf | 1.09 MB | ![buggy](/img/resources/meshes/buggy.png) | <Playground id="#K7TJIG#1" title="Buggy" description=""/>
Dude.babylon | 3.46 MB | ![dude](/img/resources/meshes/dude.png) | <Playground id="#WLDCUC#2" title="Dude" description=""/>
babylonJS_logo_v3.babylon | 7.51 KB | ![logo](/img/resources/meshes/logo.png) | <Playground id="#17LHMG#1" title="Logo" description=""/>
candle.babylon | 2.21 MB | ![candle](/img/resources/meshes/candle.png) | <Playground id="#TSCJPP#1" title="Candle" description=""/>
dummy2.babylon | 16.1 MB | ![dummy2](/img/resources/meshes/dummy2.png) | <Playground id="#TBK09I#2" title="Dummy2" description=""/>
dummy3.babylon | 7.6 MB | ![dummy3](/img/resources/meshes/dummy2.png) | <Playground id="#C38BUD#1" title="Dummy3" description=""/>
Rabbit.babylon | 164 KB | ![rabbit](/img/resources/meshes/rabbit.png) | <Playground id="#NMU4ZM#1" title="Rabbit" description=""/>
seagulf.glb | 934 KB | ![seagull](/img/resources/meshes/seagull.png) | <Playground id="#8LFTCH#2" title="Seagull" description=""/>
skull.babylon | 3.94 MB | ![skull](/img/resources/meshes/skull.png) | <Playground id="#VV935G#2" title="Skull" description=""/>
SSAOcat.babylon | 201 KB | ![cat](/img/resources/meshes/cat.png) | <Playground id="#LCUPCU#1" title="Cat" description=""/>
StanfordBunny.obj | 4.69 MB | ![bunny](/img/resources/meshes/bunny.png) | <Playground id="#95MJI8#1" title="Bunny" description=""/>
ufo.glb | 17 MB | ![ufo](/img/resources/meshes/ufo.png) | <Playground id="#058SEW#3" title="UFO" description=""/>
Elf.gltf | 401 KB | ![elf](/img/resources/meshes/elf.png) | <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) and 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 playgrounds below for examples.

Filename | Size | Image | Playground
---|---|---|---
aerobatic_plane.glb | 4.4 MB | ![plane](/img/resources/meshes/plane.png) | <Playground id="#5NIBE1#207" title="Plane" description=""/>
alien.glb | 15.1 MB | ![alien](/img/resources/meshes/alien.png) | <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.jpg) | <Playground id="#Q9JFZ1#3" title="Babylon_log_v3" description=""/>
Chair/Chair.obj | 1.09 MB | ![chair](/img/resources/meshes/chair.png) | <Playground id="#KJV35B#21" title="Chair" description=""/>
Channel9/Channel9.stl | 1.03 MB | ![channel9](/img/resources/meshes/channel9.png) | <Playground id="#AJJ8U5#52" title="Channel9" description=""/>
clothFolds.glb | 2.21 MB | ![clothFolds](/img/resources/meshes/clothFolds.jpg) | <Playground id="#5NIBE1#208" title="Cloth Folds" description=""/>
CornellBox/cornellBox.glb | 162 kB | ![cornellBox-glb](/img/resources/meshes/cornellBox-glb.jpg) | <Playground id="#4AJ16M#675" title="cornellBox-glb" description=""/>
dragon.glb | 20 MB | ![georgia tech dragon](/img/resources/meshes/dragon.jpg) | <Playground id="#MZ1I83#17" title="Dragon" description=""/>
Dude/dude.babylon | 3.46 MB | ![dude](/img/resources/meshes/dude.png) | <Playground id="#WLDCUC#190" title="Dude" description=""/>
emoji_heart.glb | 1.08 MB | ![heart](/img/resources/meshes/heart.png) | <Playground id="#4AJ16M#676" title="Heart" description=""/>
ExplodingBarrel.glb | 2.9 MB | ![ExplodingBarrel](/img/resources/meshes/ExplodingBarrel.jpg) | <Playground id="#4AJ16M#677" title="ExplodingBarrel" description=""/>
flightHelmet.glb | 50.4 MB | ![helmet](/img/resources/meshes/helmet.png) | <Playground id="#BVK9I0#102" title="Helmet" description=""/>
fish.glb | 45.4 MB | ![fish](/img/resources/meshes/fish.png) | <Playground id="#9CMU0F#38" title="Fish" description=""/>
haunted_house.glb | 37.2 MB | ![haunted house](/img/resources/meshes/haunted_house.png) | <Playground id="#E8UGIC#20" title="Haunted House" description=""/>
head.glb | 25.9 MB | ![lee perry smith head](/img/resources/meshes/lee-perry-smith-head.jpg) | <Playground id="#GA8DG5#6" title="Head" description=""/>
marble.gltf | 30 KB | ![marble](/img/resources/meshes/marble.jpg) | <Playground id="#36YIWS#5" title="Marble" description=""/>
marbleTower.gltf | 2.60 MB | ![MarbleTower](/img/resources/meshes/MarbleTower.jpg) | <Playground id="#FN0IGW#3" title="MarbleTower" description=""/>
seagulf.glb | 934 KB | ![seagull](/img/resources/meshes/seagull.png) | <Playground id="#8LFTCH#2131" title="Seagull" description=""/>
shaderBall.glb | 3.95 MB | ![shaderBall](/img/resources/meshes/shaderBall.jpg) | <Playground id="#2UPLBH#10" title="Shader Ball" description=""/>
PBR_Spheres.glb | 3.38 Mo | ![PBR_Spheres](/img/resources/meshes/PBR_Spheres.png) | <Playground id="#ISZ7Y2#98" title="PBR_Spheres" description=""/>
BabylonShaderBall_Simple.gltf | 1.86 MB | ![BabylonShaderBall_Simple](/img/resources/meshes/BabylonShaderBall_Simple.jpg) | <Playground id="#AE8AA3#7" title="Babylon Simple Shader Ball" description=""/>
shark.glb | 14.7 MB | ![shark](/img/resources/meshes/shark.png) | <Playground id="#ISZ7Y2#99" title="Shark" description=""/>
Skull/skull.babylon | 3.94 MB | ![skull](/img/resources/meshes/skull.png) | <Playground id="#VV935G#54" title="Skull" description=""/>
solar_system.glb | 3.94 MB | ![solar system](/img/resources/meshes/solar_system.png) | <Playground id="#KILIHT#22" title="Solar System" description=""/>
toast_acrobatics.glb | 7.45 MB | ![toast acrobatics](/img/resources/meshes/toast_acrobatics.png) | <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.jpg) | <Playground id="#AAP917#39" title="Trail Mesh Spell" description=""/>
vintageFan_animated.gltf | 3.43 MB | ![vintageFan_animated](/img/resources/meshes/vintageFan_animated.jpg) | <Playground id="#YBEKDT#17" title="Vintage Fan" description=""/>
ufo.glb | 17 MB | ![ufo](/img/resources/meshes/ufo.png) | <Playground id="#058SEW#331" title="UFO" description=""/>

## Finding Camera Values

To check the distance of the camera from the displayed mesh find the radius value by accessing the camera menu from the [playground scene inspector](/toolsAndResources/inspector) tool bar. Other useful values are angles, position and minZ and maxZ ranges.

![values](/img/resources/meshes/values.png)


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.