shader

水平压缩替换

前图像右移并移出显示区域; 同时后图像从左侧移入当前显示区域。然而，在渐变的过程中，两幅图像均完全显示，且每幅图像压缩至部分显示.

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

void main () {
    vec2 st = varyTextCoord;
    vec3 color;
    if(st.x < stepValue) {
        st = vec2(st.x / stepValue, st.y);
        vec3 thisrgb = texture2D(texMap, st).rgb;;
        color = thisrgb;
    } else {
        st = vec2((st.x - stepValue) / (1.0 - stepValue), st.y);
        vec3 thatrgb = texture2D(colorMap, st).rgb;;
        color = thatrgb;
    }
    gl_FragColor = vec4(color, 1.);
}

if语句体现了两部分显示内容，即纹理坐标s分量小于uT的侧，以及s分量大于uT的侧。针对各像素坐标，图像(如纹理)的s分量可通过比例计算获得，而结果纹理坐标则用于选取纹素。当uT在0~1之间变化时，同一时间段内并在前图像和后图像之间生成渐变效果。

水平替换

画面叠加

画面叠加效果计算前图像和后图像的加权平均值，进而确定各图像颜色值在输出图像的用量。该权值可通过一段时 间内不断变化的参数进行定义，进而生成图像间的运动效果, 前图像逐渐叠加至后图像中。

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

void main()
{
    vec3 brgb = texture2D(texMap, varyTextCoord).rgb;
    vec3 argb = texture2D(colorMap, varyTextCoord).rgb;
    gl_FragColor = vec4(mix(argb, brgb, stepValue), 1.0);

}

画面叠加

穿透效果

渐变效果则是后图像“穿透”(burns through)前图像。亦即，包含较大亮度值的部分图像替换对应位置处的前图像。通过后图像中R、G、B均值颜色获取亮度值的值。该渐变效果类似于后图像穿透前图像。

precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D texMap;
uniform sampler2D colorMap;
uniform float stepValue; //0.<=uT<=1.

void main () {

    vec3 brgb =texture2D(texMap, varyTextCoord ).rgb;
    vec3 argb =texture2D(colorMap, varyTextCoord ).rgb;
    vec3 color;
    if ((argb.r + argb.g + argb.b) / 3.0 < stepValue) {
        color = argb;
    } else {
        color = brgb;
    }
    gl_FragColor = vec4(color, 1.0);

}

穿透效果