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


We are rendering some cad drawing documents that have a lot of text. We use DynamicTexture to render text. Currently, the quality of text rendered on screen & when the same is printed on a A0 paper is not good. We were looking at options to improve the text rendering.

In one forum post, we came across the idea of creating a larger plane & texture, render text on to it and then scale the plane to requisite dimensions.

We tried to create a large texture. Since the size of largest texture that could be created depends on the gl.MAX_TEXTURE_SIZE, we have used this value to create a texture that fits into this size.

Text rendering by this approach results in better text clarity.

But, problem occurs when we draw more than say, 200 different text planes.

Here’s a PG link

In this PG, in line not 57, if numberofPlanes value is set at say at 10 or 150, text renders fine. But if it is increased to say 200 or more planes, then WebGL context is lost and text rendering fails. In some cases, browser snaps.

I couldn’t understand what we are doing wrong. Is there any limit on maximum number of DynamicTexture that could be created? Please suggest on addressing this failure.

Thanks in advance.

Here are few screen shots

Normal rendering of text planes

Console error if large number of text planes are rendered

Display after context is restored.

1 Like

There is a limit of the total GPU memory that can be allocated to textures. It seems you overflowed this limit. If you can, you should dispose a texture when you don’t need it anymore, so that the total number of textures alive at any time won’t overflow the GPU memory.

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

Thanks for the update. I’ll check on GPU memory limits.

Great! Thanks for compiling many different text rendering techniques! We tried 1,2,3. Would explore on 4 & 5 and see if it suits our needs.

1 Like