THREE.js 如何提高纹理质量

Question

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

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

最佳质量 - 渲染尺寸 x2


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


质量差 - 没有过滤器


我希望得到任何帮助，提前致谢

Answer 1

几乎没有比使用 16x 各向异性过滤的三线性过滤做得更好的了(并非所有硬件都可以实现 16x 各向异性过滤)。

然而，你说你的纹理是 512x512，而(如果你的快照是真实大小)它看起来很清楚:

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

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

所以你可以尝试做的是:

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

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