Search code examples
three.jsimgur

three js, WebGLRenderer image quality drops on safari

Image quality is fine on chrome but when I run it on safari quality drops. It renders blurry as below.

safari quality and chrome quality

I checked three.js examples on safari, but the quality is fine, not blurred. And checked the their snippets as well. but couldn't find the difference/code block that effect quality on safari.

Having a caution log which is:

THREE.WebGLRenderer: Texture has been resized from (4000x2000) to (2048x1024).

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
scene = new THREE.Scene();

const geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale(-1, 1, 1);

const loader = new THREE.TextureLoader();
let texture = loader.load(src);

let material = new THREE.MeshBasicMaterial({map: texture});
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


renderer = new THREE.WebGLRenderer({
  preserveDrawingBuffer: true,
  // antialias: true,
  alpha: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.value.appendChild(renderer.domElement);

Additionally I tried {"high-performance": true} in THREE.WebGLRenderer but it didn't get any effect. Is there a way to fix blur/quality issue that occurs only in safari.

Solution

  • Safari does not yet support WebGL2. That means if you are loading a texture and don't change the default settings, mipmapping is going to be used for better texture filtering quality. However, the use of mipmapping requires POT textures in WebGL1. Hence, the renderer performs the texture resize which is logged in the browser console as a warning.

    It's probably best to just use linear filtering with Safari by doing this:

    texture.minFilter = THREE.LinearFilter;

    This will no trigger a resize. Or you are using a POT texture right from the beginning.