Shader实现AE特效----百叶窗（Shutter）【GLSL】

原图

效果图

VS

attribute vec4 aPos;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;void main() {gl_Position = vec4(aPos.xyz, 1.0);vTexCoord = aTexCoord;
}

FS

// uWidth = 127；uPercent = 0.5； uDirect = 135‘；
precision highp float;varying vec2 vTexCoord;
uniform sampler2D uTexture;
uniform vec2 uSize;       // 纹理尺寸
uniform float uWidth;     // 宽度 0～127
uniform float uPercent;   // 过渡完成 0～1
uniform float uDirect;    // 弧度 角度 * PI / 180.void main() {float offset = uPercent;float unitWidth = uWidth;// shader中以x方向为0，alpha为基线，和输入方向一致， Beta 为百叶运动方向，垂直右手边float alpha = uDirect + M_PI_2;vec4 color = texture2D(uTexture, vTexCoord);vec2 loc_tex = vTexCoord * uSize - uSize * 0.5; float dist = (sin(alpha) * loc_tex.x - cos(alpha) * loc_tex.y);float modPixel = mod(dist , unitWidth);float showPixel = offset * unitWidth;if (modPixel < showPixel)color = vec4(.0);gl_FragColor =color;
}