Rendering text

Before the screen

French micro computer Micral.

The terminal

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

Then came the light

HP terminal
Infamous C64 boot up screen

Vectors

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

Games

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

Triangulated mesh

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

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.

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Co-designing with kids — let’s design with them, and for them

7 Deadly Sins of Data Visualization

Weekly UI Design Inspiration 26

Trade & Vote With ONTO x BabySwap: $2000 in BABY & USDT Up For Grabs!

create 3d clothing from drawing, pattern, or techpack

Behind the Scenes: Design to Better [Our Community] + TRIO Upward Bound — East Saint Louis

5 Definitions That Will Make You Rethink Your Definition Of UX

What Makes a Designer Good at What They Do?

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/

More from Medium

Customizing Materials: The Community Ninja Tale

Simulating Refraction in Three.js

Image Processing with WebGL

Wavy Mesh using Shaders & r3f.