How to correct the uv coordinate in custom mesh?

Using MeshBuilder.ExtrudeShap or RibbonBuilder to create curve line mesh with turns, the uv coordinate was strange, textrue was mismatched, it looked like be stretched
https://playground.babylonjs.com/#QWDGP8
711f9b69c7a5ac4c0855dae244c2d4401acab21e_2_690x460

As shown below, that’s what i want, uv coordinate is perfect, texture without any twist. How to do that?

You would need to compute your UV layout manually for this to work.

Maybe @JohnK has a better idea ? (He is always the king to answer those questions)

@sebavan is correct but it is certainly not a straightforward thing to do. Imagine a rubber strip painted in identical tiles along its length. Now try to lay it on a surface to make the letter S. Along the outer curved edges the tiles are stretched more than the inner edge. This is what us happening with the texture.

A possible solution might be to increase the number of points on your path around the most curved sections.

1 Like

i got your idea, cut more sections to be close to the rectangle. But how can i do that for the curved sections? Because of the number of points on path is the same for each section line mesh

Since the number of points is the same for each section, you can add more sections in the curved areas by adding more points to your path. One such way could be: create a “base” spline with the desired control points, evaluate the spline and use the evaluated points to create another spline with more detail on the desired areas. I tried to put together a playground with this idea:

https://playground.babylonjs.com/#QWDGP8#5

2 Likes