MSDF Text renderer

One per mesh is what we use in the inspector without overhead.

I’m not sure I follow? Can you screenshot what you are talking about? I thought the inspector was react/vue (I don’t remember which one).

Is there something that renders mesh names on each mesh or something as a toggle in the inspector? My bad, feels like I’m missing something here.

Yes Babylon.js/packages/dev/inspector/src/components/actionTabs/tabs/debugTabComponent.tsx at master · sebavan/Babylon.js · GitHub

Hmm that is interesting. I’m going to have to benchmark this against our solution at Frame, but it seems like it really cant handle a bunch.

Thanks for the information!

(side note the names toggle is not working for me)

what is not working?

120fps :slight_smile:

Ill show the difference today when I get a chance. Its not about this not working its about the cycle impact at scale.

UPDATE
Actually after testing your solution is faster!

Nice that is good to know thank you. Great work.

1 Like

How do we get the text to respect renderingGroupIds?

Its also looking like it does not like orthographic views or viewports as well.

Let me see if I can whip up and example.

EXAMPLE

This is really close to our setup, I cant for the life of me figure out how to get it to appear correctly.

In our real scene its rendering off the viewport, and behind the second scene.

The “Andy” labels you can see are outside of the scenes viewport, and its behind all the other content no matter what I do.

The top left one should be right on top of the Green Circle, and the other chopped of one should be right over the pink circle. When panning around it looks like they are still taking perspective into account even though its orthographic.

to be fast the system is not using the classic rendering path. But here the idea if you want your text to be above everything is to render in an utility layer scene for instance

I had to add a transformation matrix to get the text to show above the objects and it wasn’t scaled the same as your screenshot. :wink: just FYI.

Can you show me, because I tried that and they never rendered in the right place.

Will that respect orthographic projections? Because from what I was seeing it look as through they had depth and offset from standard projections or at least appeared to.

I’ll look into the utility layer though for the rendering group work around.

Yeah, stay tuned here for the playground sample, but I meant that as a reply to @Deltakosh

Edit: Here you go.. I know the fix for it, but this is what I was talking about.
Update: To note.. when I say “Yeah” I mean it CAN work, but may require tweaking. I didn’t enable billboards or go the extra mile on that one.

One more update, this one scales the text just fine, stays local to the parent.

Before:

After:

I didn’t look further into the shaders or anything else to see if there’s a mismatch or issue between gfx cards or shader impl.. This is via webgl2.

1 Like

with utility layer you control the cam too so it is even better

1 Like

Regarding renderingGroupId, you can use the scene.onAfterRenderingGroupObservable observable to render the text after a rendering group has been draw:

    const updateObs = scene.onAfterRenderingGroupObservable.add((info) => {
        if (info.renderingGroupId === 0) {
            textRenderer.render(
                scene.activeCamera?.getViewMatrix() ?? BABYLON.Matrix.Identity(),
                scene.activeCamera?.getProjectionMatrix() ?? BABYLON.Matrix.Identity(),
            );
        }
    });

That will render the text after objects with renderingGroupId = 0 have been displayed.

5 Likes

So if I need it always on top of everything I could just wrap that in scene.onAfterCamara… right?

1 Like

Yes, scene.onAfterCameraRenderObservable is also ok.

2 Likes

Got it doing what I need now thanks.

1 Like

No problem! Glad that worked out for you.

Yup after applying everything we discussed and making some small changes I got it working in my actual context.

Thank you so much this was being more stubborn than it should have been.

Now Im trying to get an outline without artifacts. What are some good values for thickness, strokeInsetWidth and strokeOutsetWidth to make it so the sdf does not overdraw its elements?

I keep getting odd artifacts with the outlines no matter how I set them up. One set of numbers is good for a certain zoom but then as you zoom out the edges of the mesh instances get drawn and some other overdraw artifacts appear.

image

Its kind of hard to see, but you can see some black lines where the edge of the rendering planes are.


but when zoomed in you don’t see them. Its also hard to get a real “defined” outline.

2 Likes