在 Three.js 材料中使用矩形纹理与方形纹理的性能权衡？特别是 .basis 纹理答案

【问题标题】：Performance trade off of using a rectangular shaped texture vs. square shaped texture in Three.js material? Specifically a .basis texture在 Three.js 材料中使用矩形纹理与方形纹理的性能权衡？特别是 .basis 纹理
【发布时间】：2020-12-01 06:31:19
【问题描述】：

我想知道使用 128x512 纹理与 512x512 纹理之间的权衡是什么。

纹理是一个滑板甲板（自然是矩形），所以我最初使纹理具有使甲板正确显示的纵横比。

我想使用 .basis 纹理并阅读“转码到 PVRTC1（适用于 iOS）需要 square 二次幂纹理。”在Three.js BasisTextureLoader documentation。

所以我试图权衡使用 128x512 作为 JPG 或 PNG 与 512x512 基础纹理之间的加载时间 + 性能权衡。

我最好的猜测是 128x512 会占用更少的内存，因为更少的纹素，但我也读到 GPU 喜欢方形纹理，并且基础更加 GPU 优化，所以我在选择哪条路线之间犹豫不决。

任何有关这两个选项之间性能权衡的知识都将受到高度赞赏，尤其是对基本纹理的一般好处的解释。

【问题讨论】：

"我还读到 GPU 喜欢方形纹理" 需要引用
我猜这是一个旧范式，但gamedev.net/forums/topic/404768-square-vs-rectangular-textures。此外，PVRTC1（适用于 iOS）需要一个正方形
在您引用的问题中，许多用户似乎没有意识到问题是关于矩形形状的 POT 纹理，而不是“rectangle texture”的 D3D/OpenGL 概念”。大多数答案都属于后者，而不是前者。
哦，我明白了。感谢您告诉我 - 我已编辑此标题以使其更清晰
@gman “基础纹理”是newer method of texture compression，比 JPG 或 PNG 更高效。

标签： three.js gpu textures

【解决方案1】：

当您要求 texture's .minFilter 执行 mip-mapping 时，Three.js 只需要二次幂纹理。在这种情况下，GPU 将使several copies of the texture 的分辨率只有前一个（512、256、128、64 等）的一半，这就是它要求二的幂的原因。默认值确实执行 mip-mapping，您可以在“缩小过滤器”下看到替代 .minFilter 值 in this page。 Nearest 和 Linear 不需要 P.O.T.纹理，但是当纹理按比例缩小时，您会得到像素化伪影。

在 WebGL 中，您可以毫无问题地使用 512x128，因为这两个尺寸都是二次方。性能权衡是您保存了一堆无论如何都会被拉伸重复的像素。

【讨论】：

我对 mip 贴图不是很熟悉，但您说默认值确实会创建 mip 贴图。有什么办法可以看到那些在行动吗？换句话说，我是否能够检查在特定帧期间在特定网格上使用了哪个 mip 贴图？ GPU 是否会根据与相机的距离、网格在画布上占用的像素空间或其他因素来切换它正在使用的 mip 贴图？
我相信 GPU 会在使用适当的 minFilter 标志将纹理上传到 GPU 时自动生成 mipmap。然后它决定在片段着色器中通过texture2D() 对纹理进行采样时使用哪个mip 级别。您无法真正检查每个网格正在使用哪个 mip 级别； think of a complex mesh，靠近相机的部分将采样较大的 mip 级别，而较远的部分将在同一 drawcall 中采样较小的部分。有时它甚至可能对同一像素使用两个级别的混合。
再想一想，如果you create your own .mipmaps array，您可以检查每个片段使用哪个mip级别并将其附加到纹理。您可以为每个级别使用不同的颜色，以便可视化哪个像素正在采样。