Box mesh manual UV mapping order

I’m creating a mesh using BABYLON.MeshBuilder.CreateBox and trying to manually set the UVs because I want to map an 2d isometric tile (see attached image) to the box.

How can I tell what the order of the UV coordinates should be for each face of the box? Are there any references that mention this? I was following Create Custom Meshes From Scratch | Babylon.js Documentation for some idea of how to do this, but I haven’t found a defacto list of what order my UVs array should be in.

image

Hey there, have you seen this doc yet? It shows which direction each face faces and shows how to map a different part of the texture to each face of the box. :slight_smile:

4 Likes

I haven’t seen that yet, but this looks awesome. Thanks for the quick reply.

So this was super useful but I think I need to go further unless I can somehow skew the UV for a single face. I’ve attached an image to show what I mean. The sprite is isometric so I think I need control per vertex.

What I’ve tried is something like this from the custom mesh docs:

const normals: number[] = [];
const positions = box.getVerticesData(BABYLON.VertexBuffer.PositionKind);
const indices = box.getIndices();

BABYLON.VertexData.ComputeNormals(positions, indices, normals);

const vertexData = new BABYLON.VertexData();
vertexData.indices = indices;
vertexData.uvs = uvs; // What order are these in??

vertexData.applyToMesh(box);

But I didn’t find a source to understand the exact order of the UVs per vertex when doing this. It seems like I need to know the order of the vertices in the facets of a face to map it correctly.

Example of unskewed texture not looking correct.
image

The uvs are in the same order as the faces shown in the doc, 4 UV pairs per face. Here’s where they’re created for reference.

1 Like