# Custom GUI labels performance test

**URL:** <https://forum.babylonjs.com/t/custom-gui-labels-performance-test/17676>\
**Category:** Demos and projects\
**Tags:** gui\
**Created:** [January 21, 2021, 6:28am UTC](https://forum.babylonjs.com/t/custom-gui-labels-performance-test/17676 "2021-01-21T06:28:33Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![MarkBevels](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/markbevels/32/13799_2.png) [@MarkBevels](https://forum.babylonjs.com/u/MarkBevels)\
**Post date:** [January 21, 2021, 6:28am UTC](https://forum.babylonjs.com/t/custom-gui-labels-performance-test/17676/1 "2021-01-21T06:28:33Z")

</div>

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](https://playground.babylonjs.com/#WC6GET)

 ![Screenshot 2021-01-21 at 06.27.04](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/4/4d65d89a5d9a83c0d6b686c6753dc7c99272cf1b.jpeg)

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

---

<div class="post-metadata">

**Author:** ![MarkBevels](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/markbevels/32/13799_2.png) [@MarkBevels](https://forum.babylonjs.com/u/MarkBevels)\
**Post date:** [January 21, 2021, 8:14am UTC](https://forum.babylonjs.com/t/custom-gui-labels-performance-test/17676/2 "2021-01-21T08:14:23Z")

</div>

🤔 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. 😕 Result below.  
[https://playground.babylonjs.com/#WC6GET#2](https://playground.babylonjs.com/#WC6GET#2)

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [January 21, 2021, 9:49am UTC](https://forum.babylonjs.com/t/custom-gui-labels-performance-test/17676/3 "2021-01-21T09:49:46Z")

</div>

Do not know if this helps or not [Babylon.js Playground](https://playground.babylonjs.com/#9QMCGA) but is an example of labeling directly with dynamicTexture and [SPS](https://doc.babylonjs.com/divingDeeper/particles/solid_particle_system) rather than gui

---

<div class="post-metadata">

**Author:** ![MarkBevels](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/markbevels/32/13799_2.png) [@MarkBevels](https://forum.babylonjs.com/u/MarkBevels)\
**Post date:** [January 21, 2021, 10:10am UTC](https://forum.babylonjs.com/t/custom-gui-labels-performance-test/17676/4 "2021-01-21T10:10:25Z")

</div>

Hey Jedi Master @JohnK 😃 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](https://playground.babylonjs.com/#WC6GET#3)

I worked out pivot from [docs](https://doc.babylonjs.com/divingDeeper/mesh/transforms/parent_pivot/pivot) and I trying to follow [example](https://playground.babylonjs.com/#C12LH3#7) but moment billboard is enabled everything gets twisted making my brain hurt. 😓 😓 😅

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. 😃

---

<div class="post-metadata">

**Author:** ![MarkBevels](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/markbevels/32/13799_2.png) [@MarkBevels](https://forum.babylonjs.com/u/MarkBevels)\
**Post date:** [January 21, 2021, 11:19am UTC](https://forum.babylonjs.com/t/custom-gui-labels-performance-test/17676/5 "2021-01-21T11:19:03Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/9fcf34fcc9e5ead9b2f46cdcc709162770e54542.jpeg)

[https://playground.babylonjs.com/#WC6GET#6](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.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 21, 2021, 11:33am UTC](https://forum.babylonjs.com/t/custom-gui-labels-performance-test/17676/6 "2021-01-21T11:33:30Z")

</div>

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](https://playground.babylonjs.com/#WC6GET#8)

---

<div class="post-metadata">

**Author:** ![MarkBevels](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/markbevels/32/13799_2.png) [@MarkBevels](https://forum.babylonjs.com/u/MarkBevels)\
**Post date:** [January 21, 2021, 11:36pm UTC](https://forum.babylonjs.com/t/custom-gui-labels-performance-test/17676/7 "2021-01-21T23:36:51Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![MarkBevels](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/markbevels/32/13799_2.png) [@MarkBevels](https://forum.babylonjs.com/u/MarkBevels)\
**Post date:** [January 22, 2021, 1:29am UTC](https://forum.babylonjs.com/t/custom-gui-labels-performance-test/17676/8 "2021-01-22T01:29:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MarkBevels](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/markbevels/32/13799_2.png) [@MarkBevels](https://forum.babylonjs.com/u/MarkBevels)\
**Post date:** [January 22, 2021, 8:05am UTC](https://forum.babylonjs.com/t/custom-gui-labels-performance-test/17676/9 "2021-01-22T08:05:39Z")

</div>

Was just going through [performance tips](https://doc.babylonjs.com/divingDeeper/scene/optimize_your_scene) from documentation and decided to try following for labels generated as advanced dynamic textures.

```auto
    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](https://playground.babylonjs.com/#WC6GET#10)  
FYI. It takes a moment to generate labels for all the spheres.
