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 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 source image

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 different band pass filters (from low to high frequency) for each color channel to get a 1-bit field, and creating an 8-bit SDF from that.
Source image (1024 x 1024)

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 SDF texture atlas

The SDF 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

 

Close

Close

Closer

Closer

Even Closer

Even Closer

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!

Paper Mario

About these ads