三.js 如何提高纹理质量

Question

在 THREE.js 中提高纹理质量的可能和好的方法/最佳实践/等是什么？

我有一个场景，我有 512x512px 纹理的飞机（卡片）。您可以在下面的图片中看到它的外观。我的问题是纹理看起来很模糊。我试图改变过滤器和各向异性的值，它有帮助，但只是一点点，纹理仍然模糊。当纹理看起来像我想要的那样时，我发现的唯一一种方法是增加渲染大小 x2 并保持画布大小相同。由于性能问题，这是一种不好的方法，但我没有找到另一种获得良好纹理质量的方法。

最好的质量 - 渲染大小 x2

正常质量 - magFilter = minFilter = THREE.LinearMipMapLinearFilter /anisotropy = 16

质量差 - 没有过滤器

希望能帮到你，先谢谢了

Answer 1

几乎没有比使用 16 倍各向异性的三线性过滤更好的方法（而且并非所有硬件都可以实现 16 倍各向异性过滤）。

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

• 它们的渲染尺寸小于 512x512。这意味着这是当前用于渲染卡片的较低级别的 mipmap，由 WebGL 生成的 mipmap。

• 你的卡片是长方形的，而你的纹理是正方形的。根据您在形状上映射纹理的方式，这可能意味着纵横比发生变化，因此采样器需要进行更多插值（因此过滤，意味着更多模糊）

所以你可以尝试做的是：

• 使用较小的基础纹理，例如 256x256，这是您自己使用的最佳清晰度，因此在 WebGL 对纹理进行采样时不需要最小过滤器。

• 使网格纹理坐标适应您的纹理，反之亦然，以避免在纹理采样期间更改纵横比。