三个 js，WebGLRenderer 图像质量在 safari 上下降答案

【问题标题】：three js, WebGLRenderer image quality drops on safari三个 js，WebGLRenderer 图像质量在 safari 上下降
【发布时间】：2021-08-11 04:12:23
【问题描述】：

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

safari quality 和 chrome quality

我在 safari 上检查了three.js examples，但质量很好，没有模糊。并检查了他们的sn-ps。但找不到影响 safari 质量的差异/代码块。

有一个警告日志是：

THREE.WebGLRenderer：纹理已从 (4000x2000) 调整为 (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 中出现的模糊/质量问题。

【问题讨论】：

标签： three.js imgur

【解决方案1】：

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

这样做可能最好只在 Safari 中使用线性过滤：

texture.minFilter = THREE.LinearFilter;

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

【讨论】：