Best Approach for Displaying Dynamic Sensor Values in Babylon.js

Hi everyone,

I’m working on a project where I need to display multiple sensor values in real-time using Babylon.js. My current setup involves updating textures on various planes, but I’m concerned about the performance, especially as the number of sensors increases.

Here are the main approaches I’m considering:

  1. Dynamic Textures: Updating the texture content dynamically using BABYLON.DynamicTexture.
  2. Texture Atlas: Combining multiple textures into a larger texture atlas to reduce the number of texture swaps.
  3. Babylon.GUI: Using Babylon.GUI to create text elements and placing them on a static texture.

My primary goals are to maintain high performance while ensuring the updates are smooth and responsive. Here are a few specific questions:

  • Which of these methods is generally considered the best for performance in a scenario with frequent updates?
  • Are there any significant performance trade-offs I should be aware of with each method?
  • Would a texture atlas provide a noticeable improvement in performance over dynamic textures?
  • Is Babylon.GUI efficient enough for displaying frequently updated text, or does it have limitations I should be aware of?

Any insights, experiences, or recommendations would be greatly appreciated!

Thanks in advance for your help!

How many max planes? Will the camera ever move? If so, will all planes always be in viewport?

Safest thing you can do is spawn max planes, fill them with dummy values and observe scene stats.

1 Like

It depends on the device that is connected :thinking:, but the regular use case is around 500 sensors. But there are devices that might have over 5k. I render the geometry of the sensor (it’s a pressure sensor matrix with different shapes) and place a plane per sensor over the midpoint with a transparent material. Each plane gets a dynamicTexture (which will be updated every 50ms). In most cases, everything is visible.

The scene works fine on my machine, but slows down and lags in camera movement on older hardware. I try to optimize different things (thinking also about some instancing/cloning stuff), but read about the texture-atlas approach and now I am wondering which technique leads to the most performance boost :sweat_smile:

So it is like health bars of enemies if it was a game, right?

But honestly I find it diffult to predict what’s going to happen. Technically, having one texture, one mateiral and one mesh (SPS maybe?) should boost performance.

Hm, eventually, say you already had an atlas texture. That would be like writing arbitrary values, 5000x, into the texture buffer and updating the texture every 50ms. You could test that. If this is already too slow, then you probably will need a better approach.

If too slow, maybe it could help to batch update in maybe like 1000K plane chunks. Or something with LODs. If some planes are in the background just display color codes (e.g. green alright, red needs attention).

Worst case, some other alternatives:

  • sprites,
  • HTML overlays (world space ↔ screen space sync),
  • actual number/text meshes