Opengl ES转场动画

转场效果一（水平或垂直替换两个纹理）

//顶点着色器
#version 300 es

layout(location = 0) in vec4 a_position;
layout(location = 1) in vec2 a_texCoord;
uniform mat4 u_mvpMatrix;
out vec2 v_texCoord;

void main()
{
    gl_Position = u_mvpMatrix * a_position;
    v_texCoord = a_texCoord;
}

//片段着色器
#version 300 es
precision mediump float;

in vec2 v_texCoord;

uniform float u_progress; //唯一需改变值范围0.0-1.0
uniform sampler2D u_fromTexture;
uniform sampler2D u_toTexture;
uniform vec2 direction; // = vec2(0.0, 1.0)垂直 vec2(1.0, 0.0)水平

layout(location = 0) out vec4 o_fragColor;

void main()
{
    vec2 p = v_texCoord + u_progress * sign(direction);
    vec2 f = fract(p);

    o_fragColor = mix(
        texture(u_fromTexture, f),
        texture(u_toTexture, f),
        step(0.0, p.y) * step(p.y, 1.0) * step(0.0, p.x) * step(p.x, 1.0)
    );
}

 

转场效果二

 

转场效果三

 

转场效果四

 

转场效果五

 

转场效果六