Loop in shaders

Questions
,
1

Hi, I’m trying to make a grid boxes in fragment shader but it why it doesn’t work? I’m trying to understand how weird the process of creating a loop or not in the shader. I tried this one. which is to supposedly to create boxes…

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

uniform sampler2D u_tex0;
uniform float u_animate;

float rectshape(vec2 position, vec2 center, vec2 dimensions) {
    vec2 halfDim = dimensions * 0.5;
    vec2 shaper = vec2(step(center.x - halfDim.x, position.x), step(center.y - halfDim.y, position.y));
    shaper *= vec2(step(position.x, center.x + halfDim.x), step(position.y, center.y + halfDim.y));
    return shaper.x * shaper.y;
}

void main(){
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color = vec3(0.0);

    float boxSize = 0.1; // Size of the boxes
    float gapSize = 0.03; // Size of the gaps between boxes
    const int rows = 5;
    const int cols = 5;
    vec2 gridSize = vec2(boxSize + gapSize); // Size of each grid cell

    // Center the grid horizontally and vertically on the screen
    vec2 gridStart = (u_resolution.xy - gridSize.xy * vec2(cols, rows)) / 2.0;

    for (int i = 0; i < rows; i += 1) {
        for (int j = 0; j < cols; j += 1) {
            // Calculate the center of the current box
            vec2 center = gridStart + vec2(float(j) + 0.1, float(i) + 0.1) * gridSize.xy + gridSize * 0.5;

            // Check if the current point is inside the current box or gap
            float rectangle = rectshape(st, center, vec2(boxSize));
            float gap = 1.0 - rectshape(st, center, vec2(boxSize + gapSize));

            color += vec3(rectangle * gap);
        }
    }

    gl_FragColor = vec4(color, 1.0);

}

And then there is a shorter line that create in bookofshaders website.

wherein the boxes are create by just increasing the st by zoom of tiles but I don’t get it…where are the boxes created from if its only one program and then just increase the st, how does it work?

        uniform sampler2D u_tex0;
        uniform float u_animate;
        
        uniform vec2 u_resolution;
        uniform float u_time;
        
        #define PI 3.14159265358979323846
        
        vec2 tile(vec2 _st, float _zoom){
            _st *= _zoom;
            return fract(_st);
        }
        
        float box(vec2 _st, vec2 _size){
            _size = vec2(0.5)-_size*0.5;
            vec2 uv = smoothstep(_size,_size,_st);
            uv *= smoothstep(_size,_size,vec2(1.0)-_st);
            return uv.x*uv.y;
        }
        
        void main(void){
            vec2 st = gl_FragCoord.xy/u_resolution.xy;
            vec3 color = vec3(0.0);
            vec4 img = texture2D( u_tex0, st );
        
            // Divide the space in 4
            st = tile(st,10.0);
        
            // Draw a square
            color = vec3(box(st,vec2(0.95)));
            // color = vec3(st,0.0);
        
            gl_FragColor = vec4(color * img.xyz,1.0);
        }
2

Avoid loops if you can.

Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more

1 Like