Wrapping images around seams / faces / corners / sides

Hey there,

I have a scenario where an arbitrary image needs to be wrapped around an arbitrary mesh.

I know that decals work in similar situations, however one of my requirements is to wrap from front to back without distortion. So decals will likely not work here.

When I first read the DynamicTextures docs it seemed that they would be perfect. After working with them, though, it seems like this is either not the case or that I am misunderstanding something about how UV Wrapping and/or Face Indices work.

I found this playground that made me hopeful:
https://www.babylonjs-playground.com/#9U086#121

but when I changed the shape to a Cube, it failed:
https://www.babylonjs-playground.com/#WVSWGL

You can understand how this is problematic when the mesh could have 30 faces and I can have no guarantees about how they will align.

Is there something about how the Cylinder’s sides are created or joined that I could apply to the models that I am working with?

Why is the Cube different?

I am at the point where I am wondering if it would be easier to draw the unwrapped texture out onto an HTML Canvas, draw the logo on top of it, and then see if I can get BJS to apply that image to the Mesh as the Material.

P.S. to @Wingnut : I’ve read a lot of your helpful posts about similar issues. They helped me a great deal to understand the limitations of Decals. Thanks for that.

I havn’t used this code to much but I believe this has to do with the vertex buffers of UVKind for the mesh. Depending on how these are specified will determine how the texture is displayed on the image. The cube vs other shape creation will populate these buffers differently by default.
https://doc.babylonjs.com/how_to/updating_vertices

I think it may be tricky to get this to work for an arbitrary shape as there are many possible ways to wrap a weirdly shaped object but maybe someone else knows better.

1 Like

Thanks for reading.

I think you are saying that the origin and directional orientation of each side are determined during the modelling process.

So that would solve the mystery of “Why does the text on the cube face different directions?”.

I am still left with: Why do the cylinder’s sides allow text to wrap around them? If I could figure that out, and if it were a modelling process thing, then I perhaps would have solved my problem.

Or if that is impossible, has anyone heard of a solution for a similar situation with this amount of complexity?

The cylinder sides allow text to wrap as whoever added the code to create the cylinder probably felt it was the most common way users would expect the uv mapping to work. You could always read the uv buffers and try to modify them to achieve the wrapping you would prefer. Or create shapes yourself in a modelling tool like blender or try to use Create a Ribbon - Babylon.js Documentation to build your shape.