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

**URL:** <https://forum.babylonjs.com/t/text-rendering-using-dymanictexture-webgl-context-lost-error-while-creating-many-textures/46466>\
**Category:** Questions\
**Tags:** texture, text, dynamic-texture\
**Created:** [December 15, 2023, 6:28pm UTC](https://forum.babylonjs.com/t/text-rendering-using-dymanictexture-webgl-context-lost-error-while-creating-many-textures/46466 "2023-12-15T18:28:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![anand471](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anand471/32/20479_2.png) [@anand471](https://forum.babylonjs.com/u/anand471)\
**Post date:** [December 15, 2023, 6:28pm UTC](https://forum.babylonjs.com/t/text-rendering-using-dymanictexture-webgl-context-lost-error-while-creating-many-textures/46466/1 "2023-12-15T18:28:09Z")

</div>

Hello,

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

> **[Babylon.js Playground](https://playground.babylonjs.com/#1AV58V%236)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

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

 ![TextRendering](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/f/9f2c82c0e5fee5d2ee7b2d297a115744af5ca3ca.png)

Console error if large number of text planes are rendered

 ![ContextLost](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/8/288669bd9a0cc599de3d8235af5aaef46489e534.png)

Display after context is restored.

 ![ContextRestored-TextNotRendered](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/6/568e3d92ab90653ec9e48f6af2f9d70c4e8152de.png)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [December 15, 2023, 11:15pm UTC](https://forum.babylonjs.com/t/text-rendering-using-dymanictexture-webgl-context-lost-error-while-creating-many-textures/46466/2 "2023-12-15T23:15:01Z")

</div>

> [@anand471](#):
>
> s there any limit on maximum number of `DynamicTexture` that could be created?

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.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [December 16, 2023, 1:21am UTC](https://forum.babylonjs.com/t/text-rendering-using-dymanictexture-webgl-context-lost-error-while-creating-many-textures/46466/3 "2023-12-16T01:21:56Z")

</div>

I have another error on quite powerful laptop

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/9/59895b166617eabfb3b001a21e80456b43ba8e85.png)  
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](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](https://playground.babylonjs.com/#2ARI2W#335), docs here: [The Babylon GUI | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#textblock)
4. Use HTML/CSS markers as described here - [Adding "floating labels" - #5 by Evgeni\_Popov](https://forum.babylonjs.com/t/adding-floating-labels/11012/5)
5. Use SPS as described here - [Optimizing scene with lots (thousands) of 2d text labels in 3d space](https://forum.babylonjs.com/t/optimizing-scene-with-lots-thousands-of-2d-text-labels-in-3d-space/25666), example - [https://playground.babylonjs.com/#Y13S7S#20](https://playground.babylonjs.com/#Y13S7S#20)  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/2/4258cb3a616d05b4c9cdd8fb1fd67c214d2039d0.jpeg)

---

<div class="post-metadata">

**Author:** ![anand471](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anand471/32/20479_2.png) [@anand471](https://forum.babylonjs.com/u/anand471)\
**Post date:** [December 18, 2023, 4:16pm UTC](https://forum.babylonjs.com/t/text-rendering-using-dymanictexture-webgl-context-lost-error-while-creating-many-textures/46466/4 "2023-12-18T16:16:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![anand471](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/anand471/32/20479_2.png) [@anand471](https://forum.babylonjs.com/u/anand471)\
**Post date:** [December 18, 2023, 4:19pm UTC](https://forum.babylonjs.com/t/text-rendering-using-dymanictexture-webgl-context-lost-error-while-creating-many-textures/46466/5 "2023-12-18T16:19:12Z")

</div>

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.
