Text on mesh problem

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


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

Hello! maybe the GUI could help?

https://www.babylonjs-playground.com/#XCPP9Y#16

https://doc.babylonjs.com/how_to/gui

1 Like

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

here we are:
https://www.babylonjs-playground.com/#XCPP9Y#2272

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.

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

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

hi , I can’t use GUI :frowning: 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?

You can then directly rely on a DynamicTexture: Use Dynamic Texture - Babylon.js Documentation

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

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??

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

Well please fix your PG before :slight_smile: Or simply make a simple one with a box or something :smiley:

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

At least it runs, now. :slight_smile: 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. :slight_smile:

1 Like

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

See my adjustments to my last post. :slight_smile: 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). :smiley:

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

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

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

2 Likes

Bug will be corrected by:

2 Likes

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 . 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
thank you and take care of yourself and your family <3