Understanding uOffset and vOffset (UV map)

[3Dlove]

Hello guys,

 

Here is the example : http://www.babylonjs-playground.com/#2H7BP8

 

I would like that the image texture begin at the corner of the mesh, currently it is center.

I thought that I need to set uOffset and vOffset but that doesn't change anything.

 

Tell me if I'm not understandable.

 

:-)

[jerome]

indeed, not easy to see with many trees

does it change ?

well, yes : http://www.babylonjs-playground.com/#2H7BP8#1

 

or :

http://www.babylonjs-playground.com/#2H7BP8#2

[3Dlove]

Yes, thank you

 

So we need to set UV offset before UV scale, and the value of UV offset are floats between 0 and 1 (don't care if it's 0.1 or 1.1), great.

 

Now, I would create a generic function for all sizes of picture and plane and keeping ratio.

For size and ratio, it's OK, but not for offset.

 

I would like that the picture begin at the left bottom corner of the plane.

 

here is the new example : http://www.babylonjs-playground.com/#2H7BP8#4

 

I put these values :

texture.uOffset = widthX / 16;texture.vOffset = heightY / (16/ratio);

but I'm not sure that is generic, and I don't know why the value is 16 in this case, because that doesn't work if I change width or height :/

 

Good appetit

[jerome]

I guess it depends on the size of the image used for the texture (or the size of the pattern you want to display from this image)

[3Dlove]

Is it possible to do to that by a generic way for any images ?

[RaananW]

you can do it with a small "hack" using u and vOffset - http://www.babylonjs-playground.com/#1X0VCX

[3Dlove]

Ok for U and V Offset, thanks guys.

 

But how to create a generic function for all plane sizes and all images sizes ? (keeping good ratio)

 

Here is my function :

function createUVTexture(imgPath, widthX, heightY, ratio, size, scene) {	// widthX : width of the plane (not the image)	// heightY : height of the plane (not the image)	// ratio : ratio between the height and the width of the image	// example : imageHeight = 256px, imageWidth = 1024px => ratio = 1/4	// size : good value for the width scale, number of repetitives images along the width	var texture = new BABYLON.Texture(imgPath, scene);	texture.uOffset = -widthX / ??;	texture.vOffset = heightY / ??;	texture.uScale =  widthX / size;	texture.vScale = heightY / (size * ratio);	return texture;}

How to choose the ?? values ?^^

[RaananW]

Hi,

 

I think you have a certain misunderstanding as to the meaning of uv texture coordinates in that case.

 

The value 1 in both scales means that the image will fit 1 time in this plane (vertically and horizontally). The image's ratio has nothing to do with it, it is being recalculated using texture coordinates which you don't control (in the case of a plane). So, the ratio between the image's height and width should not be used. it is "always" 1:1. (again, in this case. If you scale the plane this will change, but the meaning of "1" is still the same - it will fit 1 time vertically/horizontally).  So technically, width and height is also not the best definition.

 

If you want to fit your texture 2*3 times on this plane (ignoring the plane's scaling and original size) you can do that - http://www.babylonjs-playground.com/#2H7BP8#5