左右平移滑入滑出

使用片元着色器, 依次让左边的像素代替右边的像素(或右边的代替左边的), 产生一种错觉, 感觉像是进行了平移操作

precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D texMap;
uniform sampler2D colorMap;
uniform float stepValue; //[0.0, 1.0]
void main () {
    vec2 st = varyTextCoord;
    if(st.x < stepValue) {
        st = vec2(st.x +  (1.0 - stepValue), st.y); //map x [0, 1]
        vec3 color = texture2D(texMap, st).rgb;;
        gl_FragColor = vec4(color , 1.);
    } else {
        st = vec2((st.x - stepValue), st.y);
        vec3 color = texture2D(colorMap, st).rgb;;
        gl_FragColor = vec4(color , 1.);
    }
}

左右平移滑入滑出

放大缩小

precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D texMap;
uniform sampler2D colorMap;
uniform float stepValue; //0.0<=stepValue<=0.5.

void main () {

    vec2 st = varyTextCoord;

    if(st.x > 0.5 - stepValue && st.x < 0.5 + stepValue &&
        st.y > 0.5 - stepValue && st.y < 0.5 + stepValue) {
        st = vec2(st.x, st.y);
        vec3 color = texture2D(texMap, st).rgb;;
        gl_FragColor = vec4(color , 1.);
    } else {
        st = vec2(st.x, st.y);
        vec3 color = texture2D(colorMap, st).rgb;;
        gl_FragColor = vec4(color , 1.);
    }

}

放大缩小.gif

四角推出

precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D texMap;
uniform sampler2D colorMap;
uniform float stepValue; //0.0<=stepValue<=0.5.

void main () {

    vec2 st = varyTextCoord;

    if(st.x > 0.5 - stepValue && st.x < 0.5 + stepValue ||
        st.y > 0.5 - stepValue && st.y < 0.5 + stepValue) {
        st = vec2(st.x, st.y);
        vec3 color = texture2D(texMap, st).rgb;;
        gl_FragColor = vec4(color , 1.);
    } else {
        st = vec2(st.x, st.y);
        vec3 color = texture2D(colorMap, st).rgb;;
        gl_FragColor = vec4(color , 1.);
    }

}

四角推出.gif

上下平移打开效果

precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D texMap;
uniform sampler2D colorMap;
uniform float stepValue; //0.0<=stepValue<=0.5

void main () {

    vec2 st = varyTextCoord;

    if(st.y < 0.5 - stepValue || st.y > 0.5 + stepValue) {
        st = vec2(st.x, st.y);
        vec3 color = texture2D(texMap, st).rgb;;
        gl_FragColor = vec4(vec3(0.0, 0.0, 0.0) , 1.);
    } else {
        st = vec2(st.x, st.y);
        vec3 color = texture2D(colorMap, st).rgb;;
        gl_FragColor = vec4(color , 1.);
    }

}

image.gif