三个js、WebGLRenderer在safari上画质下降

Question

图像质量在 chrome 上很好，但是当我运行它在 safari 上质量下降。它呈现如下模糊。

我在 safari 上检查过 three.js examples，但质量很好，不模糊。并检查了他们的片段。但找不到影响 safari 质量的 difference/code 块。

有一个警告日志是：

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);

此外，我在 THREE.WebGLRenderer 中尝试了 {"high-performance": true}，但没有任何效果。有没有办法解决仅在 safari 中出现的 blur/quality 问题。

Answer 1

Safari 尚不支持 WebGL2。这意味着如果您正在加载纹理并且不更改默认设置，则将使用 mipmapping 来获得更好的纹理过滤质量。但是，使用 mipmapping 需要 WebGL1 中的 POT 纹理。因此，渲染器会执行纹理调整大小，这会作为警告记录在浏览器控制台中。

最好通过以下方式在 Safari 中使用线性过滤：

texture.minFilter = THREE.LinearFilter;

这不会触发调整大小。或者您从一开始就使用 POT 纹理。

三个js、WebGLRenderer在safari上画质下降

three js, WebGLRenderer image quality drops on safari

three.js

imgur