Write in front, the filter effect shown in this article, the realization of a variety of ways, here only to provide a reference idea.Copy the code

1. The zoom Scale

First, the effect picture:As can be seen from the renderings, the size of the picture changes periodically over time. So we can use sinusoidal trig functions based on what we foundsinTo help us achieve this effect.

The sine function varies as follows, with values between [-1,1].

To scale the image, just change the vertex coordinates in the vertex shader. The mind map is as follows:

Implementation code:

// Attribute vec4 Position; // Attribute vec2 TextureCoords; TextureCoordsVarying; // Texture coordinates varying VEC2 TextureCoordsVarying; // Timestamp uniform float Time; //π const float PI = 3.1415926; Void main (void) {float duration = 0.6; Float maxAmplitude = 0; float maxAmplitude = 0; //maxAmplitude * abs(sine (Time/duration * PI); //Time/duration * PI Float amplitude = 1.0 + maxAmplitude * abs(sin(Time/duration * PI)); float amplitude = 1.0 + maxAmplitude * abs(sin(Time/duration * PI)) Gl_Position = vec4(position. x * amplitude, position. y * amplitude, Position. Position.zw); TextureCoordsVarying = TextureCoords; }Copy the code

2. “I’m a SoulOut.

Effect:Analysis of ideas:

  • The out-of-body effect, which looks like a magnification and transparency effect on top of the original layer
  • Again, over time, the layer enlarges and the opacity decreases
  • The final effect is to blend the two layers together

Mind mapping:

Implementation code:

precision highp float; uniform sampler2D Texture; varying vec2 TextureCoordsVarying; // Timestamp uniform float Time; Void main (void) {float duration = 0.7; Float maxAlpha = 0.4; Float maxScale = 1.8; Float progress = mod(Time, duration)/duration; float progress = mod(Time, duration)/duration; // Transparency (0-4) float alpha = maxAlpha * (1.0 - progress); Float scale = 1.0 + (maxscale-1.0) * progress; float scale = 1.0 + (maxscale-1.0) * progress; // Zoom in on the texture coordinates // Zoom in on the distance between the x value of the texture coordinates corresponding to the vertex coordinates and the point in the texture. Float weakX = 0.5 + (TextureCoordsVarying. X-0.5)/scale; float weakX = 0.5 + (TextureCoordsVarying. X-0.5)/scale; Float weakY = 0.5 + (TextureCoordsVarying. Y-0.5)/scale; float weakY = 0.5 + (TextureCoordsVarying. Y-0.5)/scale; WeakTextureCoords = vec2(weakX, weakY); weakTextureCoords = vec2(weakX, weakY); Vec4 weakMask = texture2D(Texture, weakTextureCoords); Vec4 mask = texture2D(Texture, TextureCoordsVarying); // Implement color mixing equations in GLSL. Default color mixing equation = mask * (1.0-alpha) + weakMask *alpha // The blended color is assigned to gl_FragColor gl_FragColor = mask * (1.0-alpha) + weakMask * alpha; }Copy the code

3. Shake Shake

Effect:Analysis of ideas:

  • It has an amplification effect
  • There’s a color offset
  • Change with change

Mind mapping:Code implementation:

precision highp float; uniform sampler2D Texture; varying vec2 TextureCoordsVarying; uniform float Time; Void main (void) {float duration = 0.7; Float maxScale = 1.1; // Float offset = 0.02; Float progress = mod(Time, duration)/duration; // Offset 0 ~ 0.02 vec2 offsetCoords = vec2(offset, offset) * progress; Float scale = 1.0 + (maxscale-1.0) * progress; float scale = 1.0 + (maxscale-1.0) * progress; ScaleTextureCoords = VEC2 (0.5, 0.5) + (TextureCoordsVarying - VEC2 (0.5, 0.5))/scale; ScaleTextureCoords = VEC2 (0.5, 0.5) + (TextureCoordsVarying - VEC2 (0.5, 0.5)); Offset = texture2D(Texture, ScaleTextureCoords + offsetCoords); // Offset maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords); Vec4 mask = texture2D(Texture, ScaleTextureCoords); Gl_FragColor = VEC4 (maskr.r, mask.g, maskb.b, mask.a); }Copy the code

Flash white ShineWhite. 4

Effect:

Analysis of ideas:

  • It’s like a white layer on top of the original layer
  • Also over time, the white opacity changes
  • Blend the texture color with white

Mind mapping:

Implementation code:

precision highp float; uniform sampler2D Texture; varying vec2 TextureCoordsVarying; uniform float Time; Const float PI = 3.1415926; Void main (void) {float duration = 0.6; float time = mod(Time, duration); // Define a white color mask vec4 whiteMask = VEC4 (1.0, 1.0, 1.0, 1.0); float amplitude = abs(sin(time * (PI / duration))); vec4 mask = texture2D(Texture, TextureCoordsVarying); Gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude; }Copy the code

5. Burr Glitch

Effect:Analysis of ideas:

  • It changes over time using the sine function
  • Transverse tearing occurs, and only color shifts in the X-axis direction are considered
  • The location of the tear is random
  • Only a few positions are offset. Consider setting a judgment threshold

Mind mapping:Code implementation:

precision highp float; uniform sampler2D Texture; varying vec2 TextureCoordsVarying; // Timestamp uniform float Time; // const float PI = 3.1415926; Float rand(float n) {return fract(sin(n) * 43758.5453123); float rand(float n) {return fract(sin(n) * 43758.5453123); } void main (void) {float maxJitter = 0.06; Float duration = 0.3; float duration = 0.3; // red color offset float colorROffset = 0.01; // Green color offset float colorBOffset = -0.025; Float time = mod(time, duration * 2.0); float time = mod(time, duration * 2.0); Float amplitude = Max (sin(time * (PI/duration)), 0.0); float amplitude = Max (time * (PI/duration)); // Random offset range of pixels [-1, 1] float jitter = rand(TextureCoordsVarying. Y) * 2.0-1.0; Bool needOffset = ABS (jitter) < maxJitter * amplitude; Float textureX = TextureCoordsVarying. X + (needOffset?) float textureX = TextureCoordsVarying. Jitter: (jitter * amplitude * 0.006)); Vec2 textureCoords = VEC2 (textureX, TextureCoordsVarying. Y); Vec4 mask = texture2D(Texture, textureCoords); Veckr = texture2D(Texture, textureCoords + Vec2 (colorROffset * amplitude, 0.0)); Vec4 maskB = texture2D(Texture, textureCoords + Vec2 (colorBOffset * amplitude, 0.0)); // Color is mostly torn, red and blue parts, so only adjust red gl_FragColor = vec4(maskr.r, mask.g, maskb.b, mask.a); }Copy the code

6. Illusion Vertigo

Effect:Analysis of ideas:

  1. According to the effect analysis, it actually seems that there are multiple red residual shadows around the center point, which is the displacement. Consider using the sin trigonometric function
  2. The original image magnification
  3. Duplicate multiple layers
  4. Duplicate the layer in red
  5. The red opacity of the copy gradually increases until it disappears
  6. The layers are periodically shifted around the center point

Mind mapping:Code implementation:

precision highp float; uniform sampler2D Texture; varying vec2 TextureCoordsVarying; uniform float Time; Const float PI = 3.1415926; // Duration of an illusion const float duration = 2.0; // This function can calculate the exact position of the picture at a certain time. It can be used to calculate the position of the picture at a certain time. Vec4 getMask(float time, vec2 textureCoords, vec4 getMask(float time, vec2 textureCoords, Float padding) {vec2 translation = vec2(sin(time * (PI * 2.0 / duration)), cos(time * (PI * 2.0 / duration))); vec2 translationTextureCoords = textureCoords + padding * translation; vec4 mask = texture2D(Texture, translationTextureCoords); return mask; } // This function can calculate the layer created at a certain time, Float maskAlphaProgress(float currentTime, float hideTime, float startTime) { float time = mod(duration + currentTime - startTime, duration); return min(time, hideTime); } void main (void) {// convert the passed timestamp to a period, the range of time is [0,2] float time = mod(time, duration); // Float scale = 1.2; // Float padding = 0.5 * (1.0-1.0 / scale); Vec2 textureCoords = VEC2 (0.5, 0.5) + (TextureCoordsVarying - VEC2 (0.5, 0.5))/scale; Vec4 mask = getMask(time, textureCoords, padding); // Float hideTime = 0.9; // Time interval float timeGap = 0.2; // Note: only the red transparent channel value is retained, because the illusion effect remains red // Phantom residual data // Max RGB alpha // The new layer's R transparency float maxAlphaR = 0.5; // New layer G opacity float maxAlphaG = 0.05; // New layer B transparency float maxAlphaB = 0.05; Float alphaR = 1.0; // R float alphaG = 1.0; // G float alphaB = 1.0; // B // The final layer color vec4 resultMask = vec4(0, 0, 0, 0); For (float f = 0.0; f < duration; f += timeGap) { float tmpTime = f; Vec4 tmpMask = getMask(tmpTime, textureCoords, padding); // The layer created at some point, Float tmpAlphaR = maxAlphar-maxAlphar * maskAlphaProgress(time, hideTime, tmpTime)/hideTime; float tmpAlphaR = maxAlphaR - maxAlphaR * maskAlphaProgress(time, hideTime, tmpTime)/hideTime; float tmpAlphaG = maxAlphaG - maxAlphaG * maskAlphaProgress(time, hideTime, tmpTime) / hideTime; float tmpAlphaB = maxAlphaB - maxAlphaB * maskAlphaProgress(time, hideTime, tmpTime) / hideTime; ResultMask += vec4(tmpmask. r * tmpAlphaR, tmpmask. g * tmpAlphaG, tmpmask. b * tmpAlphaB, 1.0); AlphaR -= tmpAlphaR; alphaG -= tmpAlphaG; alphaB -= tmpAlphaB; } // Final color += RGB * transparency of the original texture resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0); // Fill the pixels with the final color gl_FragColor = resultMask; }Copy the code

The demo here