Signed Distance Field rendering of color bit planes

Here is a quick experiment I made for a paper art/cut-out look which enables extreme zooming of very low resolution input textures. I have wanted to make a game about scale for a while (Giants - Citizen Kabuto touched on this theme years ago and I found it fascinating), and I can see this being the basis for a 2D game engine that allows several orders of magnification without requiring huge data sets.

The basis is the “improved alpha tested magnification” algorithm for smooth font rendering as published by Valve, except that I use it to generate an 8-bit Signed Distance Field for each of the 24 RGB color bit planes. Separating the bits is technically the same as using 8 different band pass filters (from low to high frequency) for the red, green and blue colors, and creating an 8-bit SDF for each of the 24 bit planes from that.

Each SDF is just 64×64 pixels, because the lower the resolution, the “rounder” the edges of the shape actually become. An RGBA pixel can hold 4 SDF values, so for 24 channels I combine 6 images in a texture atlas.

The shader then simply makes the “alpha” test for each bit plane and recombines all 24 bits into the final output color

Zoom Level 1 Zoom Level 2 Zoom Level 3 Zoom Level 4

In the regions where different planes touch each other, they overlap a bit due to precision errors, but I actually like the look, it reminds me of overlapping water color strokes or collages of different-colored cardboard.

Here is another test with Paper Mario. This probably has too many gradients in it, but remember, you are looking at a 64 x 64 pixel texture here!