Digital Rain
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://github.com/BabylonJS/Babylon.js/blob/master/dist/preview%20release/postProcessesLibrary/babylon.digitalRainPostProcess.js
- Minified: https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview%20release/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 processvar postProcess = new BABYLON.DigitalRainPostProcess("DigitalRain", camera);
Going further
The first you can do is changing the font used in the post process.
// Creates the post processvar postProcess = new BABYLON.DigitalRainPostProcess("DigitalRain", camera, "3px Monospace");
But you could also play with more parameters:
// Creates the post processvar postProcess = new BABYLON.DigitalRainPostProcess("DigitalRain", camera,{font: "30px Monospace",mixToNormal: 0.5,mixToTile: 0.5});
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 processvar 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.});