旋转相机时，重复纹理会严重扭曲/抖动 [英] Repeated textures are severely distorted/shaking when rotating camera

问题描述

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

I originally asked this question on gamedev, but none of the answers helped to solve problem, and I still have no clue what is the real cause. I didn't see anything about re-posting questions across SE in FAQs, so I can only hope this is okay. Moreover, in the retrospect the question is probably more related to graphics programming in general than just game development.

编辑1开始

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

The behaviour of the original post applies only to Windows XP and Windows 7, browsers Firefox and Chrome. On Ubuntu, there is no such distortion, but instead the textures "shake" while the camera is being rotated. When the rotation is halted, the shaking stops, but the textures may not be in the completely correct position.

编辑1结束

编辑3开始

该程序已在4台不同的计算机上测试过按预期工作。

The program has been tested on 4 different computers, and haven't worked as intended on any of them.

编辑3结束

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

I have a large voxel in WebGL which I want to cover with tiled texture each tile has the side length of 1 in the vertex space. In this test scenario the camera is pointing to the negative z direction and the sides of the voxel are in the x-y, x-z, y-z planes.

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

Smaller voxels (i.e. fewer repeats) work quite well, but at around 2000 x and y repeats per face (ie voxel size 2000*2000*2000) the textures start to look really ugly. When the camera points perpendicularly to the face the textures look correct regardless of the size/amount of repeats, but for voxels of the size mentioned above any rotation of even a couple of degrees causes a visible problem. Increasing the voxel size increases the distortion. The inverse is also true: with small voxels the textures look correct regardless of camera rotation. It seems to me that there is no hard threshold value for the size but that the effect starts to increase gradually from zero when the voxel is increased in size from the approx 2000 per side.

有关可视化的信息，请参见 http://imgur.com/a/spQIv 。第一个图像是它应该是什么样子，但是当旋转相机时，线条开始像第二个图像一样变形。通过增加体素大小和更多地旋转相机，效果会变得更糟。 http://imgur.com/a/wRndy 包含两个影响更严重的附加图像。

See http://imgur.com/a/spQIv for a visualization. The first image is how it should look like, but when the camera is rotated, the lines start to become distorted as in the second image. The effect gets worse by increasing the voxel size and by rotating the camera more. http://imgur.com/a/wRndy contains two additional images with more severe effect.

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

The textures (one X per texture) are originally 512*512 px. The screenshots have not been scaled in any way.

我的第一个猜测是浮动不准确，但很难相信，因为该对象只有1000的维度。

My first guess was float inaccuracies, but that's quite hard to believe since the object has only the dimensions of the order of 1000.

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

My second guess was some kind of weird int/float rounding error, but since everything is always handled in floats, I don't see how this could happen.

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

The third possibility I could think of is that this is just impossible and that textures should not be repeated that many times. However, this seems quite unlikely IMO. My guess (and hope) is that there is some kind of quite elementary problem.

任何有关可能导致或通常导致此类事情的建议都值得赞赏，因为我似乎很难自己尝试缩小这个问题的来源。

Any suggestions about what can cause or commonly does cause this kind of thing are well appreciated, because I seem to be having a very hard time trying to narrow down the source of this problem on my own.

我正在使用：

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不应该责备，原因必须是其他地方。

I also performed some very elementary calculations: For 32-bit floats the maximum significand is around 8.4 million. For voxel side length 2000 (which I noticed was the level where the effect became visible), one could naively expect approximately 0.00025 of a float rounding error in the coordinates. Assuming each repeat takes around 100 pixels in screen, the error should be significantly less than 1 pixel, which is not the case. Unless my calculation above was done incorrectly, I therefore would nominate that Float32 is not to blame and that the reason must be somewhere else.

线条纹理仅用于可视化问题。问题还存在其他（更自然）的纹理。

The line texture is used only for visualizing the problem. The problem persists also with other (more natural) kinds of textures.

编辑2开始

启用或禁用抗锯齿功能没有明显区别

Enabling or disabling antialiasing makes no visible difference

编辑2结束

推荐答案

我相信你所看到的可能真的是由于精确造成的。你正确地计算出浮点坐标应该足够了，问题是硬件不使用浮点数来查找纹理。纹理内插器单元的精度要低得多（不知道今天怎么样，但在旧版GeForce卡上它曾经低至16位）。

i believe that what you are seeing may really be caused by the precission. You correctly calculated that the floating-point coordinates should be pretty enough, the problem is the hardware is not using floats to lookup the textures. The texture interpolator units do have considerably lower precision (don't know how is it today, but it used to be as low as 16 bits on older GeForce cards).

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

So ... how can one exceed interpolator precision? By using large texture coordinates (many repeats) on a large geometry, which is exactly what you are doing. Remedy? Subdivide your geometry to be using smaller texture coordinates (you can shift texture coordinates in integer steps so they are closer to 0).

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

Here is a screenshot of how extreme it can look like (i weren't able to reproduce the error on my GeForce 260, but it is clearly visible on my Tegra 2 tablet, as shown in the image below).

这篇关于旋转相机时，重复纹理会严重扭曲/抖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！