Thin instance multi-channel signed distance field fonts

For each character, the texture is selected from the font atlas (like sprites) for each plane. The vertexes of the plane (the rectangle) are also manipulated so the character is the correct dimensions. I’ve generated font atlases and suitable json for the font metrics https://github.com/Butterwell/mtsdf-fonts, https://playground.babylonjs.com/#H6UIFZ

7 Likes

Ohhhhh this is wonderful !!! Adding @thomlucc, @PirateJC and @Cedric who was looking into font rendering for babylon native.

This is great. Thanks for sharing it!

Hey @Butterwell do you think you could add a Doc page on the babylonjs documentation website ? This is a really cool tech ppl could definitely be interested in reusing.

@sebavan Will do.

1 Like

You are the best !!!

@sebavan I just had a lovely romp through the documentation, and I’m at a loss as to where to the insert the doc page. Under Advanced Topics / Shaders?

Lets summon @PirateJC our doc master to double check where this would best fit :slight_smile:

1 Like

@Butterwell this is super awesome! Really excited to have you write up some documentation about this!

I’m actually wondering if it might be best to have it’s own new category…maybe Advanced Topics / Fonts?

What would you think about that idea?

If you like it, I’ll get the structure set up for you and then you can build out the page with your content. Sound good?

1 Like

Sure, that works for me.