Question

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

第一种是拉伸图像，就像在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纹理。通常，他们只是想在他们的模型上投射纹理图像并让它们看起来正确......他们会。

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

1 个答案: