Optimisation Load Panorama

Questions
, , ,
1

Hello,

I created a system with three.js for 360-degree panoramic photo tours. My images are compressed and range from 5 to 20 MB. The loading time is quite long, and once the loading is finished, there is still some time needed to display the result (loading time = display time). So, to display a 10 MB image, it takes 5 seconds.

here a part of my code:

			camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
			camera.target = new THREE.Vector3( 0, 0, 0 );

			scene = new THREE.Scene();

			var geometry = new THREE.SphereGeometry( 50, 70, 70 );
			geometry.scale( - 1, 1, 1 );


			console.log("BEFORE");

			var textureLoader = new THREE.TextureLoader();

			var onProgress = function (xhr) {
				
			  if (xhr.lengthComputable) {
			    var percentComplete = (xhr.loaded / xhr.total) * 100;
			    console.log(percentComplete + '% loaded');
			  }
			};

			var material = new THREE.MeshBasicMaterial({
			  map: textureLoader.load(
			    'Image',
			    (txt)=>{
			    	txt.minFilter = THREE.LinearFilter;
			    	txt.generateMipmaps = false;
			    }, 
			    onProgress 
			  ),
			});

what is the best practice for optimisation.
Is using a sphere the best option for speed?

and for a transition beetween two pano, i used 2 sphere for have a animation .
it is good ?

thx

2

What are the resolution and file format of your images?

3

format: jpeg
reso: 12868 × 6434

size: 14,5mo

4

i would try *.webp and https://squoosh.app perhaps you can bring them down to 2-3mb.

5

for the moment i prefer stay in jpeg.
And using ‘THREE.SphereGeometry’ to create a panorama is the best solution?

6

I think the sphere geometry has little to do with the performance here — you could test with lower width/height segments, but I think your results will be the same.

The loading time is long because the file’s size on disk is 5–20 MB, and there’s an additional “time needed to display the result” because the compressed image must be decompressed and uploaded to the GPU. Decompressed size is almost entirely a function of the resolution, and in this case that’s about 450 MB per image:

uncompressedBytes ≅ 12868 x 6434 x 4 x 1.33

To reduce this time I think you’ll need to reduce file size, resolution, or both.

7

Ok, thanks for the explanations.

Because in 3D Vista, my image is much faster, and I know they use Three.js.
I know they use a tile system.
Is it possible to use a tile system with a sphere?

I haven’t been able to find a tile system that works with my code.