Jump to content

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


Aushou
 Share

Recommended Posts

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. 

Link to comment
Share on other sites

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)

 

post-14282-0-53229700-1449330769.jpg

 

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

 

 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...