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

Another way to use smoothstep

In the previous# OpenGL Shader- Anti-aliasing implementationAs described in the article: for anti-aliasing effect can be usedsmoothstepFunction to smooth transitions to draw shapes. There is also a mention of whensmoothstepThe function takes an argumentaandbA gradient effect appears when the range is too large. Such as# OpenGL Shader- Anti-aliasing implementationThe effect shown in:

Mask effect implemented

Smoothstep (a) and (b) have a wide range of parameters to achieve different effects. For example, you can use this feature to achieve a mask effect similar to that seen in old movies, where a blur mask appears at the edge of the view with a light shadow around the lightest edges.

The principle of smoothStep is to use a large range of values as an input parameter to transform the drawing circle. Use a white VEC3 (1.) for the base color and a black VEC3 (1.) for shadow masking.

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;

    vec4 texture = texture(iChannel2,uv);
    uv -= 0.5;
    uv.x *= iResolution.x/iResolution.y;
    float m = 0.4;
    m = smoothstep(m0.2,m+0.2.length(uv) - 0.2);
    vec3 pixel = mix(vec3(1.),vec3(0.),m);
    gl_FragColor = vec4(pixel,1.0);
    
}
Copy the code

In addition to the SmoothStep function, there is another way to achieve the shadow mask effect. Multiply the color vector vec4 texture and Vignette as shown in GLSL below. At the same time, it can be understood that the value of Uv. y-0.5 is closer to 0 as it is closer to the center, and the calculated Vignette is closer to 1.

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture = vec4(1.);
    float vigAmt = 4.0;
    float vignette = (1.0-vigAmt*(uv.y0.5)*(uv.y0.5)) * (1.0-vigAmt*(uv.x0.5)*(uv.x0.5));
    texture *= vignette;
    gl_FragColor = texture;
}
Copy the code

By comparison, it can also be found that the mask realized by circular formula has a certain trend of arc, while the other mask tends to be rectangular, which has a slight difference in special effect. The same goes for star, heart, and other shapes.

smoothstep vignette

Effect of extension

Finally, you can add a time parameter, by changing the vigAmt value vignette strength to achieve the effect of flickering and flickering, there will be a feeling of watching an old movie.

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture = texture(iChannel2,uv);
    float vigAmt = 4.0 + 0.3 * sin(time + 5.0 * cos(time*5.0));
    float vignette = (1.0-vigAmt*(uv.y0.5)*(uv.y0.5)) * (1.0-vigAmt*(uv.x0.5)*(uv.x0.5));
    texture *= vignette;
    gl_FragColor = texture;
}
Copy the code