左右平移滑入滑出

使用片元著色器, 依次讓左邊的像素代替右邊的像素(或右邊的代替左邊的), 產(chǎn)生一種錯(cuò)覺, 感覺像是進(jìn)行了平移操作

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