MSDF Text renderer

Announcements
43

@Deltakosh

Shouldn’t this return IMatrixLike?

44

Yup! I realized that like 10mins ago :slight_smile:
PR is in already

1 Like
45

I was wondering how I could add empty lines using the addParagraph function, since \n doesn’t work if the line doesn’t contain any other characters. There’s a simple trick: just add a character that wasn’t defined in the charset when generating the MSDF files. :zany_face:

Line 16:

image
image1736×1292 55.7 KB

Alternatively, you can use the ParagraphOptions.translate:Vector2 property, of course—though it’s not very convenient for long texts.

@Deltakosh wouldn’t IVector2Like be a better choice?

46

try \n\b

1 Like
47

@Pryme8 Works, thanks :smiley:

48

nope as I use “multiplyByFloats” at some point (which is dumb so I’ll fix that :D)

1 Like
49

Thanks @roland! It is in PR :slight_smile:

1 Like
50

Just introduced a new feature to screen project the text so it remains at the same size no matter where the cam is:

Introduce screenProjection for textrenderer by deltakosh · Pull Request #16645 · BabylonJS/Babylon.js

4 Likes
51

Stress test: https://playground.babylonjs.com/#E5URLZ#40

Looking good :smiley:

1 Like
52

Nice!

here another one, although it uses only one textrenderer, if it creates one textrenderer per cube it is really slow.

PG with one textrenderer:

PG with many textrenderers:

1 Like
53

Hi @Deltakosh

Is billboard mode working properly in this example? I cannot reproduce the regular billboard mode:

PG:

54

Oh sweet:

//                                                                              ↓!!!
textRenderer.addParagraph(`c: ${index}`, {}, BABYLON.Matrix.Translation(t.x, t.y, t.z));
1 Like
55

Ah for billboard to work, textrenderer needs to be parented!

PG:

56

Hi!

This example is parented but it still needs the rendering call. How can I use parenting to avoid that call?

57

It is working..all the texts are looking at the camera

1 Like
58

You can’t. Parenting is simply used to help move the text or attach it to a node. It has nothing to do with rendering

1 Like
59

It does work when the textrenderer is parented (as the second example), but it doesn’t when it isn’t. Parenting works for my case, thanks!

60

It does even when not parented. The text is facing the camera:

image
image750×457 88.3 KB

No rotation, always facing the camera.

61

Here is a video showing what I mean, initially it is without billboard mode, it is turned on after. Is this expected?

62

Yes :slight_smile:
Here is a PG to better understand it:
Thin instances test | Babylon.js Playground

The translation you apply per paragraph is what I call the paragraph world matrix. It is encoded in a buffer for each character and it helps move that character relatively to the paragraph origin.

The biilboarding happens at the paragraph level (else each character would look to the camera individually :)).

So in your case, the whole BLOCk of text is billboarding. Not individual lable.

You picked the right solution for your use case: parenting. Because parenting happens after the billboarding effect

Hopefully it makes sense :smiley:

1 Like