• Home

Some experiments to render UI using signed distance fields. The rendering can be written in code in a simple way in 'immediate mode' as if it was software-rendered, but gets converted to GPU buffer commands. This is rendered in by the GPU using a single shader. The screen in split up into tiles for performance, so each command buffer can just render a portion of the screen.

SDFs have the nice property that they can be composed together easily, and union/subtract operations can be applied to them which make it easy to make complex shapes.

It also has a font renderer using MSDF to render fully scalable fonts in realtime on the GPU. Traditionally fonts are either rasterised but look bad when scaled, or are triangulated but cost performance. MSDF font rendering is a nice solutions that gives really good results.

I ported msdfgen to Typescript in much fewer lines of code, so it could be run in the browser when the application loaded. This library takes a TTF font file and converts it into a MSDF font bitmap. I followed the paper linked in the Github.

It has masking support to produce the shapes you see in the screenshot below, and also the gradient background. It also has post process effects (I turned up the bloom)

This is a screenshot of it running in the browser, using a single shader (tiled).