Skip to content

Instantly share code, notes, and snippets.

@danamuise
Created December 28, 2018 19:38
Show Gist options
  • Save danamuise/91f261ac2ee0576403e341914d230c7c to your computer and use it in GitHub Desktop.
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.
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);
}
@carmandale
Copy link

how do you make this work in Spark AR?

@danamuise
Copy link
Author

Postprocessor shaders have been restricted to internal FB developers, but as of now anyone can use Spark's new custom render pipeline to make renderpasses. You can paste this into your frag shader.

@condingmarkosieno
Copy link

when will be possible to be used in Spark AR? I have been translating some Shaders to the Spark scripting modules but some of them works but many other not.

@carmandale
Copy link

carmandale commented Dec 26, 2019 via email

@naive17
Copy link

naive17 commented Jan 9, 2020

Dana, I am not seeing the custom render pipeline in Spark AR. I am using v78. Can you help with how to use this? Thanks, Dale http://www.groovejones.com/ Dale Carman mailto:dale@groovejones.com | Executive Creative Director Groove Jones http://www.groovejones.com/ | 3900 Willow St., Dallas TX 75226 https://www.google.com/maps/place/3900+Willow+St,+Dallas,+TX+75226/@32.7854205,-96.7710561,17z/data=!3m1!4b1!4m2!3m1!1s0x864e98c077063b57:0x2403d0942b293de2?hl=en 214-674-0616 | tel:+1-214-674-0616 www.GrooveJones.com http://www.groovejones.com/

On Nov 5, 2019, at 10:34 AM, Dana Muise @.***> wrote: Postprocessor shaders have been restricted to internal FB developers, but as of now anyone can use Spark's new custom render pipeline to make renderpasses. You can paste this into your frag shader. — You are receiving this because you commented. Reply to this email directly, view it on GitHub https://gist.github.com/91f261ac2ee0576403e341914d230c7c?email_source=notifications&email_token=AAR5OEZXYCTVXPVG5ARJO3TQSGOBBA5CNFSM4I6U2L72YY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAF3VQC#gistcomment-3074817, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAR5OE3WRWGVNWCU66HHTJLQSGOBBANCNFSM4I6U2L7Q.

Me too, i can't find it

@danamuise
Copy link
Author

danamuise commented Jan 9, 2020

yeah, unfortunately Spark is now restricting shader access to internal devs for security reasons. They are pushing for the new patch based 'visual shader' format in the graph editor. There's several good tutorials around.

@naive17
Copy link

naive17 commented Jan 9, 2020

I think that's a bad decision because a lot of really good shaders could be ported to spark in few minutes

@manolo21099
Copy link

manolo21099 commented Nov 6, 2023

Nice! Thanks for sharing @danamuise :)

MANUEL FERIA | Marketing & SEO Specialist | MAIL: manuel@yordstudio.com | WEB: yordstudio.com
MAIL: manuel@yordstudio.com
WEB: yordstudio.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment