# Text on mesh problem

**URL:** <https://forum.babylonjs.com/t/text-on-mesh-problem/9777>\
**Category:** Questions\
**Created:** [April 7, 2020, 12:00am UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777 "2020-04-07T00:00:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ilyes\_ELAYEB](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ilyes_elayeb/32/7662_2.png) [@Ilyes\_ELAYEB](https://forum.babylonjs.com/u/Ilyes_ELAYEB)\
**Post date:** [April 7, 2020, 12:00am UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/1 "2020-04-07T00:00:26Z")

</div>

Good evening everyone sorry to start so many topics lately , but I’m new in handling of babylonjs and I’m developing a big project recently ,  
the problem I’ve encountered is in adding text to a mesh.  
I tried with diffuse texture but the problem, the result look like this

 ![Capture d’écran de 2020-04-07 00-56-26](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/8/8b08d0f97d39be04e801a651003d340a50507b1c.png)  
ps : I used the pbr for the texture of the fabric on the shirt .  
pbr.albedoTexture = new BABYLON.Texture(“assets/configurator/textures/texturebleu.png”, this.scene);  
pbr.metallic = 0.0;  
pbr.roughness = 0.5;  
pbr.sheen.isEnabled = true;  
pbr.sheen.intensity = 0.5;  
ps :im building a configurator with angular and babylonjs

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 7, 2020, 3:32pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/2 "2020-04-07T15:32:47Z")

</div>

Hello! maybe the GUI could help?

[https://www.babylonjs-playground.com/#XCPP9Y#16](https://www.babylonjs-playground.com/#XCPP9Y#16)

[https://doc.babylonjs.com/how\_to/gui](https://doc.babylonjs.com/how_to/gui)

---

<div class="post-metadata">

**Author:** ![Ilyes\_ELAYEB](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ilyes_elayeb/32/7662_2.png) [@Ilyes\_ELAYEB](https://forum.babylonjs.com/u/Ilyes_ELAYEB)\
**Post date:** [April 7, 2020, 3:53pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/3 "2020-04-07T15:53:19Z")

</div>

hi , thanx for helping ,  
how can i delete the border of the rectangle , i want only the text

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 7, 2020, 4:06pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/4 "2020-04-07T16:06:08Z")

</div>

here we are:  
[https://www.babylonjs-playground.com/#XCPP9Y#2272](https://www.babylonjs-playground.com/#XCPP9Y#2272)

---

<div class="post-metadata">

**Author:** ![Ilyes\_ELAYEB](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ilyes_elayeb/32/7662_2.png) [@Ilyes\_ELAYEB](https://forum.babylonjs.com/u/Ilyes_ELAYEB)\
**Post date:** [April 7, 2020, 5:05pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/5 "2020-04-07T17:05:52Z")

</div>

i have problem with the package GUI it dosent exist on the babylonejs package (using angular ts)  
when i npm install babylone-gui i got this error  
node\_modules/babylonjs-gui/babylon.gui.module.d.ts(7283,13): error TS1086: An accessor cannot be declared in an ambient context.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 7, 2020, 8:45pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/6 "2020-04-07T20:45:35Z")

</div>

This is probably related to your TS version. Try to use the latest one

---

<div class="post-metadata">

**Author:** ![Ilyes\_ELAYEB](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ilyes_elayeb/32/7662_2.png) [@Ilyes\_ELAYEB](https://forum.babylonjs.com/u/Ilyes_ELAYEB)\
**Post date:** [April 7, 2020, 11:16pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/7 "2020-04-07T23:16:24Z")

</div>

unfortunately I am adding a configurator to an angular website, I upgrade the TS, ut then it is not possible any more to start the project it says that the angular compiler and the core are not compatible with the version of the ts

---

<div class="post-metadata">

**Author:** ![Ilyes\_ELAYEB](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ilyes_elayeb/32/7662_2.png) [@Ilyes\_ELAYEB](https://forum.babylonjs.com/u/Ilyes_ELAYEB)\
**Post date:** [April 8, 2020, 2:30pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/8 "2020-04-08T14:30:37Z")

</div>

hi , I can’t use GUI ☹ the version of the template I have can’t be upgraded (angular compiler) otherwise a lot of errors will come out,  
isn’t there any other way to add text to a pbr.albedo texture?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 8, 2020, 2:54pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/9 "2020-04-08T14:54:03Z")

</div>

You can then directly rely on a DynamicTexture: [Use Dynamic Texture - Babylon.js Documentation](https://doc.babylonjs.com/how_to/dynamictexture)

---

<div class="post-metadata">

**Author:** ![Ilyes\_ELAYEB](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ilyes_elayeb/32/7662_2.png) [@Ilyes\_ELAYEB](https://forum.babylonjs.com/u/Ilyes_ELAYEB)\
**Post date:** [April 8, 2020, 3:26pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/10 "2020-04-08T15:26:17Z")

</div>

i alrady try it  
this.shirt = this.scene.getMeshByName(“shirt”);  
var textureGround = new BABYLON.DynamicTexture(“dynamic texture”, {width:512, height:256}, this.scene , false) ;  
//Add text to dynamic texture  
var font = “bold 44px monospace”;  
textureGround.drawText(“Grass”, 75, 135, font, “black”, null, true, true);  
var materialGround = new BABYLON.StandardMaterial(“Mat”, this.scene);   
materialGround.diffuseTexture = textureGround;  
this.shirt.material = materialGround;

than i got

 ![Capture d’écran de 2020-04-08 16-25-31](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/8/80337dfed6a3585b1064b080b9d8ebb3aee09f06.png)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 8, 2020, 3:58pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/11 "2020-04-08T15:58:35Z")

</div>

Without a repro in the Playground it is complicated to help.  
But do you want to have the text on your shirt? or as a floating label??

---

<div class="post-metadata">

**Author:** ![Ilyes\_ELAYEB](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ilyes_elayeb/32/7662_2.png) [@Ilyes\_ELAYEB](https://forum.babylonjs.com/u/Ilyes_ELAYEB)\
**Post date:** [April 8, 2020, 4:32pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/12 "2020-04-08T16:32:53Z")

</div>

i want the text on the shirt , i build a configurator and i want to add text to the shirt or cuff …  
this is the pg i dont know why it dosent work  
[https://www.babylonjs-playground.com/#IX12S2#58](https://www.babylonjs-playground.com/#IX12S2#58)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [April 8, 2020, 5:03pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/13 "2020-04-08T17:03:41Z")

</div>

Well please fix your PG before 🙂 Or simply make a simple one with a box or something 😃

---

<div class="post-metadata">

**Author:** ![Wingnut](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wingnut/32/53_2.png) [@Wingnut](https://forum.babylonjs.com/u/Wingnut)\
**Post date:** [April 8, 2020, 6:09pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/14 "2020-04-08T18:09:41Z")

</div>

I will try to help there. Must get indents correct (tab/shifted-tabs)… learn Monaco editor and its hot-keys, well.

Line 40 - Must not use _as Mesh_ in JS-type playground.

Line 36 breaks everything, crashes shaders, so I disabled.

[https://www.babylonjs-playground.com/#IX12S2#80](https://www.babylonjs-playground.com/#IX12S2#80)

At least it runs, now. 🙂 AND, there’s SOME text on the shirt.

Now, to get it positioned, sized, de-blurred, and workable… I dunno. Smarter to use DynamicTexture on little planes… in my opinion. Positioning dynamicTextures at multiple places in multiple font sizes upon the shirt mesh… what a nightmare… me thinx. Sorry for discouraging opinion.

Little/big planes… with words on them… SO SO much easier to deal-with. You can use DynamicTexture on little planes, too… without needing GUI 2d extension. Little planes… handy.

You will simply be using DynamicTexture (many of them) on little planes… instead of Advanced Dynamic Texture (gui2d for mesh) on little planes. Slightly more difficult, but MUCH easier than DynamicTexture on-shirt… I think. No need to change angularJS.

Yeah, I just rem you can’t use GUI. And that’s why I am quickly modifying my post… sorry… I forgot about that. 🙂

---

<div class="post-metadata">

**Author:** ![Ilyes\_ELAYEB](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ilyes_elayeb/32/7662_2.png) [@Ilyes\_ELAYEB](https://forum.babylonjs.com/u/Ilyes_ELAYEB)\
**Post date:** [April 8, 2020, 6:20pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/15 "2020-04-08T18:20:25Z")

</div>

thnax , the problem i tht i cant yse GUI for my current version of angular compiler , and i cant upgrade it

---

<div class="post-metadata">

**Author:** ![Wingnut](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wingnut/32/53_2.png) [@Wingnut](https://forum.babylonjs.com/u/Wingnut)\
**Post date:** [April 8, 2020, 6:22pm UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/16 "2020-04-08T18:22:21Z")

</div>

See my adjustments to my last post. 🙂 You can use DynTextures on little planes too… no limit to how many DT’s in scene. (Wingy pushes-down the brain tumor forming on his forehead). 😃

@Ilyes_ELAYEB’s garment editor… it might be the death of us all. 😃 (just kidding)

---

<div class="post-metadata">

**Author:** ![Ilyes\_ELAYEB](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ilyes_elayeb/32/7662_2.png) [@Ilyes\_ELAYEB](https://forum.babylonjs.com/u/Ilyes_ELAYEB)\
**Post date:** [April 9, 2020, 12:08am UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/18 "2020-04-09T00:08:42Z")

</div>

Wingut ha fixed the pg , but he commented the line 36 wich assign the pbr material to the meshs ,  
i try the dynamic texture it on my project and the result is

 ![Capture d’écran de 2020-04-08 19-24-57](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/6/64ad9131df8b0d3d7d7784ba0ec7708a280cc541.jpeg)

---

<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:** [April 9, 2020, 12:27am UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/19 "2020-04-09T00:27:30Z")

</div>

You must explicitly set the `pbr.sheen.roughness` value to avoid the crash =\> it’s a bug we are going to correct asap.

In any case, you want in most cases set explicitly `pbr.sheen.roughness` because if you don’t do it, you end up using the same value than `material.roughness` and can’t use a different value than the one of the material.

[https://www.babylonjs-playground.com/#IX12S2#85](https://www.babylonjs-playground.com/#IX12S2#85)

---

<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:** [April 9, 2020, 12:59am UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/20 "2020-04-09T00:59:38Z")

</div>

Bug will be corrected by:

> <https://github.com/BabylonJS/Babylon.js/pull/8005>

---

<div class="post-metadata">

**Author:** ![Ilyes\_ELAYEB](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ilyes_elayeb/32/7662_2.png) [@Ilyes\_ELAYEB](https://forum.babylonjs.com/u/Ilyes_ELAYEB)\
**Post date:** [April 9, 2020, 2:37am UTC](https://forum.babylonjs.com/t/text-on-mesh-problem/9777/21 "2020-04-09T02:37:00Z")

</div>

First of all I wanted to thank you for your all for your help and the work you do to fix the bugs in these difficult times,  
my initial problem is on the addition of text to the shirt at a precise position, I was given the GUI as a solution but I can’t use it because of the angular version of the template used,  
so. [Deltakosh](https://forum.babylonjs.com/u/Deltakosh) . proposed to use Dynamic texture but when I use it the texture added with pbr disappeared (initially blue ) . as in the pg [https://www.babylonjs-playground.com/#IX12S2#89](https://www.babylonjs-playground.com/#IX12S2#89)  
thank you and take care of yourself and your family \<3

[Next page](https://forum.babylonjs.com/t/text-on-mesh-problem/9777.md?page=2)
