Advanced ASCII Rendering

Learn ideas adn techniques to create more advanced ASCII effects with postprocessing.

In everyday ascii rendering you render your scene, then a post-process calculates the luminosity of the current cell and maps that to the matching ascii character of a set.

Finally, you either set all characters to a single color or use the cell's color. End of story.

However, these stories have very different endings and it's the key to making more advanced effects not only for ascii for WebGL in general.

If you use a single color (or do a different approach to coloring), then why make render pass render color at all? At the end of the day, we only care about luminosity. We can make each object render that directly as a single value stored in the red component.

outColor.r = luminosity;

Then, in the post-process, we get the luminosity directly from the red component. This change leaves us with the green and blue components empty and ready to be used for sending extra information to the post-process.

With this idea, in this week's demo, I was able to pack data for each :

  • Luminosity for character selection
  • A value to select completely different character sets.
  • Selective ""Bloom""
  • Color Data.
  • Color inversion
  • Use custom color or background fade color.

In next week's issue, I'll break down how I was able to pack so much in the red, blue, and green components and how you can pack even more if you wanted to.

Getting started


ASCII Background and text animation

In Andreasgysin's website we have two amazing ascii both driven by HTML.

For the background, each letter is a different <span> that gets updated every frame. And I imagine the trick is to constantly fade out all characters while setting new ones to their max value/character.

And the hover effect on the navigation text does a similar thing but the end point is the initial character.

ertdfgcvb by Andreasgysin

Scroll triggered ASCII animation

This project by Grow moves an ascii animation as you scroll. Sadly even the Wayback machine doesn't work, but you can see the case study here.

Here the ASCII is not just a gimmicky effect you slap on the website, but a key storytelling element to show people being represented as data points to drive the whole idea of logarithmic bias. It's the most on-point use of ASCII I've seen.

Machine Learning Fairness - Think by Google

Ascii burn effect

This shader by FabriceNeyret2 is the same as their previous shader but with a slight persistence/burn effect**.** It's a subtle change but the difference is big and it inspired me to add something similar in my demo.

Ascii persistence by FabriceNeyret2

Further reading / Inspiration