纹理重复

Question

我想在更大的四边形上重复小的2x2像素纹理，例如，50x50像素。

设置顶点 -

float X = 100, Y = 100, Width = 50, Height = 50;
float TextureLeft = 0, TextureTop = 0, TextureRight = 25, TextureBottom = 25;

Vertices[0].x = X;
Vertices[0].y = Y + Height;
Vertices[0].z = 0;
Vertices[0].rhw = 1;
Vertices[0].tu = TextureLeft;
Vertices[0].tv = TextureBottom;

Vertices[1].x = X;
Vertices[1].y = Y;
Vertices[1].z = 0;
Vertices[1].rhw = 1;
Vertices[1].tu = TextureLeft;
Vertices[1].tv = TextureTop;

Vertices[2].x = X + Width;
Vertices[2].y = Y;
Vertices[2].z = 0;
Vertices[2].rhw = 1;
Vertices[2].tu = TextureRight;
Vertices[2].tv = TextureTop;

Vertices[3].x = X;
Vertices[3].y = Y + Height;
Vertices[3].z = 0;
Vertices[3].rhw = 1;
Vertices[3].tu = TextureLeft;
Vertices[3].tv = TextureBottom;

Vertices[4].x = X + Width;
Vertices[4].y = Y;
Vertices[4].z = 0;
Vertices[4].rhw = 1;
Vertices[4].tu = TextureRight;
Vertices[4].tv = TextureTop;

Vertices[5].x = X + Width;
Vertices[5].y = Y + Height;
Vertices[5].z = 0;
Vertices[5].rhw = 1;
Vertices[5].tu = TextureRight;
Vertices[5].tv = TextureBottom;

画画 -

DrawPrimitive(D3DPT_TRIANGLELIST, 0, 6);

问题是三角形之间边缘的“毛刺”，可能是因为错误的顶点坐标以及四边形上的“毛刺”。

原始纹理 - http://i.imgur.com/tNqYePs.png

结果 - http://i.imgur.com/sgUZvqE.png

Answer 1

在调用DrawPrimitive之前，您应该按照此article设置纹理包装。

// For the textures other than the first one use "D3DVERTEXTEXTURESAMPLER0+index"
YourDevice->SetSamplerState(D3DVERTEXTEXTURESAMPLER0, D3DSAMP_ADDRESSU, D3DTADDRESS_WRAP);
YourDevice->SetSamplerState(D3DVERTEXTEXTURESAMPLER0, D3DSAMP_ADDRESSV, D3DTADDRESS_WRAP);

要消除对角线上的毛刺，您可以使用单个Quad而不是两个三角形。

边缘处的问题被视为here。您必须为每个纹理坐标添加小偏移量。 “小”表示像素的标准化一半。如果纹理分辨率为512x512，则为每个u / v坐标添加（0.5 / 512.0）。

Answer 2

如果绘制2d，则必须在纹理化时向U和V坐标添加0.5px。这将为您提供精确的像素/纹素精度。否则每次丢失0.5像素，纹理看起来会模糊。