Native MSDF Text Rendering Support

Feature requests
1

Rendering crisp and performant 2D text in WebGL/GPU is hard, but MSDF text rendering is a fantastic solution that has helped many of my and others’ implementations. The current method of rendering 2D text with Babylon using dynamic textures is also great but comes with drawbacks with large amounts of text and resolution quirks.

It would be fantastic to have this feature natively supported in Babylon, allowing it to be used more universally in applications while being easier to maintain.

There are some great examples from the community using this method already:

https://forum.babylonjs.com/t/thin-instance-multi-channel-signed-distance-field-fonts/21991 No longer maintained

@Bhushan_Wagh
https://github.com/bhushan6/babylon-msdf-text (currently use this but a few version behind now)

The above NPM package is being used to support 2D text in anu.js, extending it with a few features and making it work a little more like the other meshBuilders https://jpmorganchase.github.io/anu/guide/prefabs/planetext.html

https://forum.babylonjs.com/t/tactical-card-game-in-babylonjs/49034 custom implementation for their game, very nice : )

There was also a related feature request from a few years back that was of interest, but this was also before the current voting method for requests was being used.https://forum.babylonjs.com/t/sdf-font-3d-lines/27791/4

1 Like
2

That would be great to have

1 Like
3

I would love to contribute my effort in my spare time! I’ve implemented gpu instances msdf text rendering in From Unity to WebGL: Our Journey Building a Virtual Real Estate Tour with Babylon.js - #3 by zb_sj

4 Likes
4

Take my angry up vote!!

5

This is something I’m also interested in working on if you have no time. Please let me know :smiley:

6

Fixed some issues with GitHub - bhushan6/babylon-msdf-text: library to render text in Babylon js using MSDF technique and ported to typescript. I hope this will be helpful until we have this feature natively in babylon js.

2 Likes
7

We will :slight_smile: we are chatting with @zb_sj to see how we can open source his solution. Maye we can also collaborate with you @Bhushan_Wagh ?

The goal is to introduce a new addon: Babylon.js/packages/dev/addons at master · BabylonJS/Babylon.js

3 Likes
8

Yeah, I’ll love to collaborate.

2 Likes
9

I added you to our PM

1 Like
10

First PR: Add new addon to render text using MSDF by deltakosh · Pull Request #16582 · BabylonJS/Babylon.js

2 Likes
11

Some tests using PR env:
prova | Babylon.js Playground
prova | Babylon.js Playground
prova | Babylon.js Playground

6 Likes
12

85
Any ideas to optimize small scale text like this?

Steps to repro:

  1. Open this
  2. Attach control of camera
  3. Scale camera to make fonts smaller
  4. Watch it
13

Yes you can use a larger MSDF texture for instance.
Or create the MSDF with a smaller font directly as well

14

maybe @zb_sj or @Bhushan_Wagh can chime in too as they are my experts on that topic ;D

15

Small font was something I also had struggle on.
I know some engine draws prerendered bitmap font texture when size is below certain threshold.

I’ve tried to implement subpixel like this: GitHub - astiopin/webgl_fonts: WebGL font rendering, but had no luck getting viable result. Looking back now; I probablly made mistake where astiopin/webgl_fonts is only considering 2D space and I didn’t take screenspace in to account.

17

What do you mean? the addParagraph feature is there. What would be the goal of setParagraph?

18

Hmmm, seems the texture is staticly prebuilt, and contains only necessary chars. I’ve tried with FXAA and have no luck, would antialiasing help in this case?
Also, since the font texture is static, is it practical to use this tech over CJK and other unicode chars? Unicode 16 contains 154k chars now.

22

Yes, the font is static, but we can support paging. Now for 154K characters it will be too much

Again, this is like every time with every tech: the price for perf is less flexibility. You have to know beforehand which character will be used.

24

Hmmm, can the texture be assemblied on-the-fly? Since browser has some builtin texture rendering methods, like measuring and drawing text to canvas, and upload the canvas as font texture

25

Yes this is an option totally
I plan to look into it

1 Like