Digital Rain

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

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.

import { DigitalRainPostProcess } from "@babylonjs/post-processes/digitalRain/digitalRainPostProcess";
// Creates the post process
var postProcess = new DigitalRainPostProcess("DigitalRain", camera);

Going further

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

import { DigitalRainPostProcess } from "@babylonjs/post-processes/digitalRain/digitalRainPostProcess";
// Creates the post process
var postProcess = new DigitalRainPostProcess("DigitalRain", camera, "3px Monospace");

But you could also play with more parameters:

import { DigitalRainPostProcess } from "@babylonjs/post-processes/digitalRain/digitalRainPostProcess";
// Creates the post process
var postProcess = new DigitalRainPostProcess("DigitalRain", camera, {
    font: "30px Monospace",
    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.
• 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.

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