转场动画-分割

先看效果图

同样使用VS Code安装glsl-canvas还有Shader Language两个插件。

分割转场.gif

可以修改参数实现画面上下、下上、左右、右左分割都可以。
代码如下：

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D u_texture_0; //纹理图片
uniform vec2 u_resolution; //画布分辨率
uniform float u_time; //时间全局变量，动态改变
uniform int axis; //旋转轴如：X轴 Y轴 Z轴
uniform sampler2D u_texture_1; //纹理图片1
uniform sampler2D u_texture_2; //纹理图片2
uniform sampler2D u_texture_3; //纹理图片3
uniform sampler2D u_texture_4; //纹理图片4
uniform sampler2D u_texture_5; //纹理图片5

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;
    vec4 color = texture2D(u_texture_0, st);
    float direction = 3.0;

    if (u_time <= 1.0) {
        if (st.x < 0.5) { //这里控制需要分割的位置
            float u_progress = u_time / 1.0;
            vec2 direction = vec2(0.0, 1.0);//修改这里可以设置纹理移动方向
            vec2 p = st + u_progress * sign(direction);
            vec2 f = fract(p);
            vec4 prev = texture2D(u_texture_0, f);
            vec4 next = texture2D(u_texture_1, f);
            float res = step(0.0, p.y) * step(p.y, 1.0) * step(0.0, p.x) * step(p.x, 1.0);
            color = mix(prev, next, res);
        } else {
            float u_progress = u_time / 1.0;
            vec2 direction = vec2(0.0, -1.0);
            vec2 p = st + u_progress * sign(direction);
            vec2 f = fract(p);
            vec4 prev = texture2D(u_texture_0, f);
            vec4 next = texture2D(u_texture_1, f);
            float res = step(0.0, p.y) * step(p.y, 1.0) * step(0.0, p.x) * step(p.x, 1.0);
            color = mix(prev, next, res);
        } 
    } 
    
    gl_FragColor = color;

}