先看效果圖

同樣使用VS Code安裝glsl-canvas還有Shader Language兩個插件。

分割轉(zhuǎn)場.gif

可以修改參數(shù)實(shí)現(xiàn)畫面上下、下上、左右、右左分割都可以。
代碼如下：

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D u_texture_0; //紋理圖片
uniform vec2 u_resolution; //畫布分辨率
uniform float u_time; //時間全局變量，動態(tài)改變
uniform int axis; //旋轉(zhuǎn)軸如：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);//修改這里可以設(shè)置紋理移動方向
            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;

}