序列帧动画Shader

序列帧动画Shader效果

---

可以使用TexturePackerGUI生成序列帧合集，制作起来很方便

动画效果：

---

fragment shader

precision mediump float;

uniform sampler2D Texture;
uniform float BlendIntensity;

varying vec2 vTexCoord;

void main()
{
    vec2 AnimUV ;

    AnimUV = vec2(vTexCoord.x/TextureScale.x,vTexCoord.y/TextureScale.y);
    AnimUV.x += indexX/TextureScale.x;
    AnimUV.y += (TextureScale.y-1.0-indexY)/TextureScale.y;//反转方向

    vec4 color = texture2D(Texture, AnimUV);
    
    gl_FragColor = color * BlendIntensity;
 
}

---

优化:RGB三通道的序列播放

因为素材是黑白的，所以我在RGB通道按顺序的播放

原本的4k图素材，就这样缩小60%以上

    vec2 AnimUV ;
    // 计算 总帧数 % 3通道的数量
    int currentFrame = Index / 3;
    // 计算当前要显示的通道（0 表示 R，1 表示 G，2 表示 B）
    float currentRGBChannel = mod(float(Index) ,3.0);
    
   
    float indexY = floor(float(currentFrame)/TextureScale.x);
    float indexX = float(currentFrame)-TextureScale.x*indexY;
    
    AnimUV = vec2(vTexCoord.x/TextureScale.x,vTexCoord.y/TextureScale.y);
    AnimUV.x += indexX/TextureScale.x;
    AnimUV.y += (TextureScale.y-1.0-indexY)/TextureScale.y;//反转方向
    
    
    vec4 color = texture2D(Texture, AnimUV);
  
    if (currentRGBChannel == 0.0) {
        // 显示红色通道
        gl_FragColor = vec4(color.r)*BlendIntensity;
    } else if (currentRGBChannel == 1.0) {
        // 显示绿色通道
        gl_FragColor = vec4(color.g)*BlendIntensity;
    } else if (currentRGBChannel == 2.0) {
        // 显示蓝色通道
        gl_FragColor = vec4(color.b)*BlendIntensity;
    }
    
    gl_FragColor.a   = color.r*color.g*color.b*BlendIntensity;