I’m currently working on a shader to draw a dynamic grid of rectangles in GLSL. My goal is to create a pattern where each rectangle can be larger than its tile, allowing it to overlap with neighboring tiles. I’m using the ** fract** function to tile coordinates (e.g.,

**) for tiling these rectangles.**

`fract(coords * tile)`

The challenge I’m facing is managing the performance and complexity of the shader. I end up drawing many rectangles, including those that are not large enough to overlap with their neighbours. This seems inefficient, especially when I adjust the rectangle sizes and the tile count dynamically the frame-rate drops significantly.

I’m looking for a way to limit the drawing to only those tiles where the rectangle is large enough to exist in the current tile. I think there should be a way to start my for-loop from the tiles where rectangle exist (overlaps with the current tile) and end if it gets too small to overlap.

Maybe there is a more efficient approach to ensure that only rectangles large enough to overlap with neighbouring tiles are drawn?

Here is a simplifid code that I have now:

```
float box(in vec2 coords, in vec4 size, in vec4 blur){
size = vec4(0.5) - size*0.5;
vec2 uv = smoothstep(size.xy, size.xy+blur.xy, coords);
uv *= smoothstep(size.zw, size.zw+blur.zw, vec2(1.0)-coords);
return uv.x*uv.y;
}
//out vec4 fragColor;
void main(void){
{
//variables
vec2 coords = gl_FragCoord.xy;
vec2 tile = vec2(8, 4);
vec4 rectSizeR = vec4(0.1);
vec4 shapeBlurR = vec4(0);
vec4 color = vec4(0.1);
coords = coords * tile.xy;
vec2 index = floor(coords);
coords = fract(coords);
for (int i = int(-tile.x); i <= int(tile.x); i+=1){
for (int j = int(-tile.y); j <= int(tile.y); j+=1){
vec2 loopCoords = (vec2(i,j) + coords);
color.r += 0.3 * box (loopCoords, rectSizeR + abs(0.1 * vec4(index.xy-vec2(i,j), index.xy-vec2(i,j))) , shapeBlurR);
}
}
gl_FragColor = vec4(color);
}
```

Thank you in advance for any guidance or advice you can provide!