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:
Dynamic Textures: Updating the texture content dynamically using BABYLON.DynamicTexture.
Texture Atlas: Combining multiple textures into a larger texture atlas to reduce the number of texture swaps.
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!
It depends on the device that is connected , 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
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).
Thanks a lot so far for the input! And yeah the analogy with the health bars is pretty fitting here!
It took some time, but I created a playground in which it’s possible to test the different approaches and optimizations: Babylon.js Playground
So far it seems that the combination of using instancing for TextPlanes and UV manipulation is the one with the most performance (Render Method: Texture Atlas). Sprites perform also nice and are more simple to implement!
I tried SPS but had no success so far, also using a global GUI and synch the spaces brought no benefit I am also not sure of thin instances would bring me further improvements.
If anyone is in need, I created a simple to use HighPerformanceTextRenderer class which might help you out
The playground features a 32x32 matrix of text elements that updates with random strings at regular intervals. The HighPerformanceTextRenderer class uses instanced meshes and a custom shader (uv manipulation) for efficient real-time text updates. You can check it out here:
, 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.
