THREE.js如何提高纹理质量

Question

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

我有一个场景,我有512x512px纹理的飞机(卡).它看起来如何在下面的图像上看到.我的问题是纹理看起来很模糊.我试图改变滤波器和各向异性的值,它有所帮助,但只是一点点,纹理仍然模糊.纹理看起来像我想要的唯一一种方法 - 增加渲染大小x2并保持画布大小相同.由于性能问题,这是不好的方法,但我找不到另一种方法来获得良好的纹理质量.

最好的质量 - 渲染大小x2

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

质量差 - 没有过滤器

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

Answer 1

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

但是，您说您的纹理是 512x512，而（如果您的快照是真实尺寸）则很明显：

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

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

所以你可以尝试做的是：

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

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