An ASCII effect for THREE.js and post-processing.
This module implements an ASCII art post-processing effect using Three.js and GLSL shaders. It transforms a rendered scene into an ASCII representation by mapping pixel brightness to a set of ASCII characters. The effect generates a texture containing specified ASCII characters using an HTML canvas, which the shader samples to replace image pixels with characters (a much better solution in terms of performance than using actual text). Customizable parameters include the character set, font, font size, cell size, color, and inversion option.
Note: The Original three/examples/jsm library also includes an ASCII effect, but I would recommend avoiding it because it’s too slow and likely not intended for production use.
Take a peek at demo1 and demo2
This effect is based on the work of cieplak/AsciiEffect.js and emilwidlund/ASCII
To run this project, you'll need the following:
- three.js
- postprocessing
npm install
//run example
npx vite
npx vite build
npx vite preview
Grab ascii.js or the minified version and set it up according to the example in index.html.
import { EffectComposer, RenderPass, EffectPass } from "postprocessing";
import { ASCIIEffect } from './asciiEffect.min.js'
const asciiEffect = new ASCIIEffect({
fontSize: 35,
cellSize: 16,
invert: false,
color: "#ffffff",
characters: ` .:,'-^=*+?!|0#X%WM@`
});
composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, asciiEffect));This project is licensed under the MIT License.