Msdf3, Font TextureAtlas Development

[prepare]

Preview

I have a modified version of the originalMsdf gen.

I call it Msdf3

I optimize 'Closest edge search' by using 'closet edges lookup table bitmap'

I have implement it here...

please note that now we are in debug mode, it should be faster on release mode

All tests use Roboto font, 26 pts

---

1. PixelFarm's LcdEffect SubPixelRendering Atlas texture

(click on the image to see detail)

PixelFarm's LcdEffectSubPixelRendering Atlas Texture, built-time about 220ms

---

2. Msdf gen,C# port from original

Msdf, C# version, built-time about 7,101ms

---

3. a Modified version, (I call it 'Msdf3')

Msdf3, C# version, built-time about 1,096ms

Event the result images are different, but it give the acceptable glyph image, (see later)

[prepare]

Msdf3

Our version is an extension to the original technique (Msdf, see https://github.com/Chlumsky/msdfgen).

It optimizes 'nearest-edge searching' by using 'classic scanline fill' and encode the pixel-curve data into a lookup bitmap.

Then it go to original Msdf gen phase, this time instead of checking all edges for a pixel, it use the lookup bitmap to decode edge data that are responsible for the specific bitmap.

With a given pixel, the choices are

1. no edge for this pixel, => finish here

2. only 1 edge for this pixel, just calculate distant from a pixel to that edge

3. more than 1 edge, just calculate the repsonsible edges (mostly just 2-3 edges, on the corners, esp overlap edges)

so it go faster

---

for Msdf, see https://github.com/PaintLab/PixelFarm/tree/master/src/PixelFarm/PixelFarm.Drawing/7_CpuBlitPainter/Msdf

and Msdf3, see https://github.com/PaintLab/PixelFarm/tree/master/src/PixelFarm/PixelFarm.Drawing/7_CpuBlitPainter/Msdf3

blue rect is original Msdf, and red rect is Msdf3

[prepare]

Closest Edge Lookup Table

Closest edge lookup table bitmap, each pixel contains encoding data of responsible edges over that pixel.

This render with 'classic scanline' technqiue.

I use my PixelFarm's Agg (Antigrain geometry, C# port) the render it.

Roboto font,Closest edge lookup table bitmap

---

Roboto font, Msdf output, 8 times scale up, still sharp :)

Please note that this version has some artifacts, cause by lut phase, It will be fixed later

[prepare]

Another glyph-B, Roboto font This shows both curve segments and line segment

Closest edge lookup table bitmap

---

Roboto font, Msdf output, 8 times scale up, still sharp :)

Please note that this version has some artifacts, cause by lut phase, It will be fixed later

[prepare]

Closest Edge Lookup Table in the form of Bitmap

The following screen capture show the debugging session when the renderer paint each border.

we paint each border, each border encodes information about edge segment

from the picture, we save result of each step to files to examine later

---

These are the lut bitmaps.

please note that the actual images are too dark, I will enhance it up to see the data.

1

2

3

4

5

6

7

8

9

10

11

12

[prepare]

Lut creation detail

Zoom in some images.

from step1, zoom 8 times from original (above)

You see that it is too dark. so I will enhance it to see the detail inside in the following pic.

---

the picture is zoom in 8 times, and increase brightness (100%) , increase contrast (50%) to see the detail

step 1, in detail

[prepare]

step 2, in detail

---

final