Creating Wavy shader in spark ar

Hey guys. hope you all doing well.
Man, i was wondering how to create the wavy effect and i guessed it will be handled simply by texture distortion patch and some texture in the shape of waves, But i that was wrong.

Can you guys please help me to how to create this type of effects? I do really want to learn it.



This smoke tutorial should help in understanding how to control the distortion. The distortion patch from the library is a little bit limited, but this tutorial shows how to add some parameters and make a better patch.

FWIW you will also need to scale the texture up so you don’t see the overflow on the edges


Also you can find some info here GitHub - GOWAAA/SparkAR_UV_Manipulation: This repo shows you how you can manipulate UV within SparkAR


Im gonna try it man. Thanks

Appreciate it bro. im gonna try it

Hey jorik. hope u doing great.
Bro i tried this repository and i have to say this is GREAT!

I have only a little problem that i dont know how to fix it.

I’m getting the best result of the waves. But this line that moves which is the edge of camera texture is not what i want.
How can i make it dont move (im not talking about the waves) and get that wavy effect based on static camera texture on it’s own place?
Thanks for all you helps.

here are my patches that im using

you don’t need cosine. here is my version. Also, you need to scale rectangle a little bit.


You can handle the edge problem with multiple ways.

  1. you can make the texture repeat, or mirror. I think you can use Texture Wrapper patch or something like that (i forgot what is the name of the patch, but you can find it in the spark library)
  2. you can mix the wavy UV with normal UV using SDF rectangle as the mix threshold. use smooth step to smoothen the transition, adjust the scale of the sdf, this way, screen edges wont get affected. In case if you don’t know it already, you can swizzle the uv using “xy01” or “rg01” so you can see how the uv looks like. it will shows you red green black and yellow gradients that represents the coordinate. green for the y, red for the x, black means 0, yellow means the combination of x and y value is equal, and the shades is eveything in between. but remember that, it only shows u the value between 0 and 1. which means, -10 will look as black as 0, and 10 will look as red or as green or as yellow as 1. because so be careful to not get confused by what the display shows you. always check out the math calculation in the patch first. this is why sometimes it is necessary to use Clamp patch in the processing pipeline to clamped the value so it only goes from 0 to 1. or using From Range to shrink down the value from whatever value to the 0 and 1 range.
  3. simply scale up and offset your output texture until the edges don’t show up anymore.

if you find the texture wrapper from library not working, try to go inside the patch and replace the texture coordinate attribute with function vector 2, then also replace the texture sampler with composition. if it still not working, try to put shader render pass between the texture and the next processing. (maybe you don’t have to, but this is how i often times troubleshoot some texture sampling problem. like clear cache, data, or restart as first try to troubleshoot phone app problem. lol)

i hope you find this helpful. good luck with your project!


That really helped me bro. I appreciate it

1 Like

That worked man. Thanks♥


hey bro! where am i doing wrong? I don’t understand this part, can you help me?


Is your Function in vec2?

thank you bro!!! That worked :slight_smile:

my last question is why does it pixelate after a certain time?

try to replace the runtime with loop animation or runtime + modulo combo to keep the animation progress in 0 to 1 range.

Runtime will have some precision issues after a while. It’s best to use loop animation for long running stuff

1 Like

could anyone of you guys make this effect? every time i try this uv manipulation project, i end up failed

Just copy this

make sure ur function is set on vec2 and replace Runtime by Animation and adjust it for your needs

1 Like