WebGL – 拉伸两个纹理的非幂或添加填充

Question

我使用不同大小和纵横比的图像，通过 Three.js / A-Frame 中的 CMS 上传。当然，这些不是两种纹理的力量。似乎我有两种处理它们的选择。

第一个是拉伸图像，就像在 Three.JS 中所做的那样——在应用于平面时取消转换。

第二个是由于自定义 UV 添加额外的像素（不显示）。

一种方法会比另一种更好吗？根据图像质量，我想最好不要进行任何拉伸。

编辑：

对于那些感兴趣的人，我无法发现这两种方法之间的区别。这是更改 UV 以切断未使用的纹理填充的代码：

var uvX = 1;
var uvY = 0;

if(this.orientation === 'portrait') {
  uvX = (1.0 / (this.data.textureWidth / this.data.imageWidth));
} else {
  uvY = 1.0 - (this.data.imageHeight / this.data.textureHeight);
}

var uvs = new Float32Array( [
  0, uvY,
  uvX, uvY,
  uvX, 1,
  0, 1
]);

编辑2：

我没有正确设置纹理。 并排，未拉伸（填充）的图像在近距离看起来确实更好 - 但差别不大：

Left: Stretched to fit the power of two texture. Right: Non-stretched with padding

Answer 1

自定义 UV 可能有点麻烦（尤其是当用户可以修改纹理时），并且在重复纹理时填充可能会破坏平铺（除非特别注意）。

只需拉伸图像（或让 Three.js 为您完成）。无论如何，这就是大多数引擎（如 Unity）所做的。如果拉伸算法和纹素采样不是 100% 匹配，可能会有一点视觉退化，但没关系。

一般的想法是，如果您的用户 - 真的 - 关心该级别的采样质量，他们无论如何都会仔细手工制作 POT 纹理。通常，他们只想将纹理图像扔给他们的模型并让它们看起来正确......他们会的。