SDF Font & 3D Lines

Unfortunately doing nice lines is 3d is a surprisingly more complex subject, especially if you want to add uv support and support for pixel widths (and also 3d width, and potentially both, for instance 3d width with a minimum pixel width). It involves vertex shader (to align with camera) an pixel shaders, and if you want to truly optimize, using degenerate polygons on line strips if you want to do multiple path in a single draw call. A lot of the complexity involve how you handle the corners.

Even in engines like Unity you have to pay for decent line with plugins like:

Some articles:

Having a nice SDF font and nice line rendering can add a lot of polish to any product. It is even more important in the XR world (since you don’t have the DOM). SDF prevent pixelization on scale up for fonts and can even let you see fonts at a smaller size, they always look smooth. Unity bought the developer of TextMeshPro which was the primary plugin for SDF font to give an idea of the importance. The Shape plugins for line in Unity is one of the best seller. A look at their doc can give an idea of what is involved to do nice lines in 3d: Shapes

I currently use my own prerendered MSDF font (convoluted pipeline to create compared to the troika solution) but It makes the text much clearer big and small. A general solution like Troika would be the preferred one since it let you make your own fonts simply (better support for unicode as well). Ref.: https://github.com/Chlumsky/msdfgen/files/3050967/thesis.pdf and GitHub - Chlumsky/msdfgen: Multi-channel signed distance field generator

SDF Fonts and Lines have the following characteristic that I think justify why they should be part of BJS Core:

  • both features are complex to do well in a performant way (see here lots of text and lots of lines without dropping framerate, for instance all line path could be combined in a single draw call, same with text of the same font)
  • both features can be surprisingly easy to use from a user standpoint in a nice API
  • WebXR can hugely benefit from these features (since lack of DOM and camera freedom to look at text from near)

The first two points go hand in hand with the BJS philosophy of making complex things simple for the users.

Sorry for the long reply, but I truly think that these 2 features could help rise the adoption of BJS since a lot of 3d apps can benefit from smooth text and nice lines (with thickness!), the polish level that it brings to the table should not be underestimated.

1 Like