Guides/Demos for 3D Leaderboards

Questions
1

Hello,
I am currently making a game and so far I’ve been designing all of the UIs in a 3d format I wanted to challenge myself, using MeshWriter for text, and I was wondering how I would create a 3d leaderboard with a scrollbar. I want the leaderboard to have a transparent background and just the leaderboard values floating midair. Does anybody have a demo/guide/playground on how to do this or just an example at all? I’m fairly new to BabylonJS, so don’t be afraid to overexplain stuff!

2

Do you want a 2d UI in world space or an actual full 3d mesh based UI?

3

I was looking for a 3d mesh-based in a world space initially, but a 2d UI in world space sounds equally good. If you could provide a playground for either, that would be great!

4

I believe meshwriter doesn’t sound to me like suitable for a 3D GUI.
You could just use the 3D GUI or make use of a dynamic texture with parallax occlusion.
Meshwriter is very heavy for drawing text. Of course, my opinion only.

Edit: Here a couple of examples (SS) of how I use it in my current scene

Capture d’écran 2023-03-22 à 12.40.44
Capture d’écran 2023-03-22 à 12.40.441308×944 68.8 KB

Capture d’écran 2023-03-22 à 12.40.14
Capture d’écran 2023-03-22 à 12.40.141303×937 44.8 KB

I believe the advantages of using a dynamic texture is that it is:

  1. easy (and fast) to update
  2. a lot less heavy on performance than meshwriter
  3. easy to make pickable on the entire area (and not just the text, image or icon) and hook it with interactions just the same as the 2D or 3D GUI.
  4. easy to make in a ‘list format’ (comes with a small trick, but I can give it to you)

Edit1: OK, I’m among the ‘good Guys’ :innocent: :grin: so here for the example (rushed):

Hope this helps and have a great day :sunglasses:

2 Likes
5

Thanks for the suggestion! It seems to be working pretty well for me. Is there any way to make it scrollable so that only a certain amount of values can be displayable at a time? A scrollable page or even a page system where a certain amount of values is available to be seen per page is fine.

6

Not just like that. I mean there’s always a way (nearly) but the dynamic texture cannot use the 2D GUI controls. Incorrect. You can use the 2D GUI control to ‘pilot’ any mesh or material. Issue with the dynamic texture is that it will need to update with each change on the SV or slider. Else it will create artefacts. I can try figure something or ask for help if I don’t manage. Just before I do that, I’d like to ask: Do you really need the 3D fx on the text for a leaderboard? What more will it bring in your scene?

Edit:

Yes, that can be easily done.

7

Sorry for the very late response, but no, there is no benefit to my scene exactly, but I was just wondering if it would be possible or not.

8

Well, as I said: possible but means it has to redraw on each change. I’m not sure how much of a smooth feeling it would be acting on it with a slider. If was you I would choose either a 2D option with scrollviewer or if you want the 3D feeling, make it page by page. This way you could generate n planes and n clones of a dynamicTexture and draw a list of say 10 in each. Changing page would simply make plane/texture number n visible and hide the others. Something like that.

9

Thanks for the recommendation! I will try implementing this and post again if I get it working.

1 Like
10

Sure. Anytime. And a PG even non-working always makes it easier.
Meanwhile, have a great day :sunglasses: