旋转相机时重复的纹理严重扭曲/抖动 [英] 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 个末端

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

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.

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

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屋！