Tiling in GLSL creates unwanted seams

Question

I'm writing a shader that creates a grid with coloured tiles. The color is derived from a pixel at that location on a texture. But around the tiles I get these unwanted seams.

I can't seem to figure out how to get rid of those, I tried interpolating with the neighbouring cells.

Suggestions on the web point to setting texture clamping/wrapping to get rid of seams, but that's only a valid solution when I'd sample near the border of the source texture.

Update: I've created a shadertoy sketch to demonstrate the problem: https://www.shadertoy.com/view/7lV3zz

Code

#ifdef GL_ES
precision highp float;
#endif

varying vec2 v_texcoord;

uniform sampler2D u_source; // ./assets/textures/moon.jpg


void main() {
  vec2 st = v_texcoord;

  float scale = 20.0;

  vec2 uv = st * vec2(scale);
  vec2 ipos = floor(uv);      // col & row index on the grid (0, 1, 2, 3, ..., 80)

  vec2 iposSample = (ipos + vec2(0.5, 0.5)) / vec2(scale);
  gl_FragColor = texture2D(u_source, iposSample);
}

Answer 1

Using texelFetch gives the correct result. Here is a shaderToy that shows an animated version.

void main() {

  vec2 st = v_texcoord;
  float scale = 20.0;

  vec2 uv = st * scale;
  vec2 ipos = floor(uv);      // col & row index on the grid (0, 1, 2, 3, ..., 80)

  vec2 iposSample = (ipos + vec2(0.5, 0.5)) / vec2(scale);

  //gl_FragColor = texture(usource, iposSample);
  gl_FragColor = texelFetch( usource, ivec2(iposSample*imageResolution.xy),0);

}

The samplers do seem to be part of the issue as texelFetch cleans up the output. I wasn't suggesting clamping or wrapping but rather nearest vs linear. I'm not sure what shader toy uses for its samplers, but texelFetch can have a significant effect on shader toy as well.

Answer 2

The problem is due to MIPmapping: the derivative is 0 inside tiles then huge accross (same problem when repeating texture with explicit fract() ). → Either use nearest instead of MIPmap, or compute the LOD manually via textureLod()