旋转相机时重复的纹理严重扭曲/晃动

Question

编辑 1 开始

原始帖子的行为仅适用于 Windows XP 和 Windows 7、浏览器 Firefox 和 Chrome。在 Ubuntu 上，不存在这种失真，而是在旋转相机时纹理“抖动”。当旋转停止时，晃动就会停止，但纹理可能不会处于完全正确的位置。

编辑 1 结束

编辑 3 开始

该程序已在 4 台不同的计算机上进行了测试，但未在其中任何一台上按预期运行。

编辑 3 端

我在 WebGL 中有一个大体素，我想用平铺纹理覆盖它，每个图块在顶点空间中的边长为 1。在此测试场景中，相机指向负 z 方向，体素的侧面位于 xy、xz、yz 平面中。

较小的体素（即较少的重复）效果很好，但在每个面大约 2000 个 x 和 y 重复（即体素大小 200020002000）时，纹理开始看起来非常难看。当相机垂直指向脸部时，无论重复的大小/数量如何，纹理看起来都是正确的，但对于上述大小的体素，即使是几度的旋转也会导致明显的问题。增加体素大小会增加失真。反之亦然：对于小体素，无论相机如何旋转，纹理看起来都是正确的。在我看来，尺寸没有硬性阈值，但当体素的尺寸从每边约 2000 增加时，效果开始从零逐渐增加。

请参阅此可视化：

第一个图像应该是这样的，但是当旋转相机时，线条开始像第二个图像一样扭曲。通过增加体素大小和更多地旋转相机，效果会变得更糟。

其中包含两个具有更严重影响的附加图像：

纹理（每个纹理一个 X）最初为 512*512 像素。屏幕截图没有以任何方式缩放。

我的第一个猜测是浮点不准确，但这很难相信，因为该对象只有 1000 量级的尺寸。

我的第二个猜测是某种奇怪的 int/float 舍入错误，但由于所有内容总是以浮点数处理，所以我不明白这是怎么发生的。

我能想到的第三种可能性是，这是不可能的，并且纹理不应该重复很​​多次。然而，在我看来，这似乎不太可能。我的猜测（也是希望）是存在某种非常基本的问题。

关于什么可能导致或通常导致这种事情有什么建议吗？

我正在使用：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.generateMipmap(gl.TEXTURE_2D);

在着色器中：

#ifdef GL_ES
precision highp float;
#endif

我还执行了一些非常基本的计算：对于 32 位浮点数，最大有效数约为 840 万。对于体素边长 2000（我注意到这是效果可见的水平），人们可以天真地期望坐标中的浮点舍入误差约为 0.00025。假设每次重复在屏幕上占用大约 100 个像素，则误差应明显小于 1 个像素，但事实并非如此。除非我上面的计算错误，否则我认为 Float32 不应该受到指责，原因一定是在其他地方。

线条纹理仅用于可视化问题。其他（更自然的）类型的纹理也存在这个问题。

编辑 2 开始

启用或禁用抗锯齿功能没有明显差异

编辑 2 结束

Answer 1

我相信你所看到的可能确实是由精度造成的。您正确地计算出浮点坐标应该足够漂亮，问题是硬件不使用浮点来查找纹理。纹理插值器单元的精度确实相当低（不知道现在怎么样，但在较旧的 GeForce 卡上它曾经低至 16 位）。

那么……如何才能超越插值器精度呢？通过在大型几何体上使用大型纹理坐标（许多重复），这正是您正在做的事情。补救？使用较小的纹理坐标细分几何体（您可以以整数步长移动纹理坐标，使它们更接近 0）。

这是一个屏幕截图，显示了它的极端情况（我无法重现该错误在我的 GeForce 260 上，但在我的 Tegra 2 平板电脑上清晰可见，如下图所示）。

Answer 2

我在iOS下也遇到了类似的问题。重复纹理 127 次后，糟糕的事情开始发生。

有效的解决方案是这样的：

我使用了 GL_TRIANGLE_STRIP 和一些退化三角形。纹理与顶点对齐，因此在纹理的边缘有一个不可见（退化）三角形，当我将纹理坐标设置为原点时，纹理将“显示”镜像。因此，下一个可见三角形显示来自坐标(0.0, 0.0)的纹理，并且它永远不会超过坐标(x, 127.0)。

有一篇博客文章用一些例子和图片解释这一点。