SDF Font & 3D Lines

I really love BJS… and Typescript!

There are 2 features that I would really like to have as part of BJS:

  • SDF Fonts (with automatic generation)
  • True 3d lines with thickness (and material if possible), I mean 3d line from a strip with possibility to specify thickness in world or in screen pixels.

As a reference to what I mean, there are 2 nice packages in threejs for that:
SDF Font: troika/packages/troika-three-text at master · protectwise/troika · GitHub
Lines: GitHub - spite/THREE.MeshLine: Mesh replacement for THREE.Line

1 Like

Hi!

Fonts: Fast, dynamic 3D text in any TrueType font

I like the idea with the lines. Maybe you could give it a try and rewrite the THREE code to BabylonJS. I did som rewrites already and it was quite easy. Are you enough experienced to do it? If that’s not the case yet, maybe I could. Let’s wait for the responses from the BJS team though.

You should easily be able to do a 3D line using CreateRibbon. Set a path with points, decide on a normal to the path, decide on a width, use these to produce a parallel path and create ribbon.

2 Likes

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

I like both, let s see what @Deltakosh thinks.

About fonts and lines, I guess this might tickle @Cedric s interest :slight_smile:

2 Likes

SDF is definitely something I would love to see happening!

Lines it is still important but I feel like the need is perhaps less important?

Anyhow, I would gladly merge code related to these 2 features

1 Like

I recently ported three js msdf text renderer code to babylon and made a small lib, ik its bit late for you but thought might be useful for someone else.

4 Likes