Sign in to follow this  
Polpatch

How to use DynamicTexture

Recommended Posts

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  :D)

Thanks to all.

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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  :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.