Text rendering using DymanicTexture - WebGL context lost error while creating many textures

I have another error on quite powerful laptop


I believe that the use of big textures is unreliable since you cannot know all user’s computer limitations for such a heavy load.
There could be different workarounds to solve this.

  1. Increase the hardware scaling level for the whole scene - https://doc.babylonjs.com/typedoc/classes/BABYLON.Engine#setHardwareScalingLevel
    If level = 1 then the engine will render at the exact resolution of the canvas. If level = 0.5 then the engine will render at twice the size of the canvas. To have consistent results one may use engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
  2. Use planes with Dynamic textures just twice bigger than needed dimensions, then scale down.
  3. Instead of planes use GUI with Text blocks; example - https://playground.babylonjs.com/#2ARI2W#335, docs here: The Babylon GUI | Babylon.js Documentation
  4. Use HTML/CSS markers as described here - Adding "floating labels" - #5 by Evgeni_Popov
  5. Use SPS as described here - Optimizing scene with lots (thousands) of 2d text labels in 3d space, example - https://playground.babylonjs.com/#Y13S7S#20
5 Likes