Avatar shirt design is artificial not natural

Hi,

I am able to apply fabric designs to the shirt. But if i upload a design with low quality, the shirt
is getting squeezed and it is looking very artificial.
can somebody suggest how to improve the image quality using javascript framework
or some indicator that image quality is very low.

https://playground.babylonjs.com/#JHRF6T#9
Pls suggest the way forward

Thanks
vijay

Hi!
Is the mesh correctly unwrapped? This seems to be a classic UV stretching problem caused by incorrect unwrapping.

am not sure if it is correctly unwrapped or not
or else can we apply the same design texture to some other avatar and check the quality of image

I tried from my side on other avatar same problem am facing

Thanks
vijay

Maybe I am not getting correctly what’s exactly the problem is here. What do you mean by quality of the image? I thought you are not satisfied with the stretched flowers on the shirt :slight_smile:

1 Like

I think @vijay_krishna is talking about resolution, correct? You don’t want to see any blurriness in the images for the textures, like this example with a 1k texture:

For texture quality, I think you could look into the sampling modes: Texture | Babylon.js Documentation (babylonjs.com) Sampling Textures - VFXDoc

Also, if the possible textures are just patterns, you could just repeat the same image by increasing the U and V scale:

@PatrickRyan also might have some guidelines about texture quality improvements.

2 Likes

@ carolhmj you are right, i was looking for natural look without any blurriness or squeezing the shirt texture.

Is there any way i can get some score if the quality of texture/image is not upto mark. I know i sound crazy but just putting my thoughts.

No worries, you don’t sound crazy at all, that’s a pretty interesting problem! I don’t know a ton about assessing the quality of a texture for a scene - besides Patrick, maybe @PirateJC will know something more about this. One thing I know it’s usually better to have the dimensions of your texture as powers of two - so 2, 4, 8, …, 256, 512, etc. And that, of course, the higher resolution, the better - maybe you can define a “minimum” resolution, let’s say, 512, and upscale any image that has a lower resolution than that with some kind of algorithm: Comparison gallery of image scaling algorithms - Wikipedia

But let’s wait to see what Patrick and Jason have to say :smiley:

1 Like

Like this? GitHub - thekevinscott/UpscalerJS: Image Upscaling in Javascript. Increase image resolution up to 4x using Tensorflow.js.

1 Like

Hey @vijay_krishna,

Unfortunately if your source material (image texture) is low resolution to begin with, there’s not a whole lot that can EASILY be done to get it to look good.

Up-ressing textures is an entire area of study in computer science that would require some deeper knowledge and expertise to get into.

There will always be a correlation between 3 things to get good looking “textures.”

  1. How the UVs are laid out in the mesh.
  2. How close the camera gets to the mesh relative to how the UV’s are laid out.
  3. The resolution needed in your source image texture.

Unfortunately there’s no specific science to this, it’s an artform of balancing between all 3 of these things based on the specific needs of your user base.

Hope that makes some sense.

3 Likes

Enhance

6 Likes

giphy

3 Likes