javascript - 旋转相机时重复纹理严重扭曲/抖动

Question

我最初在 gamedev 上问过这个问题，但没有一个答案有助于解决问题，我仍然不知道真正的原因是什么。我在常见问题解答中没有看到任何关于在 SE 中重新发布问题的内容，所以我只能希望这没问题。此外，回想起来，这个问题可能更多地与图形编程有关，而不仅仅是游戏开发。

编辑 1 开始

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

编辑 1 结束

编辑 3 开始

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

编辑 3 端

我在 WebGL 中有一个大体素，我想用平铺纹理覆盖它，每个平铺在顶点空间中的边长为 1。在这个测试场景中，相机指向负 z 方向，体素的边在 x-y、x-z、y-z 平面中。

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

见 http://imgur.com/a/spQIv用于可视化。第一张图片应该是这样的，但是当相机旋转时，线条开始变得像第二张图片一样扭曲。通过增加体素大小和更多地旋转相机，效果会变得更糟。 http://imgur.com/a/wRndy包含两个效果更严重的附加图像。

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

我的第一个猜测是 float 不准确，但这很难相信，因为该物体的尺寸只有 1000 的数量级。

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

我能想到的第三种可能性是这是不可能的，纹理不应该重复那么多次。然而，这似乎不太可能 IMO。我的猜测(和希望)是存在某种非常基本的问题。

关于什么可能导致或通常确实导致这种事情的任何建议都非常感谢，因为我似乎很难自己缩小这个问题的来源。

我正在使用:

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)。

这是一个 screenshot它看起来有多极端(我无法在我的 GeForce 260 上重现该错误，但它在我的 Tegra 2 平板电脑上清晰可见，如下图所示)。