[GLSL] Rectangle

 

https://thebookofshaders.com/07/

The Book of Shaders

---

 

After listening to the lecture, followed the memory and wrote the code below.

#ifdef GL_ES
precision mediump float;
#endif

#define TWO_PI 6.28318530718

uniform vec2 u_resolution;
uniform float u_time;

vec3 rect(vec2 coord, vec2 loc, vec2 size){
    vec2 lb = loc - size/2.;
    vec2 rt = loc + size/2.;
    
    vec2 pct = step(lb, coord);
    pct -= step(rt, coord);
    
    return vec3(pct.x * pct.y);
}

void main(){
    vec2 st = gl_FragCoord.xy/u_resolution;
    
    vec3 color = rect(st, vec2(.5), vec2(.5));
    
    gl_FragColor = vec4(color,1.0);
}

Success!

 

Make another function that just draws the outline of a rectangle.

- Okay.

#ifdef GL_ES
precision mediump float;
#endif

#define TWO_PI 6.28318530718

uniform vec2 u_resolution;
uniform float u_time;

vec3 rect(vec2 coord, vec2 loc, vec2 size, float grid){
    vec2 s = loc - size/2.;
    vec2 l = loc + size/2.;
    vec2 gs = s - grid;
    vec2 gl = l + grid;
    
    vec2 pct = step(s, coord);
    pct -= step(l, coord);
    
    vec2 gpct = step(gs, coord);
    gpct -= step(gl, coord);
    
    return vec3(gpct.x * gpct.y - pct.x * pct.y);
}

void main(){
    vec2 st = gl_FragCoord.xy/u_resolution;
    
    vec3 color = rect(st, vec2(.5), vec2(.5), .05);
    
    gl_FragColor = vec4(color,1.0);
}