Rendering text

Before the screen

In the early computer days, there was no screen. For us today, it’s impossible to think having a computer without visual feedback but it was pretty common.
First computers used blinking small lights to show content of registers. You had to convert manually binary to number. Keyboard didn’t exist in either. Move up and down switches to enter numbers.

French micro computer Micral.

The terminal

The terminals we use, everything like Bash or PowerShell, take their roots in the 60s and 70s. Enter values with a keyboard, press enter, get the result, scroll the page. Except that was done with something that looks like
a typewriter. I can’t imagine the noise those matrix dot printer would do in those giant rooms. Anyway, text was printed using small pins. For each character a matrix of pins would be up or down and put ink on the paper when up.

Type things and it prints the result. That’s just a terminal. Computer takes one whole room.

Then came the light

Same memory layout, same ASCII chart. Except instead of putting ink on a paper, a small dot on the screen will be lit. First monochrome monitors appeared. Text would scroll from the bottom up like before, but no more paper jams and less noise. Big improvement.

HP terminal
Infamous C64 boot up screen

Vectors

In 1991, Apple released the True Type Font format (.TTF) along Mac System 7. The font file contains vector information (curves and lines) to describe a glyph. It also introduced the possibility of getting more than 255 characters for more diverse and complex character sets (like Kanjis).
There were other vector font formats before but none that passed through the years like TTF. The Alto from Xerox in 1973 had everything from a “modern” computer of 1990. It was expensive are rare and like many technologies, cost was the main hurdle in the way of customer acceptation. Maybe people were not ready for such an amazing piece of Hardware and Software.

This thing is from 1973. 10 years before Apple Macintosh.

Games

Video games always favor fast technics at the expense of quality. Having 30 or 60 frames per second is always more important to maintain great interactivity. From the NES to the PlayStation, text was more or less like Dot Matrix printers: 1 bit per pixel and limited character sets.
No antialiasing, no high res. Readable text that’s all.

Nes game sprites dump. See the characters top right. https://forum.nim-lang.org/t/4445
There are many bitmap font generator. Like this one for Mac.
Glyph packed into a distance field texture. The darker the pixel, the further from the glyph border.

GPU rendering

With GPUs becoming even more powerful, could we improve the quality and speed even further?
I’ll detail 2 rendering technics. Both based on TTF curves. I’m sure more technics are available. I don’t know how text is rendered with Windows or MacOS systems. I guess it’s GPU based. Any info on other solutions is welcome.

Triangulated mesh

At the same time Chris Green released his Distance Field paper, Charles Loop and Jim Blinn released “Rendering Vector Art on the GPU”. Text and shapes are not pixel or texel based but the shape is rendered with triangles and a shader is used to determine if the curve is visible or not.

Curve outlines (a) are triangulated with green filled and curve filled (b) end result (c )
https://playground.babylonjs.com/#4905IE#6 Red curve is computed thanks to GPU bilinear interpolation.

Curve intersection

10 years later, in 2017, Eric Lengyel released “GPU-Centered Font Rendering Directly from Glyph Outlines”. This gave us the Slug Library. The technic is different but the results are amazing. It’s also more complex and GPU intensive.

https://playground.babylonjs.com/#TDIWFC#1 Glyph curves are stored in a texture. At runtime, each curve is tested to see if the texel in inside or outside the curve. 2 Triangles forming a quad is used here.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Babylon.js

Babylon.js

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/