I am building a DCIM monitoring system with 100+ screens or more each one I use a single THREE.InstancedMesh with a custom shader for the screen backgrounds (Canvas Texture) and using troika-three-text for all text labels (4-5 labels per screen).
The numeric values (Temperature, Power, etc.) update every 1 second..
in case of why i did use canvas texture but did’nt implement the text inside it, that is because i wanted to make one general texture for all screens, it is not ideal to update the textures canvas text each 1s resulting in updating the whole texture and couldn’t find a way to use texsub2dImage with canvas as texture.
Even though Troika is very fast, having 100+ separate Text instances results in over 100 draw calls. When multiple values update at the same time, the CPU overhead from calling .sync() on hundreds of objects causes huge frame drops.
so I want to know is there a way to instance troika-three-text or batch multiple text strings into a single draw call? or better why of using multiple text labels with smaller draw calls?
This is not an answer of your original question, because it does not comment on troika texts.
Instead, this is just a demo of your rejected idea - using canvas textures. The demo shows 135 panels with fixed texture (the same in all panels) and 4 dynamic texts written on each panel every second. The trick is that the texts are drawn in another canvas texture (e.g. lightMap), thus the main background texture (map) is kept unchanged and the light map is used as HUD.
https://codepen.io/boytchev/full/jEMVmXa
The framerate looks fine on my old machine (over 140 fps). But in case of scattering, texture updates could be spread throughout the animation, for example, each frame update only 10 of the textures are updated.
But if your DCIM screen texts are pure 2D text facing the user, maybe one ordinary HTML/CSS layer of <div> tags on top of the Three.js canvas would be faster and better ← but this has to be tested, as it is only my expectation.
4 Likes
Ok using the lightMap is clever idea didn’t cross me but this made me wonder if this could be done with multi-pass or it would be heavier!
i will try it out i hope it works as the canvas texture already heavy enough .. i actually have the 2 modes html/transfrom the html one implemented as you said with divs on top of the canvas but for this case the transfrom one that is the problem for me here is the deference..
Transfrom:
HTML:
