如何手动包装纹理坐标？

Question

我正在使用 C++ 和 HLSL，需要将我的纹理坐标换行，以便纹理平铺在三角形上。

坐标被“包裹”到0-1范围后，它们会被旋转，所以我不能简单地使用纹理采样器的AddressU和AddressV属性设置来包裹，因为它们需要被包裹然后旋转，所以它不能在采样器内部完成。

这里的解决方法很简单，只用纹理坐标的小数部分就可以了。

下面是一个像素着色器的例子，它将纹理平铺 36 次 (6 * 6)：

input.tex *= 6.0f; //number of times to tile ^ 2
input.tex = frac(input.tex); //wraps texCoords to 0-1 range
return shaderTexture.Sample(SampleType, input.tex);

这确实会平铺纹理，但会在纹理包裹的边界处产生问题。瓷砖必须均匀地分成它们正在展示的空间，否则会在寄宿生相遇的地方形成接缝。我绘制纹理的正方形是 800x600 像素，因此平铺 5 会平铺，但 6 则不会，并且会导致沿 Y 轴出现接缝。

我尝试使用模运算符input.tex = input.tex % 1 来包装坐标，但得到完全相同的结果。我还尝试更改纹理过滤方法以及 AddressU 和 AddressV 属性以及无数不同的调试方法。

我很幸运地使用了这段代码。如果x 坐标太高则设置为 0，如果太低则设置为 1。

input.tex *= 6.0f;
input.tex = frac(input.tex);
if (input.tex.x > 0.999f) input.tex.x = 0;
if (input.tex.x < 0.001f) input.tex.x = 1;
return shaderTexture.Sample(SampleType, input.tex);

这只是解决了某些地方的问题，所以它绝对不是一个解决方案。

这是一张显示纹理的图片（左）和手动包裹时的样子（右）。您可以看到，并非寄宿生接触的所有地方都有此错误。

我也尝试过不将纹理坐标更改为 0-1 范围并将它们围绕每个图块的中心而不是 (0.5, 0.5) 旋转，但我得到了相同的结果。此外，我的纹理坐标完全独立于顶点，并在像素着色器中计算。

我所看到的与此问题有关的任何事情都与一个像素的高值和下一个像素的低值有关，例如 u = 0.95 和下一个像素 u = 0.03，这会导致它向后插值穿过纹理。但是当我旋转我的纹理坐标时，什么都没有改变。即使每个图块都应用了随机旋转。在这种情况下，边缘有各种不同的值相互接壤，不仅仅是左侧的高值和右侧的低值，而且出现接缝的区域永远不会改变。

Answer 1

正如 MuertoExcobito 所说，主要问题是在边界处，纹理坐标在单个像素中从 1 跳到 0。从语义上讲，整个纹理在该像素中得到平均是正确的，但这不是由在该像素中将纹理从 1 插值到 0 引起的。真正的原因是 mipmapping。

对于您的纹理，在您加载它时会生成 mipmap。这意味着纹理会获得多个 mipmap 级别，这些级别都是之前的一半大小。

如果纹理变得失真，最高级别的采样会导致过采样（点过滤类似伪影）。为了对抗过采样，纹理查找会根据屏幕空间中纹理坐标的变化选择适当的 mipmaplevel。在您的情况下，边框在一个小地方发生了非常大的变化，这导致使用可能的最低 mipmap（这是您看到的一个小红点，这就是红色边框的原因）。

回到您的问题，您应该使用纹理查找方法SampleGrad (Docs) 来控制 mipmapping。要获取像素纹理坐标的当前变化，您可以使用内部方法ddx 和ddy。它们返回着色器中的任意变量，它如何在本地更改为相邻像素（正确的解释将深入到这个主题）。所以使用下面的代码不应该改变任何东西，因为它在语义上应该是相同的：

input.tex *= 6.0f; //number of times to tile ^ 2
input.tex = frac(input.tex); //wraps texCoords to 0-1 range
float2 xchange = ddx(input.tex);
float2 ychange = ddy(input.tex);
return shaderTexture.SampleGrad(SampleType, input.tex, xchange, ychange);

现在您可以应用您的代码来防止 xchange 和 ychange 发生大的变化，以强制图形设备使用更高的 mipmap。这应该会删除您的工件。

如果您的纹理不需要 mipmapping，因为您正在渲染纹理屏幕对齐并且纹理大小不会导致过采样，您可以使用更简单的替代方法 sampleLevel (Docs) 在那里您可以通过参数，它选择一个特定的mipmap，你可以自己确定。

Answer 2

这里的代码导致在单个像素的范围内对整个纹理进行采样。例如，对于接缝处的两个相邻像素，一个“u”样本可以是1.0-eps，下一个样本是0.0+eps，其中eps 是一个小于纹素宽度的数字。对输出像素进行插值时，您将从 1.0 .. 0.0 进行插值，对这两个样本之间的整个纹理进行采样。整个纹理的平均会导致“灰色”，即使您的输入纹理实际上不包含任何完全灰色的像素。

如果您需要在每个范围内旋转纹理坐标（例如，0..1、1..2 独立旋转），有几种方法可以解决这个问题。首先，您可以将插值从线性更改为点，这将避免纹素之间的插值。但是，如果您需要双线性插值，这可能是不可接受的。在这种情况下，您可以构建一个“网格”网格，并将输入纹理 0..1 映射到每个图块上，图块纹理坐标在着色器中独立旋转。

另一种可能的解决方案是将坐标转换为 0..1 空间，执行旋转，然后将它们转换回原始空间。例如，你会这样做：

// pseudo-code:
int2 whole;
input.tex = modf(input.tex, whole);
input.tex = Rotate(input.tex); // do whatever rotation is needed
input.tex += whole;

这将确保包装没有任何不连续性。或者，您可以让您的旋转代码考虑非统一空间纹理坐标。

Answer 3

Gnietschow 发布了此问题的答案，但我将添加一个答案，以准确显示我如何使用该答案。 实际上我什至不确定为什么会这样，我只知道即使使用其他倍数的平铺、各种纹理和随机旋转也可以。

input.tex *= 6.0f; //number of times to tile ^ 2
input.tex = frac(input.tex); //wraps texCoords to 0-1 range
float2 xchange = ddx(input.tex);
float2 ychange = ddy(input.tex);
if ((xchange.x < 0)) xchange = float2(0, 0);
if ((ychange.y < 0)) ychange = float2(0, 0);
return shaderTexture.SampleGrad(SampleType, input.tex, xchange, ychange);

如果您根本不需要 mipmapping，Gniet 提到的其他方法也可以正常工作

input.tex *= 6.0f; //number of times to tile ^ 2
input.tex = frac(input.tex); //wraps texCoords to 0-1 range
return shaderTexture.SampleLevel(SampleType, input.tex, 0);