Hi all,
So I used the sample framemaker code and some PBR stuff for the wood texture. My question is: How come the top and left sides looks properly textured while the front side looks like stretched?
May be a UV issue?
I tried adjusting the material’s UScale and VScale, but it seems to apply only on the top and left sides.
I think you have to provide uv values at the mesh level, per-vertex
No, per facet/tri
I can’t imagine how. 
I will research more.
Someone will know if you maybe have code
can you show us your uv map used? what format use .babylon?
ah and software you use.
Sorry for the long wait. Here’s a portion of it:
https://playground.babylonjs.com/#FGMYP7#4
The front sides does not look good at all. Is it because of the image file itself?
It is all related to how you create UVs, as it looks procedural I am summoning @JohnK who is crazy good with geometry math and might be able to provide some guidance.
Yes it is all to do with the way the UVs are set. You can have some control over these settings but the changes will will happen on all sides of the frame and so improvements in one area may spoil other areas.
Take the bottom part of the front face of your example. Its width is 970 and from your profile its height is 180, so if you take its width to be 1 its height is 180 / 970. On creation of this bottom part its u values (width direction) go from 0 to 1 and also its v values (height direction) go from 0 to 1.
Your image is 626 × 541 pixels with the grain running across the width. This image is made to fit the bottom part, so 626 pixels are stretched to fit a width of 970 and 541 pixels into a height of 180. Stretching the image width wise makes little difference to the appearance of the grain lines. On the other hand the grain lines are compressed together into about 1/3 of the space altering their appearance. If the image is taken and 2/3 of it height removed then its size of 640 x 180 would be a better fit into the proportions of your bottom part of the frame.
The same sort of effect can be achieved by scaling the uv values. Leave the u values to be from 0 to 1, ie the full width of the image you only want 180 / 970 of the height of the image to be mapped onto the bottom part. This is achieved by altering the vScale of your texture see lines 107 to 109.
https://playground.babylonjs.com/#FGMYP7#8
Just altering the vScale to 0 to 180 / 970 ( about 1/5) means that only the bottom 1/5 of the image is mapped onto the bottom part of the mesh. You can take that 1 / 5 from any part of the image be changing the vOffset, ie a vOffset of 0.5 (1/2) means that the part of the image from 1/2 to (1/2 to 1/5) vertically is mapped onto the bottom part.
The construction of the mesh means that in the vertical parts the u and v values are swapped over. It also means, (since the frame is not square) that a side bar has a height to width ration of 1 : 180/ 1/1200 not 1: 180/ 970 but only one vScale can be used for the whole mesh. This also means that the edge ratio is also changed.
For more accurate proportioning on all sides and edges of the frame would mean that every vertex of the mesh would have to have individual uv values calculated.
4 Likes
It is clear now that I will have to do some UV scaling adjustments based on the images I use. I will have to do this for 50+ images! Hopefully most of them have the same dimensions.
Just a background of what I am trying to achieve here. I am trying to create a window customization app in ReactJS where customer can select window types,select the material, profiles, adjust sizes, create an image snapshot then send it to a Magento rest endpoint along with the other customization data.That kind. It looks like I still have a long way to go. But with Jedis around, I just skipped a light year!
Thank you very much guys!
Maybe automate it
Mystical wood portal 