360 panorama image quality problem in three

Hey everyone!

We implement panorama 360 in our project. We load 9000x4500px textures (360 image). The problem appears on some resolutions, e.g. on 1920x1080, it is quite legible (in adjust zoom 75%), when we zoom to 100/125%, we start to pixelose.

Good quality on adjust zoom https://i.stack.imgur.com/zvOxZ.jpg
Broken https://i.stack.imgur.com/Gohuj.png

The biggest problem appears at the resolutions of 1536x864 (125% adjust zoom) and 1280x800 then the image is practically blurry.

If I use a panorama viewer, the image behaves very well and these problems do not occur.

I will just add that I have a few points on the panorama that are clicked and some information pops up.

We used react-three-fiber

Our code

function Dome() {
  const texture = new THREE.TextureLoader().load(
    "../models/innerOkaglak-v4.jpg"
  );
  texture.mapping = EquirectangularReflectionMapping;
  texture.encoding = sRGBEncoding;
  texture.generateMipmaps = false;
  texture.minFilter = LinearMipMapLinearFilter;

  return (
    <mesh>
      <sphereBufferGeometry attach="geometry" args={[500, 60, 30]} />
      <meshBasicMaterial
        attach="material"
        map={texture}
        side={THREE.BackSide}
      />
    </mesh>
  );
}

I’m afraid this setup does not really make sense. When using LinearMipMapLinearFilter you normally want generateMipmaps to be true since mipmaps are required for this type of texture filtering method. I suggest you remove both lines and just use the default values.

The only use case for setting generateMipmaps to false is when mipmaps are loaded/generated manually which does not seem to be relevant for your use case.

1 Like

/cc

We’ll post it in an hour with the developer and let you know if anything improved. Thanks Mugen87 for the catch. I also asked on the stack.

@Mugen87 A message from my developer

I believe the real problem is when the user is using zoom in the browser (cmd/ctrl and +). The panorama texture become blurry and it’s also blurry for lower resolutions. Can we do something with it using three.js? I think this example has the same issue. https://codepen.io/b007/full/oNgNxzz

renderstuff.com example is always sharp when zooming and lowering the resolution.

Maybe the problem is that our texture is super high quality (8k) we’ve tried lower it to 4k but it doesn’t help.

Related and likely instructive: Are 8k textures supported in three.js?

1 Like

When testing the pano viewer of renderstuff with the below image, it also becomes unsharp when zooming in. TBH, I don’t see a noticeable difference compared to webgl_panorama_equirectangular. Can you please clarify with two screenshots the issue? Please make one with renderstuff, the other one with three.js and then highlight the differences.