How to match texture Scaling/offset to UV coordinates

Question

Hello,

I need help matching a random Texture, that the player can select from his PC to specific UV coordinates on diffrent meshes. The main goal is to always have the texture match the highest vertex of the objects UV and still retain the correct aspect ratio of the orginial texture. Please can somebody tell me the mathematical relation between the materials scaling/tiling and the UV coordinates.

Here are 2 examples (with diffrent meshes/UVs), that show how i want to place the texture: The hight of the texture should always align with the y coordinate of the highest Vertex on the UV und the bottom left corner of the texture should stay at UV [0,0].

How do i calculate the correct x/y tiling and x/y offset for the material to achieve the goal described above. Hope somebody can help me. example 1 example 2

Answer 1

Answer by Bunny83 · 3 days ago

Well, this mainly depends on the used shader. However if it's one of the standard shaders it probably uses the "TRANSFORM_TEX" macro inside the shader which looks like this:

 #define TRANSFORM_TEX(tex,name) (tex.xy * name##_ST.xy + name##_ST.zw)

So the incoming uv coordinate "tex" is simply scaled (multiplied) by the texture scaling factor and then the offset is added. As you may know uv coordinates go from (0,0) (bottom left corner of the texture) to (1,1) (top right corner). Depending on the wrap mode if the UV exceed this range the wrap mode is applied. So the texture is either repeated or the last line of texels is used (clamp).

From your question it's not really clear what values in your setup can actually be changed. I guess the width of the quad? First keep in mind that as I just said, the origin in texture space is the bottom left corner. So any scaling of the UV happens around that point. If you want to scale around a different point, that's possible by simultaneously changing the offset accordingly.

Note a lot of what you said in your description does not make much sense to me. Like:

have the texture match the highest vertex of the objects UV

What does that mean? What does "highest" mean? Do you talk about the V component of a vertex inside texture space? Do you talk about the actual vertex position in local or world space?

So assuming your quad is always showing the full height of the texture (but the quad size in the world could change) you would simply apply this

 float textureAspect = (float)texture.width / texture.height;
 float xScale = quadXSize/(quadYSize*textureAspect);

This assumes the y scale of the texture / material is set to 1 then xScale would be the new x scale for the material. quadXSize and quadYsize are the actual worldspace dimensions of the quad.

This allows you to drag the "right edge" of the quad and the visible part should keep the aspect ratio. If you want to drag any edge you need to provide some kind of default scale. Also this would now also involve the actual position of the quad in relation to the reference position as well as the UV offset. This would be slightly more complicated and involves more variables. However there are simply too many things unknown about your setup. For example where is the origin of that quad that displays the texture? What is the known reference size? etc, etc...

Add comment · Show 2 · Share

Moritzfx · 2 days ago 0

Share

Thank your for your fast reply @Bunny83 ! Sorry for keeping some things unclear, I'll try to explain the setup and problem a bit better in this comment.

At the moment i am using the Lit shader provided by the URP, but i am planning on creating a Shader like the one that is described here.

So basically in the project you got different sizes of posters (which are planes) they come in portrait and landscape format. The mesh of the posters doesnt change its scaling, i only want to scale/ move the Texture on the mesh. The goal is that the player can pick a png from his PC, which then is placed on the poster. The left bottom corner of the texture should be at the origin of the UV[0,0] and the upper edge of the texture should align with the upper edge of the meshes UV shell, nevertheless the correct aspect ratio of the texture needs to be retained. In this Gif u can see an example of the functionality i want to achieve.

At the moment you can pick a png from your pc and it is displayed on the selected poster with the correct aspect ratio, but doesn't align like i explained above. The parameters that are changeable in my setup are the Materials tiling/offset (the player can change them with UI sliders). The Infos that i can access are the pngs width/height, the max y cords of the UV Shell (e.g in the 2nd screenshot max y= 0.6) and the dimensions of the mesh.

Bunny83 Moritzfx · 2 days ago 0

Share

Well, in the gif you showed you move around the texture inside the UV space but you said you ant the corner fixed. So is it just about placing the texture onto the mesh and have it fill the entire height but keep the aspect ratio? Or do you actually want to move it around and scale it?

If, as you said, the bottom left corner (0,0) should always be fixed and the top is also fixed, it's just a matter of setting the x-tiling to the proper scale as I said.

I just re-read your last paragraph where you said

the max y cords of the UV Shell (e.g in the 2nd screenshot max y= 0.6)

I'm not sure what you mean by that exactly. Usually when you have a quad mesh you would map that quad to the full texture, so the bottom left is (0,0), the top left is (0,1) the bottom right is (1,0) and the top right is (1,1). The tiling and the offset effectively changes those coordinates by scaling them and adding an offset. Why would you have a mesh where the UV changes in addition to the tiling / offset? If you change the UVs of the mesh, you shouldn't mess with the tiling / offset at all, just set the UV coords to the portion of the texture that should be visible on the mesh. Or if you want to use the tiling / offset, don't use odd UVs to begin with. It makes things just much more complicated.

Though keep in mind without a special shader or a texture that has a transparent border and the wrapmode is set to clamp, you would see that stretched border as you see in the screenshots of that forum post you've linked.

How to match texture Scaling/offset to UV coordinates

1 Reply

Your answer

Follow this Question

Related Questions