Rendering BMFonts

Questions
1

From a quick web search, I didn’t find much info on any attempts to render BMFonts in Babylon.js. By BMFont I’m specifically referring to the AngelCode format of bitmap fonts, where you generate a texture atlas with font glyphs and some metadata with glyph uvs, kerning, etc, and then have some code for arranging a set of quads (based on glyph size and offset) with uvs mapped to the atlas and a simple shader that samples the atlas. This is a really common (and pretty old school) text rendering technique, and I’m hoping someone has already done this in Babylon.js. Can anyone point me to anything already existing for this?

Thanks!
Ryan

2

I talked to @RaananW and he confirmed me that nothing else but Canvas based or 3D text is available in bjs.

3

Hi,
also just stumbled over this question. In threejs there is an implementation that does not seem to be too difficult from first look: GitHub - Jam3/three-bmfont-text: renders BMFont files in ThreeJS with word-wrapping
Seems like the web has quite a good toolset for creating font atlases: Techniques for Rendering Text with WebGL | CSS-Tricks
Would be a nice extension I guess.

4

Would be coool indeed, would you be willing to contribute it ???

5

Can’t promise. But might be nice weekend project… :smiley:

2 Likes
6

Would love it :slight_smile:

7

@dennemark I was thinking the same thing… it seems like there are already a lot of support libraries that would make bitmap font rendering in Babylon.js pretty doable:

Given those, it seems like all we would need is to actually generate the quads determined by layout-bmfont-text, and maybe a custom shader (maybe a standard shader would be ok, not sure).

I also found a tool for generating single channel and multi channel SDFs for fonts: msdf-bmfont. If we wanted to go further than regular bitmap fonts and support SDF/MSDF fonts, we could pair this tool with the libs mentioned above (the metadata is the same format, as are the texture atlases for SDF/MSDF), and a custom SDF shader. Seems like a simple SDF shader can give relatively good results, as described here: https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817. I think MSDF shaders are harder, not sure.

1 Like
8

I’ve implemented MSDF. See https://playground.babylonjs.com/#H6UIFZ#8 and https://github.com/Butterwell/mtsdf-fonts. I couldn’t get load-bmfont to behave, so I worked from first principles.

2 Likes