Jump to content

Understanding uOffset and vOffset (UV map)


Recommended Posts

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

Link to comment
Share on other sites

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 ?^^

Link to comment
Share on other sites



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

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.

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.


  • Recently Browsing   0 members

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