三.js 如何提高纹理质量

Posted 2023-02-27

【中文标题】三.js 如何提高纹理质量

【英文标题】：THREE.js How to increase texture quality

【发布时间】：2018-03-25 11:08:16

【问题描述】：

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

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

最好的质量 - 渲染大小 x2

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

质量差 - 没有过滤器

希望能帮到你，先谢谢了

【问题讨论】：

看起来你在“视网膜”屏幕上，因为在 x2 中粉碎渲染大小得到了改进。您是否尝试过在渲染器上使用 setPixelRatio 更高的值？

我的 pixelRatio = 1。我有默认的 1920x1080 屏幕：/

【参考方案1】：

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

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

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

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

所以你可以尝试做的是：

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

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

【讨论】：

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

我认为你无能为力。还认为这可能是您的硬件无法渲染“更好”。当你禁用过滤时，你应该有像素化纹理，是这样吗？

否，如果禁用过滤我有模糊的纹理，但如果我设置最近过滤器我有像素化纹理。默认情况下 THREE.js 用于纹理 minFilter = THREE.LinearMipMapLinearFilter，magFilter = THREE.LinearFilter。我可以相信硬件不能渲染“更好”，但是如果我创建了 x2 渲染大小，为什么我会得到很好的质量呢？但是现在我认为也没有办法做得更好:(

最近的过滤器~=过滤禁用...除了mipmap问题，我认为当你以双倍尺寸渲染时你会得到更好的质量，因为整个图像具有更好的分辨率（并且纹理以更好的分辨率采样）然后被浏览器动态缩小，整体效果最好，但这是一种“错觉”。

另外，我现在才想起来……确定你的画布'html'尺寸总是适合画布分辨率吗？因为这里有一个微妙之处：webglfundamentals.org/webgl/lessons/…