转场动画-圆形扫描

先看效果图

同样使用VS Code安装glsl-canvas还有Shader Language两个插件。

圆形扫描.gif

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D u_texture_0; //纹理图片
uniform vec2 u_resolution; //画布分辨率
uniform float u_time; //时间全局变量，动态改变
uniform int axis; //旋转轴如：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 uv0 = gl_FragCoord.xy/u_resolution;
    float direction = 3.0;

    float u_progress = u_time / 1.0;
    vec2 size = u_resolution;
    vec2 uv1 = uv0*size;
    vec2 center = 0.5*size;
    vec2 start = vec2(0.5*size.x,0.0)-center;
    vec2 end = uv1 - center;
    float cos_theta = dot(start,end)/(length(start)*length(end));
    float theta = degrees(acos(cos_theta));
    if(uv0.x>0.5)
    {
        theta = 360.0-theta;
    }
    float angle_threshold = u_progress*360.0;
    if(theta<angle_threshold)
        gl_FragColor = texture2D(u_texture_1,uv0);
    else
        gl_FragColor = texture2D(u_texture_0,uv0);

}