“This is the third day of my participation in the First Challenge 2022. For details: First Challenge 2022”

The early stage of the practice

Before you start drawing 2D shapes, draw simple content. As shown below, the shader draws half black and half white. By default, col is assigned to 0.0. If x>0.5, col vector is assigned to 1.0.

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec3 col = vec3(0.0);
    if(uv.x > 0.5) col = vec3(1.0);
    gl_FragColor = vec4(col,1.0);
}
Copy the code

But for GLSLif-elseConditional judgment is not friendly, minimize the pairif-elseUse of statements. The recommended use of GLSL built-in functions may be more efficient. Similar to the above code can use built-in functionsstepAlternative. The modified code is as follows:

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec3 col = vec3(step(0.5,uv.x));
    gl_FragColor = vec4(col,1.0);
}
Copy the code

The step function is equivalent to uv.x > 0.5? 1.0, 0.0;

Step (a, x) : if x<a, return 0; Otherwise, return 1

Draw the circle

Calculation formula of circle:{x}^2+{y}^2={r}^2.xIs the X coordinate,yIs the Y coordinate,rIs the radius of the circle. 在OpenGLIn the script haslength(v)The built-in function can realize the calculation formula of the circle, the corresponding mathematical formula issqrt(dot(v,v)), also called the modulus of the oriented quantity.

Value = x [0] [1] 2 + 2 + x… [0] \ SQRT {{x} ^ 2 + {x [1]} ^ 2 + \ dots} [0] x [1] 2 + 2 + x… .

The following code shows that the effect is not the desired, the circle will appear in the lower left corner of the canvas. You need to know that in GLSL the x and y coordinates (0,0) are in the lower left corner of the canvas, and the circle is also drawn in the canvas position. If you want the circle to be able to draw in the center of the canvas, you need to adjust the overall coordinate position of the drawing.

vec3 sdfCircle(vec2 uv,float r){
    float d = length(uv) - r;
    return d > 0. ? vec3(1.) : vec3(0..0..1.); > 0 is outside the circle range, < 0 is inside the circle range
}
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    gl_FragColor = vec4(sdfCircle(uv,0.4),1.0);
}
Copy the code

Since the vertex range in GLSL is in the range [0,1], the canvas origin position coordinate is (0,0). Subtract 0.5 from uv before drawing the circle, then the coordinates of the origin position become (0.5,0.5). The position coordinates of the drawing circle are offset to the center of the canvas, and then the width ratio is obtained by dividing the iResolutionx and y coordinates. Finally, the assignment of uv.x multiplied by the aspect ratio solved the problem of the circle being stretched.

vec3 sdfCircle(vec2 uv,float r){
    float d = length(uv) - r;
    return d > 0. ? vec3(1.) : vec3(0..0..1.); > 0 is outside the circle range, < 0 is inside the circle range
}
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    uv -= 0.5; // x: <-0.5, 0.5>, y: <-0.5, 0.5>
    uv.x *= iResolution.x/iResolution.y; // x: <-0.5, 0.5> * aspect ratio, y: <-0.5, 0.5>
    gl_FragColor = vec4(sdfCircle(uv,0.4),1.0);
}
Copy the code
The default uv Adjusted UV