THREE.js 如何提高纹理质量

Question

有哪些可能的好方法/最佳实践等可以在THREE.js中提高纹理质量？

我有一个场景，其中有512x512像素纹理的平面（卡片）。您可以在下面的图像中看到它的样子。我的问题是纹理看起来模糊。我尝试更改过滤器和各向异性的值，这有所帮助，但只是一点点，纹理仍然模糊。我发现唯一一种使纹理看起来像我想要的方式是将渲染大小增加两倍，并保持画布大小不变。由于性能问题，这是不好的方式，但我找不到其他获得良好纹理质量的方法。

最佳质量- 渲染大小x2 普通质量- magFilter = minFilter = THREE.LinearMipMapLinearFilter /anisotropy = 16 差质量- 没有过滤器 希望得到任何帮助，提前感谢。

- Sergey Sychevskiy

---

看起来你正在使用“Retina”屏幕，因为将渲染大小压缩至x2有所改善。你尝试过在渲染器上使用更高的setPixelRatio值吗？ - Radio

我的像素比率为1。我有默认的1920x1080屏幕 :/ - Sergey Sychevskiy

Answer 1

使用三线性过滤和16倍各向异性过滤可以获得最好的效果（但并非所有硬件都支持16倍各向异性过滤）。

然而，你说你的纹理是512x512，但是（如果快照是真实大小），很明显：

• 它们被渲染得比512x512小得多。这意味着当前正在使用比卡片更低级别的mipmap来渲染您的卡片，这是由WebGL生成的mipmap。

• 您的卡片是矩形的，而您的纹理是方形的。根据您如何在形状上映射纹理，这可能意味着长宽比发生了改变，因此采样器需要进行一些额外的插值（因此需要更多模糊）

所以你可以尝试做到以下几点：

• 使用较小的基本纹理，例如256x256，自己完成最佳清晰度，因此WebGL在对纹理进行采样时不需要进行min-filter处理。

• 调整网格纹理坐标以适应您的纹理或反之亦然，以避免在纹理采样过程中出现长宽比变化。

- user1501157

---

我尝试禁用mipmap/使用256x256纹理，但没有帮助。在我的场景中，我还尝试创建一个256x256的平面，并在其上放置256x256的纹理，但纹理看起来也很模糊:( - Sergey Sychevskiy

不，如果禁用过滤，则我的纹理会模糊，但如果我设置最近的过滤器，则我的纹理会呈像素化状态。默认情况下，THREE.js的纹理minFilter = THREE.LinearMipMapLinearFilter，magFilter = THREE.LinearFilter。 我可以相信硬件无法渲染“更好”，但为什么如果我创建了x2渲染大小，我会获得良好的质量？ 然而，现在我认为也没有更好的方法来做到这一点 :( - Sergey Sychevskiy

最近过滤器 ~= 过滤禁用... 除了mipmap问题，我认为当您以双倍大小渲染时，您会获得更好的质量，因为整个图像具有更好的分辨率（并且纹理以更高的分辨率进行采样），然后由浏览器动态缩小，这会产生一个总体上更好的结果，但这是一种“幻觉”。 - user1501157

另外，我现在才想到......你确定你的画布“html”大小总是适合画布分辨率吗？因为这里有一个微妙之处：https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html - user1501157

嗯，我不知道。尝试几种纹理大小，改变相机角度来验证纹理何时更模糊或更清晰...这就是我能给出的建议。 - user1501157