Created
December 28, 2018 19:38
-
-
Save danamuise/91f261ac2ee0576403e341914d230c7c to your computer and use it in GitHub Desktop.
This is a GLSL post processor frag shader used in AR Spark (Facebook Messenger AR effects). It creates a random UV shaking effect.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
varying vec2 hdConformedUV; | |
varying vec2 uv; | |
uniform sampler2D inputImage; | |
uniform int passIndex; | |
uniform vec2 uRenderSize; | |
uniform float uTime; | |
float random (in vec2 st) | |
{ | |
return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123); | |
} | |
float noise(in vec2 st) | |
{ | |
vec2 i = floor(st); | |
vec2 f = fract(st); | |
float a = random(i); | |
float b = random(i + vec2(1.0, 0.0)); | |
float c = random(i + vec2(0.0, 1.0)); | |
float d = random(i + vec2(1.0, 1.0)); | |
vec2 u = f * f * (3.0 - 2.0 * f); | |
return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y; | |
} | |
#define octaves 3 | |
float fbm(in vec2 p) | |
{ | |
float value = 0.0; | |
float freq = 1.13; | |
float amp = 0.57; | |
for (int i = 0; i < octaves; i++) | |
{ | |
value += amp * (noise((p - vec2(1.0)) * freq)); | |
freq *= 1.61; | |
amp *= 0.47; | |
} | |
return value; | |
} | |
float pat(in vec2 p) | |
{ | |
float time = uTime*0.75; | |
vec2 aPos = vec2(sin(time * 0.035), sin(time * 0.05)) * 3.; | |
vec2 aScale = vec2(3.25); | |
float a = fbm(p * aScale + aPos); | |
vec2 bPos = vec2(sin(time * 0.09), sin(time * 0.11)) * 1.2; | |
vec2 bScale = vec2(0.75); | |
float b = fbm((p + a) * bScale + bPos); | |
vec2 cPos = vec2(-0.6, -0.5) + vec2(sin(-time * 0.01), sin(time * 0.1)) * 1.9; | |
vec2 cScale = vec2(1.25); | |
float c = fbm((p + b) * cScale + cPos); | |
return c; | |
} | |
vec2 Shake(float maxshake, float mag) | |
{ | |
float speed = 20.0*mag; | |
float shakescale = maxshake * mag; | |
float time = uTime*speed; // speed of shake | |
vec2 p1 = vec2(0.25,0.25); | |
vec2 p2 = vec2(0.75,0.75); | |
p1 += time; | |
p2 += time; | |
// random shake is just too violent... | |
//float val1 = random(p1); | |
//float val2 = random(p2); | |
float val1 = pat(p1); | |
float val2 = pat(p2); | |
val1 = clamp(val1,0.0,1.0); | |
val2 = clamp(val2,0.0,1.0); | |
return vec2(val1*shakescale,val2*shakescale); | |
} | |
void main() | |
{ | |
float maxshake = 0.1; // max shake amount | |
float mag = 0.5+sin(uTime)*0.5; // shake magnitude... | |
// *temp* , We will calc shakexy once in the vertex shader... | |
vec2 shakexy = Shake(maxshake,mag); | |
vec2 uv_ = uv; | |
uv_ *= 1.0-(maxshake*mag); | |
vec3 col = texture2D(inputImage, uv_ + shakexy).xyz; | |
gl_FragColor = vec4(col, 1.0); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice! Thanks for sharing @danamuise :)
MANUEL FERIA | Marketing & SEO Specialist | MAIL: manuel@yordstudio.com | WEB: yordstudio.com
MAIL: manuel@yordstudio.com
WEB: yordstudio.com