Difficulty getting texture UV aligned on front face of extruded shape

Hi all! See the below extruded shape:

I’m trying to get the texture (in this case a red and black checkerboard) so that it aligns with the top and bottom horizontal edges of the shape, which are flat along the x axis.
The way the texture maps along the top face of the mesh is correct.
I want the front shape to be like a mask for the texture and for the texture to just appear “clipped” where the 45 degree cut-outs are. And ideally I want to be able to apply this generically to any extruded shape.
Is the texture mapping being messed up by the triangles created for the shape?
I have searched, but didn’t find any simple solution.

I’m not sure it’s doable with the default Shape extruder, what you are wanting (UVs aligned on the cap) seems a bit specific.

Is this a 8 corners shape the only case you need ? If so, a work around can be going from a Cube and moving the positions to fit your need : this way you have the cube’s uv layout.

See here https://playground.babylonjs.com/#KFY3SS#9

Alternatively, if you need more complicated shapes, you can do the UV unwrap yourself, but it’s not the easiest task.

Edit : I read to fast. You need custom UVs, doing it from the cube wont make the trick.

Edit 2 : With custom UVs and using the default Shape Extruder, you may achieve this https://playground.babylonjs.com/#KFY3SS#10


Many thanks! It will take me some time to fully understand how that last example works, but it looks like it’s almost there - just need to stretch the texture vertically.
At this stage I only have this particular shape, but I’m guessing more scenarios will come up.
I’ll take it from here. Thanks!

Seems to render proportionally for any width / height of the shape. Getting the other faces to match more closely will be my next challenge!


I think I understand vertex data a bit better now. For anyone interested, here is a full solution!

I added some variables for the shape dimensions and texture “tile size” to test with.

Thanks @SvenFrankson !

1 Like