Based on image height/width how to adjust UV scale values

Hi,

We are trying to get image size of the texture so that we can adjust the UV scale parameters accordingly, we referred to thread made the changes accordingly using onLoadObservable but its not working…

can somebody throw some light here…

Thanks
vijay

You need to check whether texture.isReady(), because if it’s true, it means the texture is already loaded:

Thanks @Evgeni_Popov for quick support

I tried by changing the uvscale values but its not getting applied using diffuseTexture or albedoTexture.

You don’t need to create a material to simply load a texture:

got it @Evgeni_Popov … i need yur guidance here…

In my case we are uploading images dynamically(png or jpg) we need to adjust UV values accordingly.
Currently based on image size we are adjusting UV scale values , pls suggest is there any better approach to accomplish this

we are trying to avoid shades on the fabric which is because of inappropriate UV values set dynamically

This won’t work in the general case:

filesize= (texture.getInternalTexture().width * texture.getInternalTexture().height)/1024000;

if(filesize>4) {
  texture.uScale=2;
  texture.vScale=2;
} else {
  texture.uScale=5;
  texture.vScale=5;
}

The need for u/v scaling will depend on what the texture represents. In some cases a 256x256 texture would have to be scaled (4,4) and in other cases (1,1) would be ok.

I don’t see a way to automatically calculate u/v scales…

What do you mean by this? Would you have an example of bad rendering / good rendering after setting u/v scales?

Thanks @Evgeni_Popov for yur efforts
The shaded line on the avatar is based on inconsistent UV scale values

Capture23

in our case the image texture can be of any size/shape, what is the approach to set the UV scale values based texture size ?

The problem isn’t related to the u/v scale values, it’s because your texture doesn’t tile correctly:

You can’t solve this problem by using specific values of (u,v), it can only work for u=v=1 (or < 1) for such textures.

I think there are algorithms for turning a non-tileable texture into a tileable one, but I don’t know what they are… cc @PatrickRyan in case he has any pointers.

3 Likes

@vijay_krishna, there are several ways to take a non-tiling texture and convert it to make it tile. However, not all of them are automated, and you will likely need some manual input on them as the more automated options use techniques that can really distort the image while making it tile.

Manual Tile
This involves your favorite image editor and some offset/cloning. With your sample texture, you will have a bit of difficulty as there is lighting information in the image. The textile is lighter in the upper left than in the lower right due to where the light was placed when photographing. This means more repair work or the dark spots on the image will be obvious when tiling, even if not creating a hard seam.

First, offset your image so that you can see the seams that will not tile:

Then using a clone brush or a healing brush, paint out the seams sampling from other areas of the image:

With an image like this one, there will be a lot of work as the color is very different along the seam edges and you have to deal with a thread pattern that makes a visible grid, so any misalignment of the grid will cause the visual artifacts you are seeing above. You can also do tricks like duplicate the image onto a new layer, rotate 180 degrees, and then add a gradient mask to blend the layers removing the dark areas of the image:

Now when you offset the image, the seams are much less visible and easier to clone out, but you will need to worry about the grid made by the threads. Doing this well manually can be a lot of work and you will likely want someone who has done this work frequently to save time on the process:

Automatic
There are tools out there to make an image tile for you, but they usually involve rotating subsections of the image and then blending them together. For a texture that has no geometric pattern in it like rock or bark, this can work very well. This is running your texture through Substance Designer using their Make it Tile node:

Again, you will note some of the artifacts of blending the tiles together which feel like a blurring of the threads when transitioning between tiles. You can work with the parameters to minimize this, but again, this task needs human interaction to make decisions about what parameters retain the quality of the textile while making it a tiling pattern.

From Library
If you aren’t trying to match an exact textile from a brant, but rather need a tiling texture that implies the kind of textile you want, there are a lot of libraries that sell tiling textures that represent different textiles like Adobe’s Substance 3D Assets.

From Scratch
While you can use texture packages like Substance Designer to make these textile patterns from scratch that are set up to tile, that will require some deep knowledge of material creation in a texturing package. You can, however, copy an existing textile with some pretty common items that will give you a high-quality PBR texture set that can be set up to tile. There is a great article on using your phone as a material scanner that utilizes Substance Designer which can get you past a lot of the hurdles of manual creation.

These ideas may not be the paths you are looking for if you don’t want any manual steps with your textures. However, you will need to source tiling textures as there isn’t a good completely automated path for making a texture tile yet. There is a lot of interest in using AI image generation to make an image tile, but I haven’t seen anything hit industry tools just yet. It’s probably not far off, but not here yet.

3 Likes

Thanks @PatrickRyan for the detailed insight
am looking for automated way of tiling the image, as u said i need to find external api/package for image tiling
Thanks a ton @PatrickRyan @Evgeni_Popov for your help

1 Like