Cropped texture on PolygonMeshBuilder

Let’s say I want to show the bottom half of a texture on a rounded-rect mesh.
I know how to put the bottom half on a plane mesh, and I know how to create an opacity texture to make it rounded.
I also know how to create a rounded-rect mesh with the PolygonMeshBuilder.

How can I put the bottom half of the texture on the rounded-rect mesh?

Hi @mise - Pinging @Evgeni_Popov to see if he has an idea

Try Irregular Polygons | Babylon.js Documentation or Irregular Polygon Extrusion | Babylon.js Documentation

ok, so maybe I could use Path2.getPoints() to feed this MeshBuilder.CreatePolygon().
Step 2 would be to get the natural rounded-rect uv’s and modify them (divide all y’s by 2).
I don’t know how to get those uv’s.

But if I could do that, couldn’t I also get out the uv’s from the Mesh I am creating now with the PolygonMeshBuilder and modify those?

So in conclusion, I think my problem is creating the natural rounded-rect uv’s, which the PolygonMeshBuilder is doing for me, or getting them out from the PolygonMeshBuilder’s mesh (and updating them) :slight_smile:

You can get the created uv for a mesh by doing mesh.getVerticesData("uv") and modify them by doing mesh.setVerticesData("uv", uvs).


nice, I got that working really quickly!

for completion, here’s the code:

            const uvs = mesh.getVerticesData(VertexBuffer.UVKind)!;
            for (let i = 0; i < uvs.length; i++) {
                if (i % 2 === 1) {
                    uvs[i] = uvs[i] / 2;
            mesh.setVerticesData(VertexBuffer.UVKind, uvs);

@mise glad you found a solution. An alternative ?

1 Like