三个js、WebGLRenderer在safari上画质下降
three js, WebGLRenderer image quality drops on safari
图像质量在 chrome 上很好,但是当我 运行 它在 safari 上质量下降。它呈现如下模糊。
safari quality and chrome quality
我在 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 问题。
Safari 尚不支持 WebGL2。这意味着如果您正在加载纹理并且不更改默认设置,则将使用 mipmapping 来获得更好的纹理过滤质量。但是,使用 mipmapping 需要 WebGL1 中的 POT 纹理。因此,渲染器会执行纹理调整大小,这会作为警告记录在浏览器控制台中。
最好通过以下方式在 Safari 中使用线性过滤:
texture.minFilter = THREE.LinearFilter;
这不会触发调整大小。或者您从一开始就使用 POT 纹理。
图像质量在 chrome 上很好,但是当我 运行 它在 safari 上质量下降。它呈现如下模糊。
safari quality and chrome quality
我在 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 问题。
Safari 尚不支持 WebGL2。这意味着如果您正在加载纹理并且不更改默认设置,则将使用 mipmapping 来获得更好的纹理过滤质量。但是,使用 mipmapping 需要 WebGL1 中的 POT 纹理。因此,渲染器会执行纹理调整大小,这会作为警告记录在浏览器控制台中。
最好通过以下方式在 Safari 中使用线性过滤:
texture.minFilter = THREE.LinearFilter;
这不会触发调整大小。或者您从一开始就使用 POT 纹理。