Try different SDF granularities

[yhahn]

We can get better compression ratios by reducing the granularity of the SDFs -- the following commit rounds each value to the nearest multiple of 8:

c213c12

Visually it's hard to see much difference once rendered and here is the space saving for a 0-255 range:

master 43124 bytes
compress-more 23208 bytes

This is a nice boost we can get now roughly for free since it doesn't affect the format/integrating projects -- later we may try other encodings for the bitmap (PNG, etc.) but those will be format-breaking.

Next actions

• Try this and other settings (4 and 2? 16 is where I started to see artifacts...) with a variety of different fonts
• This could be variable/env based so if you want a very high quality SDF you can set your settings that way

[mikemorris]

granularity	bytes	image
1	43124
2	36195
4	29376
8	23208
16	18583
32	14703

[mourner]

8 looks great to me

[mikemorris]

This should likely be configurable by font. Simple serif and sans-serif fonts render quite cleanly with significantly reduced granularity, but curvy, swooping fonts like Mister K Pro Regular degrade in quality more quickly.

granularity	bytes	image
1	34290
2	28780
4	23552
8	18864

I may have the style mixed up a bit through, as I was trying to render Mister K at a larger size and even the rendering without reduced granularity appears much lower quality than @amyleew's. Is the screenshot below from a Mapnik rendering or GL? Could this particular font simply be ill-suited for SDF rendering?

[mikemorris]

Mister K Onstage Pro Regular

Looks like 48px SDFs with granularity 4 is the sweet spot for this font, granularity 8 looks a bit lighter than full quality. The 24px SDFs (even at granularity 1) are woefully inadequate for this font.

sdf size	granularity	bytes	image
48px	1	76339
48px	2	63117
48px	4	49998
48px	8	39182
24px	1	34290

[amyleew]

@mikemorris Was testing the FF Font - Mister K. Screenshot directly from TM2.

[mikemorris]

So 48px SDFs at granularity 4 look great for rendering curvy fonts like Mister K (even at large font sizes like 72px), but unecessarily bloat the SDFs for simpler fonts like Open Sans Regular at more typical font sizes.

Open Sans Regular

size	granularity	bytes
24px	8	23301
24px	1	43274
48px	4	63604

Maybe this calls for investigating 2-channel signed distance fields?

/cc @yhahn @kkaefer

[kkaefer]

Interesting results! We should definitely explore more here and make the font size configurable (currently it is hard coded to 24px). We could also explore not computing the SDF on the server, but on the client, and just send the antialiased glyph to the client. Similarly, another paper describes how to use the gradients in the distance field to compute sharper outlines and corners.