Unwrap custom mesh including y-axis

[samevision]

Hello guys,

I know I am spamming last days but I work on several scenes and even my 3D knowledge increased dramatically over the last year there are a lot of things where I have no clue how to solve them. I want you to know that I appreciate every help very much.

Unwrapping is a problem I cannot solve since a while and I cannot find any solution on this forum, threejs, stackoverflow, etc. I wonder why - either the answer is so obvious that no one has to ask this or it is not that much requested as I expect.

I try to unwrap a simple shape - very similar to a cube but the function presented in the docs only uses x and z coordinates. This leads to the problem that the vertical faces are not affected: https://playground.babylonjs.com/#T4W98Q#4

I noticed that CSG does some magic to the uvs. This is exactly how the sides should look after firing the unwrapping function.

Any idea how to unwrap this shape manually?

Best

[JohnK]

Not sure what you mean by unwrapping a shape. Guess it is something to do with how a material is applied.

For a box you could look at faceUV Creating A Box | Babylon.js Documentation

If your shape is just an extension of a polygon try faceUV with Irregular Polygon Extrusion | Babylon.js Documentation

[Pryme8]

If you can identify the faces you could do a planar projection to them and assign uv values manually, this might be rather tedious though.

[samevision]

https://playground.babylonjs.com/#T4W98Q#4

@JohnK

With unwrapping I mean generating the uv coordinates of my extruded shape to put a texture on it. I forgot to mention that I use ExtrudeShapeCustom to make use of the scaleFunction. The playground I mentioned above just shows a simple example but usually the shape has some beveled edges and corners. Since I have to use the scaleFunction of ExtrudeShapeCustom I cannot use CreateBox or ExtrudePolygon.

@Pryme8

Isn’t it a planar projection in my playground already?

I think a cubic projection would be the best for my case:

I don’t understand how uvs are handled in babylon generally. For my pg I receive an uv array with the length of 120 => u & v for each of the 60 vertices. But isn’t it possible to define the uvs per face instead per vertex? There are 80 faces with with 3 vertices each and u & v for each vertex = 480.

In CSG I found the following function that is applied to each submesh:

const indices = object.getIndices()
for (let i = 0; i < indices.length-1; i += 3) {
    for (let j = 0; j < 3; j++) uvs = [...uvs, uvs[indices[i + j] * 2], uvs[indices[i + j] * 2 + 1]] 
}

This function would lead to 480. But anything above 120 will not applied by object.updateVerticesData(BABYLON.VertexBuffer.UVKind, uvs).

Babylon.js Playground

EDIT:

I just found out that have to use convertToFlatShadedMesh() before unwrapping. Now there are 480 uvs already. But have still no clue how to generate uvs for cubic projection.

[Pryme8]

When I get back to the office I’ll post something for you. A cubic projection is the same as a planar one just done from 6 different normals.

You can technically make a cube around your mesh and then cast a ray for every vertex to the closest face of the cube grab the uv results of the hit and set your meshes uvs to the results. You could do it without raycasts as well but this is a “simple” way to do it.

[samevision]

Does the cube get with your solution exactly the save uv coordinates for each face? It sounds like a totally different approach like the one I finally created. The approach of my pg leads to inverted textures on top. https://playground.babylonjs.com/#T4W98Q#11

I am quite happy with the result though. But I noticed that there are some little issues when applying bevels with many segments. https://www.babylonjs-playground.com/#GW2F0U#37 The geometry looks solid:

But some of the uvs are not correct. This problem doesn’t exist without the segments in the bevel. I marked them with red arrows on this picture:

@Pryme8 Do you have an idea what the problem could be?

Best