Optimizing scene with lots (thousands) of 2d text labels in 3d space

Questions
1

Hi, I’m trying to optimize a scene were there could be thousands (let’s say 10k) boxes, and each one with a label on the top face with a unique label.

Here is the playground scene I’ve created for this: Babylon.js Playground

My approach for this was creating instances for the boxes, and for each label a plane with a dynamic texture.

The bottleneck are the labels, since each label is composed of a plane mesh + unique material + unique texture.

Up to 500 boxes, it runs ok, but over that the performance starts to degrade.

What other aproach is possible for rendering thousands of different texts attached to individual boxes?

Some restrictions:

  • The boxes should be individually pickable
  • The labels should be dinamically set (so, it’s not possible to have a static texture with all the labels)

Any help is really apreciated!

1 Like
3

Hello and welcome!
There is an example with SPS and dynamic texture labeling which may be useful - https://playground.babylonjs.com/#A9K31I#3
(have a look at texture number - there are only 2 textures at all)

image
image1618×806 99 KB

4 Likes
4

Using @labris 's demo link I was able to make progress in incorporating it with the original demo.

https://playground.babylonjs.com/#Y13S7S#10

Before breaking down this merging of 2 PG’s let’s understand why the original was slow. You were smart to create instances of the original box, but then you go and create 10k plane meshs which defeats the purpose of using instances. Then we get into the dynamic texture and material. In my mind also creating 10k of these would also be quite costly. The way I understand it is we need 1 giant texture which we will then index into in with different UV offsets. Since we can’t do that with instances, the SPS is the way to go.

To build one giant string (since we can only have 1 text draw call) I create a single string which I keep adding to in line 67. (I’m starting to think maybe and array would be better like the SPS demo)

numberString += Math.floor(Math.random()*10000).toFixed(0) + " ";

we also in our loop add the source box into the SPS line 66:

SPS.addShape(sourceBox,1, {positionFunction: myPositionFunction} );

Now in this position function is where things will differ. I’m still trying to understand the uv offset math from the SPS, but once the correct numbers are in place we should be all set. I commented the area where the UV offset needs to be calculated.

Let’s keep it going! @labris Thank you for the great start!

2 Likes
5

First performance question is: do you need to display them all in camera view? Even is so, you may try to use Levels of Detail (LOD) | Babylon.js Documentation

3 Likes
6

Also going to throw this out there as a follow up, this doc can be useful in general for scene optimization. Optimizing Your Scene | Babylon.js Documentation

It was actually the first I looked at before diving into any code. :blush:

7

More examples of using dynamic texture for labels
https://playground.babylonjs.com/#A9K31I#20

https://playground.babylonjs.com/#9QMCGA#1

4 Likes
8

Thanks everybody for all the examples and directions given! They really helped me!

The SPS is really powerful! It was able to render thousands of boxes with high performance!

I continued @msDestiny14 edit in the playground (https://playground.babylonjs.com/#Y13S7S#20) to change how the labels are drawn, allowing to use different color for each label/box, and to support multiple materials (in case the texture size limit is reached).

I just couldn’t figure out how to set the texture just for the top face of the cube particle, is it possible? Does a individual particle have a faceUV property like the normal meshes such as shown in the doc examples (Map Materials to Individual Mesh Faces | Babylon.js Documentation)?

About the performance, with 40k boxes (200 x 200) it is very fluid! But if I set to 400x400 I think it’s taking too much memory for the textures and the playground is crashing.

This is way beyond what I’ll actually need in the final product (even 10k cubes is more than enough), but I’m just wondering if there is a way to go even further with this approach.

And again, thank you very much for your time!

2 Likes
9

Possible although calculations can be more complicated Managing Solid Particles | Babylon.js Documentation

Some optimization is possible Optimizing Solid Particle Systems | Babylon.js Documentation

1 Like