Compiling glyphs…

$ ascii-engine

a 3D scene rasterized to live text

ASCII Engine

What it is

A real-time 3D renderer whose only output is text. A spinning solid is rendered on the GPU, then every pixel's brightness is mapped through a density ramp to the character that carries the closest visual weight — so the shading is genuine lighting resolved into ASCII, not a picture of letters.

The whole pipeline is hand-rolled: render to a texture, read the pixels back, and paint the glyph grid onto a canvas.

Getting the shading right is a question of picking the ramp. Each character covers a different fraction of its cell — a space is empty, an @ is nearly solid — so ordering them by ink coverage turns the alphabet into a greyscale palette, and the render becomes a lookup from luminance into that palette. The grid resolution adapts to the viewport, and because the source is a real lit scene under a key and a rim light rather than a filter over a flat image, dragging to turn the form changes which characters come out of it.

Reading pixels back from the GPU each frame is the expensive step, so the render target is deliberately tiny — one texel per character cell, not one per screen pixel. The whole image is therefore a few thousand samples, which is cheap enough to do every frame and is also why the output looks like a terminal rather than like a photograph with letters drawn over it.

How to use it

  • Drag to turn the solid.
  • Switch the ramp between ASCII and Blocks.
  • Pause or resume the spin.
WebGLThree.jsRenderingASCIIGenerativeInteraction

More experiments

See every experiment