如何使用 HLSL 着色器裁剪和显示纹理表的特定图块？

Question

我有一个由 32x32 大小的瓷砖组成的 96x96 纹理表。 使用着色器，我希望一次只显示 1 个图块。 然而，我完全不知道如何正确地做到这一点。 我在下面拼凑的代码似乎抓住了 map 的左上角像素......

sampler2D atlas : register(s2);

int texHeight = 96;
int texWidth = 96;
int tileSize = 32;
int tileFrame = 1;

float4 ps_main(in float2 In : TEXCOORD0) : COLOR0 {

float4 atlasColor = tex2D(atlas, float2( (In.x*tileSize)+tileFrame,(In.y*tileSize)+(floor(tileFrame)/texWidth)));

return atlasColor;

}

technique tech_main { pass P0 { PixelShader = compile ps_2_a ps_main(); } }

Answer 1

我将假设通过TEXCOORD0输入的值是从0.0到1.0 。

对纹理进行采样时，从 0.0 到 1.0 的值将读取纹理的完整重复。 由于您使用的是整数，因此您将 U 和 V 坐标乘以 32，因此您要求纹理重复 32 次。

另一个假设是你可能有一个带有 mipmap 的纹理，在渲染目标的一个小区域中绘制它会强制硬件读取最小的 mip，这会给你一种颜色。

相反，您需要将 In 乘以您想要查看的纹理分数，即tileSize/texWidth和tileSize/texHeight ，即1/3 。

您还需要将tileFrame分解为要对其采样的帧的列和行。 该列需要产生0 1 2 0 1 2 0 1 2 ，而您的行需要产生0 0 0 1 1 1 2 2 2 。

这样做的代码是：

float column = tileFrame % (texWidth / tileSize); // i.e. 3
float row = tileFrame / (texHeight / tileSize); // i.e. 3

%返回tileFrame除以3的余数。

关于该代码的注释； 对于第一个图块， tileFrame应该从0开始。

使用列和行在纹理中产生偏移，使用与缩放In纹理坐标相同的分数；

// This has a problem, see below
float2 offset = float2(column * (tileSize/texWidth), row * (tileSize/texHeight));

但是我们需要处理一个额外的皱纹。 tileSize ， texWidth和texHeight都是整数，所以这些除法的结果也将是整数，所以当我们要求tileSize / texWidth ，即32 / 96时，我们不会得到0.3333 ，而是0 ，因为 96一次也不会分成 32。

为了解决这个问题，我们需要：

float2 offset = float2(column * (tileSize/(float)texWidth), row * (tileSize/(float)texHeight));

但是，这一切都是浮云； 由于纹理坐标在 0 和 1 之间，而不是像素，因此纹理的尺寸并不重要，只有上下的图块数量。 我们不需要知道纹理的尺寸，也不需要知道瓷砖有多大。 我们只需要行数和列数。

这是我的版本：

sampler2D atlas : register(s2);

int columns = 3;
int rows = 3;
int tileFrame = 1;

float4 ps_main(in float2 In : TEXCOORD0) : COLOR0 {

  float2 tileSize = float2(1.0 / columns, 1.0 / rows);
  float2 tileXY = float2(tileFrame % columns, tileFrame / rows);

  // Scale texture coordinates and add offset.
  float2 tileUV = In * tileSize + tileXY * tileSize;
  // Easier to understand than
  // (In + tileXY) * tileSize

  float4 atlasColor = tex2D(atlas, tileUV);

  return atlasColor;
}

technique tech_main { pass P0 { PixelShader = compile ps_2_a ps_main(); } }