Using floor() function in GLSL when sampling a texture leaves glitch

Question

Here's a shadertoy example of the issue I'm seeing:

https://www.shadertoy.com/view/4dVGzW

I'm sampling a texture by sampling from floor-ed texture coordinates:

#define GRID_SIZE 20.0

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord.xy / iResolution.xy;

    // Sample texture at integral positions
    vec2 texUV = floor(uv * GRID_SIZE) / GRID_SIZE;

    fragColor = texture2D(iChannel0, texUV).rgba;
}

The bug I'm seeing is that there are 1-2 pixel lines sometimes drawn between the grid squares.

Note that we've seen this issue not only using GLSL ES on the web, but also HLSL in Unity.

Is there something to do with floor() and floating point arithmetic that I don't understand?! I'd love to know not just how to fix it, but why exactly it's happening?

Answer 1

Turned out to be using a low detail mipmap from the texture for those grid lines. Changing the filter settings on the texture to "nearest" or "linear" filtering rather than "mipmap" fixed it.

It is also possible to call texture2D with a 3rd "bias" parameter that modifies which mipmap level it will use.

Thanks to the commenter on shadertoy for answering the question!

(Not sure how the mipmap level actually gets chosen for custom shaders without the bias, would be interested if someone knows!)