Downscale external image to fit in a small mesh

Questions
1

Hello,

I will be loading different images of different resolutions (1080p+ , same aspect ratio tho) and applying to a square mesh (only one face), the issue that I’m facing is this:
image

As it’s a small object, the image looks pixelated the far the camera goes.

I thought about downscaling the texture, but I haven’t found how.

var textureImage = new BABYLON.Texture("https://bafybeidw6272f4lflk5jmn5cxw3nr6tlsar2fm4y73aimcz4axajx64l7m.ipfs.infura-ipfs.io/", scene);
        var pbr = new BABYLON.PBRMaterial("", scene);
        pbr.baseColor = new BABYLON.Color3(1.0, 0.766, 0.336);
        pbr.metallic = 0;
        pbr.roughness = 1.0;
        pbr.albedoTexture = textureImage;
        pbr.albedoTexture.anisotropicFilteringLevel = 8
        pbr.albedoTexture.LINEAR_LINEAR_MIPLINEAR ;
        pbr.backFaceCulling = false;

Some images can look even more worse if has thick black lines inside.

2

You can downscale an image using an externally-created canvas (something like this - HTML5 Resize Image in Canvas)
If I can ask - what properties will you be using? if you always downscale an image, wouldn’t it be better to downscale on the server and provide the downscaled image instead?

1 Like
3

The user will provide the link of the image, and I know those will have high res, so I won’t be the one serving the files sadly.

About the resize in canvas, seems interesting, right now I’m changing the mesh texture to a texture containing the image link, could you give me a north direction on how would I change that to write that canvas to the texture?

Also, thanks for the sugestion

1 Like
4

Many different ways :slight_smile:

The most straightforward would be to get the image as a base64 data url and pass it to a regular texture. This will probably provide the best performance in the long run, as you only update the canvas once and dispose of it.

canvas.getDataURL - https://developer.mozilla.org/en-Uthe function is S/docs/Web/API/HTMLCanvasElement/toDataURL). once you get the string, use it as the URL (instead of the one you are getting from the user)

2 Likes
5

Awesome, I think I got the idea, thank you!

2 Likes