varying vec2 vUv;
uniform sampler2D spriteTexture;
uniform vec4 iconInfo; //In the spriteMap, use iconInfo's x and y components for the offset position, and z and w components for the width and height of the icon, respectively, to locate an icon
void main() {
float xStart = iconInfo.x;
float yStart = iconInfo.y;
float width = iconInfo.z;
float height = iconInfo.w;
vec2 newUv = vec2(
xStart + mod((width * vUv.x) * 10.0, width),
yStart + mod((height * vUv.y) * 10.0, height)
);
gl_FragColor = texture2D(spriteTexture, newUv);
}
I want to achieve a texture repeat effect using the code above, but I’m encountering an issue where there are noticeable gaps and flickering between the tiles. The value of newUv ranges from 0 to 1, and I’m not sure why this effect occurs.
when mipmapping is disabled
This also works, although the edge effects are not great, it does prevent the issue of seam flickering. Why does disabling mipmap affect this result? I don’t have a deep understanding of texture sampling methods, so I would appreciate some explanation. Thank you!
For an in-depth explanation you may search the web. There are quite many pages about texture sampling, bleeding and how to counter-fight. It is a matter of sacrifice and balance - to gain something, you need to sacrifice something else (e.g. smoothness-vs-performance, or performance-vs-memory, or memory-vs-precision, or precision-vs-complexity, etc.)
In a nutshell, to smooth textures, the sampling takes the color of several texture pixels and calculates some intermediate color. At the boundary of a tile, the samples takes pixels from the tile and also pixels from the neighbouring tiles. This results in a wrong mixture of colors, because pixels of one tile affect the boundary pixels of another tile. When mipmaps are used, pixels are also taken from neighbouring levels.
