Me and Mr_T have been having fun with this. Thanks to Mr_T for supplying a good test case for this.
There are several issues with the batching in this case:
- Text elements destroy and create mesh instances when the text is changed. It doesn’t seem to update the batch to remove the mesh instances when this happens so extra text is rendered to the screen as seen here in Spector.JS
- UI rendering order really gets messed up by batching.
To get around the 1. we disabled the entity which removes mesh instances from the batch, change the text and enabled the entity. Not the most efficient but enough to get working while investigating a fix or better method.
For 2. We used layers to handle render order on the UI. This ensures that the text is rendered last.
Final result:
https://playcanvas.com/editor/scene/1039294
Updating large batches that change frequently is not recommended (at least via the disable/enable method).
Next steps are to find better ways to add/remove the mesh instance from the batch without disabling.