Cropped texture on PolygonMeshBuilder

Questions
1

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?

2

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

3

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

4

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:

5

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

2 Likes
6

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);
7

@mise glad you found a solution. An alternative ? https://playground.babylonjs.com/#ZD60FU#122

1 Like