The effect of this filter is realized on the basis of the split-screen filter in the previous article. The same premise is that a normal picture can be loaded using GLSL.
Scaling filter
The basic principle of scaling filters is that you can zoom in and out by changing the vertex coordinates and texture coordinates.
This zoom in and out implementation can actually be implemented in the vertex shader, or in the chip shader. (Note: it is best not to have Chinese in shader code at runtime.)
// Attribute vec4 Position; // Attribute vec2 TextureCoords; varying vec2 TextureCoordsVarying; // Time (pass a Time in uniform) uniformfloat Time;
const floatPI = 3.1415926; Void main (void) {// The length of a zoom effectfloatDuration = 0.4; // Maximum zoomfloatMaxAmplitude = 0.3; // Indicates the time periodfloattime = mod(Time, duration); // Zoom range [1.0,1.3]floatAmplitude = 1.0 + maxAmplitude * abs(sin(time * (PI/duration))); Gl_Position = vec4(position. x * amplitude, position. y * amplitude, position.zw); gl_Position = vec4(position. x * amplitude, position. y * amplitude, position.zw); TextureCoordsVarying = TextureCoords; }Copy the codeEffect:
Outside the filter
How the OUT-OF-body filter works: It’s a superposition of two layers, with the top layer enlarging and decreasing in opacity over time. The zoom effect is also used here (based on the principle of scaling), and this time we use the chip shader to achieve this effect.
Fragment shader code:
precision highp float; Uniform sampler2D Texture; TextureCoordsVarying; // Texture coordinates varying VEC2 TextureCoordsVarying; // Time (pass a Time in uniform) uniformfloatTime; Void main (void) {// The duration of an out-of-body effect is 1.0floatDuration = 1.0; // Transparency capfloatMaxAlpha = 0.5; // Enlarge the image limitfloatMaxScale = 1.8; // progress value [0,1]floatprogress = mod(Time, duration) / duration; // range of transparency [0,0.5]floatAlpha = maxAlpha * (1.0 - progress); // Zoom ratio [1.0,1.8]floatScale = 1.0 + (maxscale-1.0) * progress; Enlarge / / / / texture coordinates according to the zoom ratio, magnified texture coordinates (0, 0), [0, 1], [1, 1], [1, 0]floatWeakX = 0.5 + (TextureCoordsVarying. X-0.5)/scale;floatWeakY = 0.5 + (TextureCoordsVarying. Y-0.5)/scale; WeakTextureCoords = vec2(weakX, weakY); Vec4 weakMask = texture2D(Texture, weakTextureCoords); Vec4 mask = texture2D(Texture, TextureCoordsVarying); // The Texture of vec4 mask = texture2D(Texture, TextureCoordsVarying); // Default color blending equation = mask * (1.0-alpha) + weakMask * alpha; Gl_FragColor = mask * (1.0-alpha) + weakMask * alpha; }Copy the codeEffect:
Jitter filter
The dithering process is also based on the principle of scaling, and its color value produces a certain deviation. Dither effect: color offset + weak amplification effect
Slice coloring code:
precision highp float; Uniform sampler2D Texture; TextureCoordsVarying; // Texture coordinates varying VEC2 TextureCoordsVarying; // Time (pass a Time in uniform) uniformfloatTime; Void main (void) {// The length of a jitter filterfloatDuration = 1.0; // Enlarge the image limitfloatMaxScale = 1.2; // Color deviation step sizefloatOffset = 0.02; / / progress [0, 1]floatprogress = mod(Time, duration) / duration; // color offset range [0,0.02] vec2 offsetCoords = vec2(offset, offset) * progress; // Zoom range [1.0-1.2];floatScale = 1.0 + (maxscale-1.0) * progress; Vec2 ScaleTextureCoords = VEC2 (0.5, 0.5) + (TextureCoordsVarying - VEC2 (0.5, 0.5))/scale; vec2 ScaleTextureCoords = VEC2 (0.5, 0.5) + (TextureCoordsVarying - VEC2 (0.5, 0.5))/scale; Texture2D (Texture, ScaleTextureCoords +offsetCoords); MaskB = texture2D(Texture, ScaleTextureCoords -offsetCoords); Vec4 mask = texture2D(Texture, ScaleTextureCoords); R,mask.g, maskb. b Note that these 3 color values can be scrambled or arbitrarily used. Gl_FragColor = vec4(mask.r, maskr.g, maskb.b, mask.a); }Copy the codeEffect:
Flash of white filter
How the flash white filter works: Add a white layer on top, and the opacity of the white layer changes over time.
Fragment shader code:
precision highp float; Uniform sampler2D Texture; TextureCoordsVarying; // Texture coordinates varying VEC2 TextureCoordsVarying; // Time (pass a Time in uniform) uniformfloatTime; Void main (void) {// The length of a flash filterfloatDuration = 0.5; // indicates the time period [0.0,0.5]floattime = mod(Time, duration); Vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0); // Amplitude: (0.0,1.0)floatamplitude = abs(sin(time * (PI / duration))); Vec4 mask = texture2D(Texture, TextureCoordsVarying); // use the mixture equation; Gl_FragColor = mask * (1.0-amplitude) + whiteMask * amplitude; }Copy the codeEffect:
Burr filter
Principle of burr filter: tear + faint color offset.
Fragment shader code:
precision highp float; Uniform sampler2D Texture; TextureCoordsVarying; // Texture coordinates varying VEC2 TextureCoordsVarying; // Time (pass a Time in uniform) uniformfloatTime; / / random numberfloat rand(floatN) {//fract(x), returns the decimal part of xreturnFract (sin (n) * 43758.5453123); } void main (void) {// Maximum jitterfloatMaxJitter = 0.06; // The length of a burr filterfloatDuration = 0.5; // Red color offsetfloatColorROffset = 0.01; // The green color offsetfloatColorGOffset = 0.02; // Blue color offsetfloatColorBOffset = 0.035; // Time cycle [0.0,1.0];floatTime = mod(time, duration * 2.0); / / amplitude: [0, 1];floatAmplitude = Max (sin(time * (PI/duration)), 0.0); // Random pixel offset [-1,1]floatJitter = rand(TextureCoordsVarying. Y) * 2.0-1.0; Bool needOffset = abs(jitter) < maxJitter * amplitude; // Get the texture X value. // needOffset = YES, needOffset = YES; // needOffset = NO.floattextureX = TextureCoordsVarying.x + (needOffset ? Jitter: (jitter * amplitude * 0.006)); Vec2 textureCoords = VEC2 (textureX, TextureCoordsVarying. Y); Vec4 mask = texture2D(Texture, textureCoords); Vec4 maskR = texture2D(Texture, textureCoords + vec2(colorROffset * amplitude, 0.0)); Vec4 maskG = texture2D(Texture, textureCoords + vec2(colorGOffset * amplitude, 0.0)); Vec4 maskB = texture2D(Texture, textureCoords + vec2(colorBOffset * amplitude, 0.0)); Gl_FragColor = VEC4 (maskr.r, maskg.g, maskb.b, mask.a); }Copy the codeEffect:
