THREE.js如何提高纹理质量

Question

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

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

最佳品质 - 渲染尺寸x2

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

质量差 - 没有过滤器

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

Answer 1

你几乎不可能比使用16x各向异性的三线性滤波更好（并非所有硬件都可以实现16x各向异性过滤）。

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

• 它们的渲染方式比512x512小。这意味着目前这是一个较低的mipmap级别，用于渲染你的cardes，一个由WebGL生成的mipmap。

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

所以你可以尝试做的是：

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

• 将网格纹理坐标调整到纹理，反之亦然，以避免在纹理采样期间更改宽高比。