Custom GUI labels performance test

Demos and projects
1

Was playing around with GUI trying to work out performance cost for tracking multiple elements on the scene. Here is an example of 200 objects being tracked by multiple GUI elements.

I wouldn’t recommend that approach in production, nevertheless it looks satisfying.
https://playground.babylonjs.com/#WC6GET

Screenshot 2021-01-21 at 06.27.04
Screenshot 2021-01-21 at 06.27.042658×1678 568 KB

And humble beginnings scene if anyone wants to dig in
https://playground.babylonjs.com/#BHTT8U

5 Likes
2

:thinking: Looked at the code again I figured I could nest GUI containers, and call linkWithMesh only on top level container to improve performance.

Assumption was incorrect. :confused: Result below.
https://playground.babylonjs.com/#WC6GET#2

3

Do not know if this helps or not Babylon.js Playground but is an example of labeling directly with dynamicTexture and SPS rather than gui

4

Hey Jedi Master @JohnK :smiley: Thanks for the link. I am working on exactly that right now (another iteration of experiment, it’s addictive). Performance is much better. But have hit yet another wall. Can’t figure out pivot position for planes set to billboard mode.
plane.billboardMode = BABYLON.TransformNode.BILLBOARDMODE_ALL

Gotten as far as this
https://playground.babylonjs.com/#WC6GET#3

I worked out pivot from docs and I trying to follow example but moment billboard is enabled everything gets twisted making my brain hurt. :sweat: :sweat: :sweat_smile:

I should probably post this in question section instead of here but hey… it will make a nice example if …I can finish it that is. :smiley:

5

Not perfect with much space for improvement but it renders with 60 fps on my machine for 200 objects.

Screenshot 2021-01-21 at 10.59.22
Screenshot 2021-01-21 at 10.59.223760×1922 1.02 MB

https://playground.babylonjs.com/#WC6GET#6

Couple of takes from this exercise:

  • GUI lacks performance, so choosing between GUI vs dynamic textures for mesh material, later is way better choice.
  • Setting up billboard mode with pivot for planes is far from intuitive for corner rotation pivots. Easier alternative is using “proxy” pivot plane, unfortunately that has performance drawback.

Final effect is quite pleasing but somewhat disappointing when it comes to performance. I was expecting to be able to make it work with at least 1000 labels.

I am open to any suggestions on how to make it work.

Further optimisation I can think of at the moment would be reusing graphical texture instead of creating it on the fly and only generating text. It would surely reduce initiation time and reduce memory usage.

6

In your first PG, what takes time is drawing the ellipsis: it seems it’s a slow operation in the 2D context of a canvas. Drawing a rectangle is much faster:

https://playground.babylonjs.com/#WC6GET#8

2 Likes
7

Amazing! It haven’t even crossed my mind. I suppose I could drop those elements all together, or alternatively use sprites. Thank you very much @Evgeni_Popov. Great help as always!

8

Here is version with GUI control points instead of rectangles. Difference is quite noticeable.
https://playground.babylonjs.com/#WC6GET#9

9

Was just going through performance tips from documentation and decided to try following for labels generated as advanced dynamic textures.

    plane.doNotSyncBoundingInfo = true;
    plane.freezeNormals()
    plane.material.freeze()
    plane.cullingStrategy = BABYLON.AbstractMesh.CULLINGSTRATEGY_OPTIMISTIC_INCLUSION_THEN_BSPHERE_ONLY

Result was quite surprising. It almost doubled the amount of objects that can be rendered steady at around 60FPS.

https://playground.babylonjs.com/#WC6GET#10
FYI. It takes a moment to generate labels for all the spheres.

4 Likes