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.
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 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.
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);
Use planes with Dynamic textures just twice bigger than needed dimensions, then scale down.