How to reduce the resolution of a large image?

[KramRul]

Hi. I need a way of optimising the panoramas using “levels of detail” so that the full image isn’t loaded until the camera zooms in. I want to use images that are 16000x8000 pixels but I don’t want the full 100MB image to be loaded until zoom in. Is this possible?
The visualizer is based on this example:
https://codepen.io/b007/pen/oNgNxzz
Source scene: https://drive.google.com/file/d/1fjOb2-ILJNSheJttuAcCIAS5S5tw50iC/view?usp=sharing

[Fyrestar]

@KramRul

Is this possible?

Of course, but the most optimal approach isn’t as simple and requires work to do efficiently and with smooth transitions. A more simple solution would be using different sizes like 2-3 levels you load depending on the zoom level. But this approach is only acceptable for a texture that isn’t gigantic at the highest resolution, also a lot devices have a texture size limit of 4096.

[KramRul]

@Fyrestar You mean that initially a small image should be loaded and then at some zoom value the higher resolution texture is loaded? However, how in this case to achieve smoothness in the transition from one image to another, could you provide an example?

[mjurczyk]

@KramRul

how in this case to achieve smoothness in the transition

should help a bit, the case was different, but answering a similar problem

Load textures progressively

How would one go about creating a loading behaviour similar to how Sketchfab loads 3d models and textures dynamically. i.e. once the geometry is loaded, it is added to the scene… then the textures are streamed in increasing levels of resolution. Here’s an example loaded with sketchfab: [sketchfab loading] The same model loaded with three.js gltf loader looks like this: [three loading] You can see that the model is only displayed once all the loading has been finished. Is this simply a ma…

[KramRul]

Hi @Fyrestar. I have this image . I tried to generate mimaps for tham however it did not give the desired result.

const loader = new THREE.TextureLoader();
let texture = loader.load(
"http://localhost:4200/assets/data/scenes/galery/NY_West_Cam14.png"
);
texture.generateMipmaps = true;
texture.needsUpdate = true;
texture.minFilter = THREE.LinearMipMapLinearFilter;
texture.magFilter = THREE.LinearFilter;
this.material = new THREE.MeshBasicMaterial({ map: texture });
let mesh = new THREE.Mesh(geometry, this.material);
this.scene.add(mesh);

Uploading this image takes quite a long time, is there any way to improve it?
Sometimes I see an information message in the console “THREE.WebGLRenderer: Texture has been resized from (16000x8000) to (8192x4096)”. Is there a way to manually set the size for texture?

[Fyrestar]

Mipmaps are generated by default and do not really relate to this, ideally your zoom steps are organized so that you can disable mipmaps.

@KramRul

Sometimes I see an information message in the console “THREE.WebGLRenderer: Texture has been resized from (16000x8000) to (8192x4096)”. Is there a way to manually set the size for texture?

This happens as your texture is not provided in a power of 2 size, what is costly taking up most of the time and should be avoided (always provide images in a PO2 format). You will have to implement the different zoom levels and loading on demand yourself, you can also open a job offer.

@KramRul

Is there a way to manually set the size for texture?

As you want to avoid loading the highest resolution first there shouldn’t be any resizing required to do, the images should be loaded after each other, if there is no zoom action happening higher resolutions wouldn’t have to be loaded.

Ideally you will start loading a higher resolution depending on multiple factors such as the connection (being more careful on limited mobile data), on intentions (such as starting to zoom) and on the actual file sizes. Preprocessing the files should be done anyway, asides of generating the LOD levels in proper PO2 format also compressing them equally in the most suited format.