# Letters blurred while using dynamic texture

**URL:** <https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417>\
**Category:** Questions\
**Created:** [June 16, 2022, 8:16am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417 "2022-06-16T08:16:41Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manish\_Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manish_michael/32/22894_2.png) [@Manish\_Michael](https://forum.babylonjs.com/u/Manish_Michael)\
**Post date:** [June 16, 2022, 8:16am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/1 "2022-06-16T08:16:41Z")

</div>

I have searched for similar problems, but i couldnt see them fixing my issue. Thats the reason why iam posting this ques.

My requirement is mainly to write inside the cells(cell id). These cells were drawn according to the data from an excel sheet. When i tried it seems to be blurred.

Relevant Code below:

grdHeight = 3200;  
grdWidth = 4600;  
var ground = BABYLON.MeshBuilder.CreateGround(“ground”, {width:grdWidth, height:grdHeight});  
ground.position.x = 2300;  
ground.position.z = 1600;

var textureResolution = 256;  
var textureGround = new BABYLON.DynamicTexture(“dynamic texture”, textureResolution, scene);  
var textureContext = textureGround.getContext();

```
var materialGround = new BABYLON.StandardMaterial("Mat", scene);    				
materialGround.diffuseTexture = textureGround;
ground.material = materialGround;

var img = new Image();
img.src = "/textures/floor.jpg";
img.onload = function() {
    //Add image to dynamic texture
    textureContext.drawImage(this, 0, 0);
	textureGround.update();	

    //Add text to dynamic texture
    var font = "bold 5px Arial";
    textureGround.drawText("Grass", 75, 135, font, "white", null, true, true);
    textureGround.drawText("Grass11", 150, 135, font, "white", null, true, true);
}	

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/4/64bf0ab6f002abf4d5ddd8ec651a1a656b4787cd.jpeg)

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 16, 2022, 8:41am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/2 "2022-06-16T08:41:52Z")

</div>

Hi,  
Possible to have a PG (repro)? To me, it looks like your ‘context’ does not do what it’s likely supposed to do.  
The way I see it, you are projecting over the entire ground/scene a 256 resolution for drawText, which would likely give this result. I can’t be sure but it really looks like it.

---

<div class="post-metadata">

**Author:** ![Manish\_Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manish_michael/32/22894_2.png) [@Manish\_Michael](https://forum.babylonjs.com/u/Manish_Michael)\
**Post date:** [June 16, 2022, 10:56am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/3 "2022-06-16T10:56:10Z")

</div>

I think it will take little time reprod this project… but will do for sure…

and what you said in the second point was correct.

And how can we read data from excel in PG?

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 16, 2022, 10:57am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/4 "2022-06-16T10:57:34Z")

</div>

> [@Manish\_Michael](#):
>
> And how can we read data from excel in PG?

Don’t bother. It doesn’t matter here. It could be any data. Just make a simple and hard coded PG. That will be enough.

---

<div class="post-metadata">

**Author:** ![Manish\_Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manish_michael/32/22894_2.png) [@Manish\_Michael](https://forum.babylonjs.com/u/Manish_Michael)\
**Post date:** [June 17, 2022, 7:44am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/5 "2022-06-17T07:44:01Z")

</div>

I have tried to draw it. but somehow lines are not showing up

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

---

<div class="post-metadata">

**Author:** ![Manish\_Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manish_michael/32/22894_2.png) [@Manish\_Michael](https://forum.babylonjs.com/u/Manish_Michael)\
**Post date:** [June 17, 2022, 8:00am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/6 "2022-06-17T08:00:31Z")

</div>

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/9/d9a3083f36da7cb626ca6614aa6f595430c81e5f.jpeg)

this is my original screen

---

<div class="post-metadata">

**Author:** ![Manish\_Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manish_michael/32/22894_2.png) [@Manish\_Michael](https://forum.babylonjs.com/u/Manish_Michael)\
**Post date:** [June 17, 2022, 9:34am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/7 "2022-06-17T09:34:02Z")

</div>

@JohnK could you check this one if you have time?

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 17, 2022, 10:05am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/8 "2022-06-17T10:05:45Z")

</div>

OK, it’s not what I thought. It’s kind of more problematic. You will need to look for another method.  
I first tried to isolate the dynamicTexture from the grass, did set the width and height to the full size (3200x4600pp) and got the exact same result. Didn’t understand why at first. Then I bounced on the 5px size of font. Created a same size image in photoshop 3200x4600 px at 72pp resolution and there goes, same result.

 ![debug-font-resolution](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/5/4513c3a57bb5146f6738efffc15a3719420a463f.png)  
The resolution at this size is not enough to draw a 5px text as image on the texture.

Edit: Quickly drafted this for comparison using advancedDynamicTexture for mesh at 2048 resolution

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

---

<div class="post-metadata">

**Author:** ![Manish\_Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manish_michael/32/22894_2.png) [@Manish\_Michael](https://forum.babylonjs.com/u/Manish_Michael)\
**Post date:** [June 17, 2022, 10:52am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/9 "2022-06-17T10:52:29Z")

</div>

Oh okay,. so what can be the possibilities to fix this? or are there any workaround which i can try?

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 17, 2022, 10:55am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/10 "2022-06-17T10:55:56Z")

</div>

May be @JohnK has a trick to have this work with your method. I don’t, I’m sorry.  
Else, the method above (see PG) would work even with 4096 resolution and low impact on performance, I believe. It would however require you to somewhat rework this part. May be wait to see if others have a better solution (that would not require so much work to redo)…

---

<div class="post-metadata">

**Author:** ![Manish\_Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manish_michael/32/22894_2.png) [@Manish\_Michael](https://forum.babylonjs.com/u/Manish_Michael)\
**Post date:** [June 17, 2022, 11:07am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/11 "2022-06-17T11:07:54Z")

</div>

Sure, then 🙂 thank you

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [June 17, 2022, 11:33am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/12 "2022-06-17T11:33:59Z")

</div>

> [@Manish\_Michael](#):
>
> @JohnK could you check this one if you have time?

What am I checking? The are a number of issues you raise.  
Let me try to answer the title ‘Letters blurred while using dynamic texture’.

Here is a very crude PG that shows that the larger the width and height of the dynamicTexture there are more pixels to write on so text remains clearer when shrunk to fit the ground.

Try different values for the parameters for createGroundAndTexture(index, fontSize, z)

Index set the power of 2 used (up to 8), fontSize as it says, z positions the ground

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

Have a read through the PG code and work out what each line is doing.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 17, 2022, 12:26pm UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/13 "2022-06-17T12:26:15Z")

</div>

Amazing. I didn’t know of that at all. Works beautifully. Bookmarked it. Thx and have a great weekend 😃

---

<div class="post-metadata">

**Author:** ![Manish\_Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manish_michael/32/22894_2.png) [@Manish\_Michael](https://forum.babylonjs.com/u/Manish_Michael)\
**Post date:** [June 18, 2022, 6:52am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/14 "2022-06-18T06:52:58Z")

</div>

i increased the ground dimensions and got this. - [https://playground.babylonjs.com/#5ZCGRM#2625](https://playground.babylonjs.com/#5ZCGRM#2625)

what im i doing wrong here?

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [June 18, 2022, 8:22am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/15 "2022-06-18T08:22:23Z")

</div>

There is a limit to the size of the dynamicTexture as indicated by

> [@JohnK](#):
>
> Index set the power of 2 used (up to 8)

Since in the PG the dynamicTexture is based on groundWidth and groundHeight by increasing these sizes 100 times you reach the limit when the index is 1.

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

In your project you need to find the best balance between ground width and height, the dynamicTexture width and height, and font size.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 18, 2022, 8:47am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/16 "2022-06-18T08:47:47Z")

</div>

I was just wondering. Why not separate it from the actual ground texture/image and work it as an overlay.  
Eventually split in 2 or 4? I guess that would work, wouldn’t it?

---

<div class="post-metadata">

**Author:** ![Manish\_Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manish_michael/32/22894_2.png) [@Manish\_Michael](https://forum.babylonjs.com/u/Manish_Michael)\
**Post date:** [June 20, 2022, 6:00am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/17 "2022-06-20T06:00:31Z")

</div>

I tried to add an image also. what went wrong?

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

It’d be great if u can explain me these points, as im not able to understand.

1. Whats the diff between passing a resolution value and passing height, width to the dynamic texture?
2. what should be relation or how it should be calculated, bw the plane or ground w.r.t dynamic texture?

Sorry, if i have asked a blunder question, as im completely not understanding here.

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [June 20, 2022, 7:48am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/18 "2022-06-20T07:48:39Z")

</div>

> [@Manish\_Michael](#):
>
> Whats the diff between passing a resolution value and passing height, width to the dynamic texture?

They are alternatives. A single resolution value produces a square dynamicTexture, a width and height give a rectangular one.

> [@Manish\_Michael](#):
>
> what should be relation or how it should be calculated, bw the plane or ground w.r.t dynamic texture?

It makes sense if your dynamicTexture and ground have the same width, height ratio

---

<div class="post-metadata">

**Author:** ![Manish\_Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manish_michael/32/22894_2.png) [@Manish\_Michael](https://forum.babylonjs.com/u/Manish_Michael)\
**Post date:** [June 20, 2022, 9:55am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/19 "2022-06-20T09:55:02Z")

</div>

thank you, and also can you check the pg? i tried to render an image using dynamic texture, but it wasnt working

---

<div class="post-metadata">

**Author:** ![Manish\_Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manish_michael/32/22894_2.png) [@Manish\_Michael](https://forum.babylonjs.com/u/Manish_Michael)\
**Post date:** [June 20, 2022, 10:21am UTC](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417/20 "2022-06-20T10:21:53Z")

</div>

I also tried to add the image into the diffuseTexture. but it was not working

[Next page](https://forum.babylonjs.com/t/letters-blurred-while-using-dynamic-texture/31417.md?page=2)