Texturing/UVmapping polygons in a complex shape generated by PolygonMeshBuilder()

[Aushou]

Hello!

 

I'm having trouble figuring out the how to map specific parts of a larger image to specific polygons forming a complex shape created by through the PolygonMeshBuilder. After hours of researching the problem and finding only similar answers that either don't, or I can't figure out how to, apply to my specific situation, I'm turning to asking directly for help.

 

I was given code that generates a map of the US, where each state is a separate object generated from an XML file using the PolygonMeshBuilder class. The assignment is to take a provided image displaying a map of the entire US, and have each state object pull it's specific portion of the map image to texture it.

        $.each(polys, function( index, value ) {            var pts = $(this).find('outerBoundaryIs').find('LinearRing').                              find('coordinates').text().replace(/,0 /g," ").replace(/,/g, " ");                                         var groundMat = new BABYLON.StandardMaterial("red", scene);            groundMat.diffuseTexture = new BABYLON.Texture("usa-physical-map2.jpg", scene);            groundMat.specularColor = new BABYLON.Color3.Black();                                    var ground = new BABYLON.PolygonMeshBuilder(stName + "_" + index,                                                         BABYLON.Polygon.Parse(pts), scene).build();            ground.parent = state;                        ground.material = groundMat;            //ground.material = new BABYLON.StandardMaterial("red", scene);            //ground.material.diffuseTexture = new BABYLON.Texture("usa-physical-map2.jpg", scene);                        var ptCoords = ground.getVerticesData(BABYLON.VertexBuffer.PositionKind);             console.log("ptCoords: " + ptCoords);               var tCoords = ground.getVerticesData(BABYLON.VertexBuffer.UVKind);            console.log("tCoords: " + tCoords);

This is the relevant code that generates the ground of the state which is what is drawn to the scene. I've added some bits in effort to complete the task, but so far all I can achieve is displaying the whole (or as much fits on the state) map on each state. I am able to pull the coordinates of where each map cutout should be, but I cannot figure out how to take that information and actually apply it to a polygon in the object.

 

Thank you in advance for your assistance. 

[GameMonetize]

Hello!

 

the best way for us to help you is to get a playground where you reproduce your code so we can work on it 

[JohnK]

Don't know how to solve your issue with PolygonMeshBuilder but matching irregular shapes with part of an image seemed an interesting idea and came up with this PG http://www.babylonjs-playground.com/#1TGOMH#2

[JohnK]

As usual I have just demonstrated how little I know. Could job I like learning things. PolygonMeshBuilder does everything I did previously but much simpler as demonstrated with the following PG http://www.babylonjs-playground.com/#1TGOMH#3

 

However what ever the scale of the polygon the image mapping uses the whole of the image as in this PG http://www.babylonjs-playground.com/#1TGOMH#4

 

So the problem is now to get the polygon to use a relevant area of the map not all of it.

 

For the polygon knowing the uv coordinates of two vertices on the image gives everything needed to match the image with the polygon. (one vertex if x and y scales are already known)

 

 

The image shown is 512 by 512 pixels. Matching with the polygon vertex array indices image vertex 0 is at  (256, 320) and image vertex 7 is at (320, 256).

For uv values the image size is taken as 1 unit in width and height, on this scale the coordinates of uv0 are (0.5, 0.625) and for uv7 are (0.625, 0.5).

 

Now the x and y scales for the image polygon to the mesh polygon can be calculated and hence the remaining coordinates of the image polygon.

 

xscale = (uv0x - uv7x)/poly_(vertex(0)x - poly_vertex(7)x) = (0.5 - 0.625)/(0 - 0.5) = 0.25

 

yscale = (uv0y - uv7y)/(poly_vertex(0)y - poly_vertex(7)y) = (0.625 - 0.5)/(1 - 0.5) = 0.25

 

Take one of the poly_vertices, say poly_vertex 7 and scale it scaled poly_vertex 7  becomes  (0.125, 0.125), then calculate the translation needed to move it to uv7,

uv7 - scaled poly_vertex 7 is (0.625 - 0.125, 0.5 - 0.125) is (0.5, 0.375)

 

This scaling and translation can now be applied to all the polygon vertex coordinates to give the uv values.

 

http://www.babylonjs-playground.com/#1TGOMH#5