Ascii Art

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

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.

import { AsciiArtPostProcess } from "@babylonjs/post-processes/asciiArt/asciiArtPostProcess";
// Creates the post process
var postProcess = new AsciiArtPostProcess("AsciiArt", camera);

Going further

The first thing you can do is change the font used in the post process.

import { AsciiArtPostProcess } from "@babylonjs/post-processes/asciiArt/asciiArtPostProcess";
// Creates the post process
var postProcess = new AsciiArtPostProcess("AsciiArt", camera, "10px Monospace");

But you could also play with more parameters:

import { AsciiArtPostProcess } from "@babylonjs/post-processes/asciiArt/asciiArtPostProcess";
// Creates the post process
var postProcess = new AsciiArtPostProcess("AsciiArt", camera, {
    font: "20px Monospace",
    characterSet: " -+@",
    mixToNormal: 0.5,
    mixToTile: 0.5
});

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.

import { AsciiArtPostProcess } from "@babylonjs/post-processes/asciiArt/asciiArtPostProcess";
// Creates the post process
var postProcess = new 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.
});