MSDF Text renderer

Announcements
63

If you are into shader, it looks like that:

void main(void) {
    mat4 world = mat4(world0, world1, world2, world3);
    vec4 worldPos = transform * (world * vec4(offsets.xy - vec2(0.5, 0.5), 0., 1.0));

    if (mode >= BILLBOARD) {
        vec3 viewPos = (view * parentWorld * vec4(0., 0., 0., 1.0)).xyz; 
        if (mode == BILLBOARDSCREENPROJECTED) {
            viewPos.x /= viewPos.z;
            viewPos.y /= viewPos.z;
            viewPos.z = 1.0;
        }
        gl_Position = projection * vec4(viewPos + worldPos.xyz, 1.0); 
    } else {
        vec3 viewPos = (view * parentWorld * worldPos).xyz; 
        gl_Position = projection * vec4(viewPos,1.0); 
    }
    atlasUV = vec2(uvs.x + offsets.x * uvs.z, uvs.y + (1.0 - offsets.y) * uvs.w);
}`
1 Like
64

lol, I tried as much as I could:

image
image909×501 38.9 KB

1 Like
65

This clarifies a lot, thanks for the thorough explanation @Deltakosh !

1 Like
66

Thanks @Deltakosh for the nice feature.

I tried it to replace the dynamictexture. The quality is better but found some issue regarding scene selection.

Textredender on scene2 | Babylon.js Playground

It seems the text renderer will render in the last scene no matter where the parent is (seems the gizmomanager has some similar issue).

image
image936×859 15.8 KB

Is this a bug or there is some extra settings?

Thanks.

67

Well you decide where to render it :wink:

    scene.onAfterRenderObservable.add(() => {
        textRenderer.render(camera.getViewMatrix(), camera.getProjectionMatrix());
    });

Attach it to the scene you want and it should work :slight_smile:

In your case, you are daisy chaining the scenes so you need to make sure the textRenderer is called BEFORE the second scene:

Textredender on scene2 | Babylon.js Playground

1 Like
68

Thanks.

In reality it can be hard to hardcode the creation of scenes and text renderer.

Normally scenes are created at the initial stage, with labels loaded dynamically based on the data.

It will be handy to explicitly indicate in which scene to draw the text.

69

That’s exactly what is happening here :slight_smile: you register to the scene.onAfterRenderObservable for that

The fact that you are also hooking a second scene here is a user decision

1 Like
70

May I ask if font size Settings are supported? No relevant API was found

71

This is control like the postition through the parent transform https://playground.babylonjs.com/#6RLCWP#54 or the font scale: https://playground.babylonjs.com/#6RLCWP#55

And the thickness through the thicknessControl: https://playground.babylonjs.com/#IABMEZ#4

3 Likes
72

I was also looking for a way to change the font size. Thank you.
BTW, I confirmed that the MSDF Text renderer can be used in Japanese.

8 Likes
73

Just sharing the information I’ve collected. A dynamically generated SDF text open source project: troika/packages/troika-three-text at main · protectwise/troika · GitHub
Example :Troika Examples
:smiley:

1 Like
74

The scale seems to be set in typescript as readonly.

75

@Deltakosh this is a great feature and I’d love to extend the functionality. Following the theme of my high thin instance count scenes, my use case will be using this as “nameplates” for each entity. The end goal is to have n nameplates all handled in one draw call.

I’d like to create a batching system/class that can create “thin instance” handles and a method to add a paragraph, color and initial world matrix. Consumer would be responsible for updating the instance’s world matrix.

I have a few ideas and wanted to get some advice on what makes the most sense for core functionality:

  • Separate class BatchTextRenderer. Would be some duplicate code but provide the functionality to manage an internal buffer, including hash set of strings the consumer asks for (if 50 entities are called “a rat” only need to store glyph data for that once)
  • Extend the existing class with new methods/internal state/shader logic to handle instances
  • Create a class/static utility function that takes an array of existing TextRenderer instances and boils everything down to one handle that can render everything in one draw call.

I’ll be prototyping some stuff out and will post updates :slight_smile:

1 Like
76

Love it!

77

Is there a way to use MSDF Text as a button? thx for any help :kissing_face:

78

Are you using the GUI for a button ?

79

Yes, I would like to know if it is possible to use MSDF Text as an interactive label that follows the model. Thanks for your help :grin:

80

Did you try this Babylon.js docs and what was the limitations there ?

81

Thanks for the guidance, I will try this.:grinning_face:

1 Like
82

Is there any way to have one TextRenderer, but have multiple words attached to different meshes?

Or is it always one for one? Its looking like its one for one.