<p>Using texelFetch gives the correct result. Here is a <a href="https://www.shadertoy.com/view/NtG3zh" rel="nofollow noreferrer">shaderToy</a> that shows an animated version.</p>
<pre><code>void main() {

  vec2 st = v_texcoord;
  float scale = 20.0;

  vec2 uv = st * scale;
  vec2 ipos = floor(uv);      // col &amp; 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);

}
</code></pre>
<p>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.</p>

CC BY-SA 4.0
2021-11-18T10:00:00.850Z
For those using WebGL/GLSL, `texelFetch` is supported in WebGL2 (OpenGL ES 3.00). If you don't have WebGL2 available, setting up the sampler to use Nearest actually does work, to my surprise :).
polyclick
CC BY-SA 4.0
2021-11-16T23:36:34.480Z
2021-11-17T01:44:12.640Z
2021-11-17T01:44:12.640Z
pmw1234
<p>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()</p>

CC BY-SA 4.0
2023-01-28T16:32:49.850Z
2023-01-28T16:32:49.850Z
Fabrice NEYRET
<p>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.</p>
<p>I can't seem to figure out how to get rid of those, I tried interpolating with the neighbouring cells.</p>
<p>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.</p>
<p><strong>Update</strong>: I've created a shadertoy sketch to demonstrate the problem: <a href="https://www.shadertoy.com/view/7lV3zz" rel="nofollow noreferrer">https://www.shadertoy.com/view/7lV3zz</a></p>
<p><a href="https://i.sstatic.net/oYNmH.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/oYNmH.png" alt="enter image description here" /></a></p>
<p>Code</p>
<pre><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 &amp; 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);
}
</code></pre>

CC BY-SA 4.0
2021-11-16T22:20:19.883Z
what is the setup of the sampler? If you look closely every one of the tiles has an extra line of pixels on it .
pmw1234
CC BY-SA 4.0
2021-11-16T23:15:37.097Z
I've added a shadertoy sketch to demonstrate the problem. I'm pretty sure it's not a texture setup problem (clamping, wrapping, ...), seams appear in those cases where the position is closing in on the borders of the sampled texture. I'm just sampling aribitrary points away from the borders. I can't imagine this is a mipmap problem either.
polyclick
<glsl><webgl><fragment-shader><opengl-es>
Tiling in GLSL creates unwanted seams
polyclick
# Tiling in GLSL creates unwanted seams

(Asked by: username_0 on 2021-11-16)

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>

[![enter image description here](https://i.sstatic.net/oYNmH.png)](https://i.sstatic.net/oYNmH.png)

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);
}

```

**Tags:** glsl, webgl, fragment-shader, opengl-es

> **Comments:**
> **username_1**: what is the setup of the sampler? If you look closely every one of the tiles has an extra line of pixels on it .  
> **username_0**: I've added a shadertoy sketch to demonstrate the problem. I'm pretty sure it's not a texture setup problem (clamping, wrapping, ...), seams appear in those cases where the position is closing in on the borders of the sampled texture. I'm just sampling aribitrary points away from the borders. I can't imagine this is a mipmap problem either.  

---

## 2 answers

### Answer by username_1 on 2021-11-16. Score: 1 | Accepted answer

Using texelFetch gives the correct result. Here is a [shaderToy](https://www.shadertoy.com/view/NtG3zh) 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.

> **Comments:**
> **username_0**: For those using WebGL/GLSL, `texelFetch` is supported in WebGL2 (OpenGL ES 3.00). If you don't have WebGL2 available, setting up the sampler to use Nearest actually does work, to my surprise :).  

---

### Answer by username_2 on 2023-01-28. Score: 0

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()


---

