“This is the second day of my participation in the First Challenge 2022.

preface

Once you know how to display image textures, you can think about how to implement some effects on textures. For example, to say the following split effect: a picture content canvas in half, left and right to show the original picture center content. Because texture rendering is composed of picture information and coordinates, it only needs to modify the texture coordinates to achieve the content segmentation effect, you can directly understand the specific implementation method through the code.

implementation

Binary mirror

X-axis binary mirror effect. Determine the size of uv x, if x is greater than 0.5 then subtract 0.5.

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    if(uv.x >= 0.5){
        uv.x -=0.5;
    }
    gl_FragColor = texture(iChannel2,uv);
}
Copy the code

Y-axis binary mirror effect. Determine the y value of uv and subtract 0.5 if y is greater than 0.5.

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    if(uv.y >= 0.5){
        uv.y -=0.5;
    }
    gl_FragColor = texture(iChannel2,uv);
}
Copy the code
The original image Y-axis binary mirror X axis binary mirror

Three points mirror

The effect principle of the three-point mirror and the two-point mirror is the same, but the two-point judgment logic is changed to three points. When uv.y is less than 1/3 or greater than 2/3, add 1/3 and subtract 1/3 respectively to show only the center content.

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

    float three = 1.0 / 3.0;
    if(uv.y <= three){
        uv.y = (uv.y + three);
    }else if(uv.y >= three * 2.0){ 
        uv.y -= three;
    }
    gl_FragColor = texture(iChannel2,uv);
}
Copy the code

Once you have achieved the 3-point effect, you can add new effects to it. For example, the calculation of uv division will enlarge the display content and increase the displacement, the content of each sub-mirror deviation to achieve unexpected effects.

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

    float three = 1.0 / 3.0;
    if(uv.y <= three){
        uv.y = (uv.y + three) / 2.0 + 0.25;
        uv.x =  uv.x / 2.0;
    }else if(uv.y >= three * 2.0){ 
        uv.y -= three;
    }else{
        uv.x = uv.x / 1.5 + 0.3;
        uv.y = uv.y / 1.5 + 0.2;
    }
    gl_FragColor = texture(iChannel2,uv);
}
Copy the code
The original image Three points mirror The three-point mirror is out of place

The divider

Sectioning lines can be implemented using the Smoothstep built-in functions. Smoothstep (min, Max,x) has three input parameters,min and Max represent the interval,x represents the input value, and the output value is between min and Max. Smoothstep is a function that transitions from min to Max.

However, this implementation does not use the Smoothstep approach and uses the simple method to achieve. Determine whether y value is within the range of dividing line. If y value is within the range of dividing line, set line value to 1.0, indicating that the dividing line is drawn. Finally, mix is used to mix the texture image and draw the dividing line VEC4 vector. The last input parameter of Mix is line value representing transparency. Only when line is greater than 0 is the dividing line vec4 mixed on the texture image. Implement the method with only 0 and 1 values of line, so implement the dividing line effect.

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    float three = 1.0 / 3.0;
    float line = 0.0;
    float lineSize = 0.005;
    if(uv.y >= three - lineSize && uv.y <= three + lineSize){ 
     // Draw a dividing line at 1/3 with opacity 1.0
       line = 1.0;
    }else if(uv.y >= (three * 2.0 - lineSize) && uv.y <= (three * 2.0 + lineSize)){  
     // Draw a dividing line at 2/3 with opacity 1.0
       line = 1.0;
    }
    if(uv.y <= three){
        uv.y += three;
    }else if(uv.y >= three * 2.0){ 
        uv.y -= three;
    }
    gl_FragColor = mix(texture(iChannel2,uv),vec4(0.0.0.0.0.0.1.0),line);
}
Copy the code
The original image The effect