# Stretched textures **URL:** \ **Category:** Questions\ **Created:** [March 13, 2020, 8:17am UTC](https://forum.babylonjs.com/t/stretched-textures/9176 "2020-03-13T08:17:25Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![chris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris/32/7268_2.png) [@chris](https://forum.babylonjs.com/u/chris)\ **Post date:** [March 13, 2020, 8:17am UTC](https://forum.babylonjs.com/t/stretched-textures/9176/1 "2020-03-13T08:17:25Z")
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? ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/3/3ea6809bb81df689a49583b4f26f120b1eb3cf2e.jpeg) ---
**Author:** ![withADoveInOneHand](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/withadoveinonehand/32/1243_2.png) [@withADoveInOneHand](https://forum.babylonjs.com/u/withADoveInOneHand)\ **Post date:** [March 13, 2020, 8:21am UTC](https://forum.babylonjs.com/t/stretched-textures/9176/2 "2020-03-13T08:21:32Z")
May be a UV issue? ---
**Author:** ![chris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris/32/7268_2.png) [@chris](https://forum.babylonjs.com/u/chris)\ **Post date:** [March 13, 2020, 8:24am UTC](https://forum.babylonjs.com/t/stretched-textures/9176/3 "2020-03-13T08:24:00Z")
I tried adjusting the material’s UScale and VScale, but it seems to apply only on the top and left sides. ---
**Author:** ![withADoveInOneHand](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/withadoveinonehand/32/1243_2.png) [@withADoveInOneHand](https://forum.babylonjs.com/u/withADoveInOneHand)\ **Post date:** [March 13, 2020, 8:25am UTC](https://forum.babylonjs.com/t/stretched-textures/9176/4 "2020-03-13T08:25:04Z")
I think you have to provide uv values at the mesh level, per-vertex ---
**Author:** ![withADoveInOneHand](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/withadoveinonehand/32/1243_2.png) [@withADoveInOneHand](https://forum.babylonjs.com/u/withADoveInOneHand)\ **Post date:** [March 13, 2020, 8:26am UTC](https://forum.babylonjs.com/t/stretched-textures/9176/5 "2020-03-13T08:26:12Z")
No, per facet/tri ---
**Author:** ![chris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris/32/7268_2.png) [@chris](https://forum.babylonjs.com/u/chris)\ **Post date:** [March 13, 2020, 8:30am UTC](https://forum.babylonjs.com/t/stretched-textures/9176/6 "2020-03-13T08:30:44Z")
I can’t imagine how. 😅 I will research more. ---
**Author:** ![withADoveInOneHand](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/withadoveinonehand/32/1243_2.png) [@withADoveInOneHand](https://forum.babylonjs.com/u/withADoveInOneHand)\ **Post date:** [March 13, 2020, 8:33am UTC](https://forum.babylonjs.com/t/stretched-textures/9176/7 "2020-03-13T08:33:09Z")
Someone will know if you maybe have code ---
**Author:** ![Leonel\_Guido](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leonel_guido/32/4008_2.png) [@Leonel\_Guido](https://forum.babylonjs.com/u/Leonel_Guido)\ **Post date:** [March 13, 2020, 9:02am UTC](https://forum.babylonjs.com/t/stretched-textures/9176/8 "2020-03-13T09:02:47Z")
can you show us your uv map used? what format use .babylon? ah and software you use. ---
**Author:** ![chris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris/32/7268_2.png) [@chris](https://forum.babylonjs.com/u/chris)\ **Post date:** [March 13, 2020, 9:07am UTC](https://forum.babylonjs.com/t/stretched-textures/9176/9 "2020-03-13T09:07:35Z")
Sorry for the long wait. Here’s a portion of it: [https://playground.babylonjs.com/#FGMYP7#4](https://playground.babylonjs.com/#FGMYP7#4) The front sides does not look good at all. Is it because of the image file itself? ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [March 13, 2020, 1:14pm UTC](https://forum.babylonjs.com/t/stretched-textures/9176/10 "2020-03-13T13:14:24Z")
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. ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [March 13, 2020, 5:23pm UTC](https://forum.babylonjs.com/t/stretched-textures/9176/11 "2020-03-13T17:23:59Z")
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](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. ---
**Author:** ![chris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chris/32/7268_2.png) [@chris](https://forum.babylonjs.com/u/chris)\ **Post date:** [March 16, 2020, 3:10am UTC](https://forum.babylonjs.com/t/stretched-textures/9176/12 "2020-03-16T03:10:29Z")
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! ---
**Author:** ![withADoveInOneHand](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/withadoveinonehand/32/1243_2.png) [@withADoveInOneHand](https://forum.babylonjs.com/u/withADoveInOneHand)\ **Post date:** [March 16, 2020, 8:59am UTC](https://forum.babylonjs.com/t/stretched-textures/9176/13 "2020-03-16T08:59:17Z")
Maybe automate it ---
**Author:** ![Asdrubal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/asdrubal/32/36271_2.png) [@Asdrubal](https://forum.babylonjs.com/u/Asdrubal)\ **Post date:** [June 2, 2024, 7:14pm UTC](https://forum.babylonjs.com/t/stretched-textures/9176/14 "2024-06-02T19:14:49Z")
Mystical wood portal 😁 > **[Babylon.js Playground](https://playground.babylonjs.com/#FGMYP7%2311)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes