How to use DynamicTexture

[Polpatch]

Hi guys,

 

I have this type of menu split into section (buttons). I want insert (line 111) a text in each button using a DynamicTexture but, as you can see, the text have a irregularity in the corner (i guess it's due by the ribbon's triangulation).

There are other ways to enter text in a Mesh, perhaps with the possibility of indicating the inclination?

 

Here my code (it's just a draft  )

http://www.babylonjs-playground.com/#TLXTN#21

Thanks to all.

 

[jerome]

http://www.babylonjs-playground.com/#TLXTN#22

 

the ribbon UVs (texture coordinates) are designed to stretch the texture along the whole ribbon surface, what is done in your example

you have here only two big faces per ribbon, that's why you notice the distorsion like you were zooming a tiny part of a big element and trying to apply it then something continuous

 

you should detail your ribbons in many intermediate paths and I guess the texture will look continuous

[Polpatch]

http://www.babylonjs-playground.com/#TLXTN#22

 

the ribbon UVs (texture coordinates) are designed to stretch the texture along the whole ribbon surface, what is done in your example

you have here only two big faces per ribbon, that's why you notice the distorsion like you were zooming a tiny part of a big element and trying to apply it then something continuous

 

you should detail your ribbons in many intermediate paths and I guess the texture will look continuous

yes, adding a middle point the corner is ok, but text is choppy.... I can say "It's not a bug, it's a feature" ahahaha

http://www.babylonjs-playground.com/#TLXTN#23

 

P.s. Thanks 

[jerome]

I can only see 2 paths in the ribbon pathArray parameter in your example. I would have done a pathArray with 3, 4 or 5 paths for a better definition.

You could also try to build your paths like your lines (CreateLines), it is to say radial to the circle instead of tangent to it.

 

[EDIT] ok, I understand : you did them radial, but you added a middle point. That's good anyway.

 

My suggestion is to add another path inbetween posButton and posButton[i -1].

 

 

I'm afraid the text will always be distorded anyway : the initial texture is rectangular and your ribbon is not.

[Polpatch]

I can only see 2 paths in the ribbon pathArray parameter in your example. I would have done a pathArray with 3, 4 or 5 paths for a better definition.

You could also try to build your paths like your lines (CreateLines), it is to say radial to the circle instead of tangent to it.

 

[EDIT] ok, I understand : you did them radial, but you added a middle point. That's good anyway.

 

My suggestion is to add another path inbetween posButton and posButton[i -1].

 

 

I'm afraid the text will always be distorded anyway : the initial texture is rectangular and your ribbon is not.

http://www.babylonjs-playground.com/#TLXTN#24

Indeed, adding a split line between posButton and posButton[i-1] the text remain distorted.

The same fate adding other intermediate points in the lines, hahaha

http://www.babylonjs-playground.com/#TLXTN#25

 

Dynamic Texture is the only way to write the text in a Babylon's scene, right?

[jerome]

no, dynamicTexture is useful to write onto a texture

 

you can write also with bGui (extension), GuiCastor (extension) for instance

 

but if you want to apply a rectangular texture onto a not rectangular surface and keep the text readable you'll have imho only two options :

- draw an contra-distorted text or a dedicated texture

- change the mesh Uvs so they fit your specific need

[Polpatch]

no, dynamicTexture is useful to write onto a texture

 

you can write also with bGui (extension), GuiCastor (extension) for instance

 

but if you want to apply a rectangular texture onto a not rectangular surface and keep the text readable you'll have imho only two options :

- draw an contra-distorted text or a dedicated texture

- change the mesh Uvs so they fit your specific need

mmmmh... ok, I will study what to do,, perhaps by creating a small box to be inserted in the middle of the button ... sigh

Thanks for your help