Advanced Texture Distortion effect

For the past few days I’ve been trying to recreate the texture mix-distortion effect. I followed Josh’s YT tutorial but the results weren’t satisfying, probably because I want to achieve this effect from exact jpg texture (my art poster) not face of the user. If someone is experienced with complex texture distortion please let me know, I wish had greater knowledge in Spark AR but right now I’m not that advanced…

Unfortunately I can’t upload a file reference of the effect I’m trying to get because I get the message that I’m a new user. I will update the thread as fast as possible when I will be able to upload attachments.

I bumped your trust level up so I think you can post images now. I’m curious to see what you mean.

Thank you! Here’s the video reference. This mixing texture is the most important to me.

Sorry, but I still don’t quite understand what you want to achieve here. Correct me if i’m wrong, what i get from the question is that you want the poster to look distorted like Josh’s Perlin Distortion video, is that correct? Is there any specific isolated spot in the poster that you want to isolate? Is there any specific sequence that need to happen step by step? cuz from what i get from seeing the video is that the sphere is trying to hit the poster and the poster moves like it’s made out of liquid, so it’s like rippling effect when something touches the water surface, is that correct?

Right now I’m focusing on the poster only. I don’t need any sequence, just to liquify this texture. I kinda got the result but it’s not that good. As I said I achieved this result with Josh’s tutorial. I attach 2 videos below, with my mouse cursor I circle around this “glitch” stretch of texture that sometimes appear.

Also, the distortion doesn’t apply to the entire area but some part of it making some parts of texture statics for a few seconds. I would like this effect to work on the entire area and without this texture stretch visible. I tried to play with the different values in patch editor but that’s the best result I managed to get - when it comes to recreating the video reference from the previous post.

I’m sorry for bad videos quality but on this forum there’s attachment file size limitation to 4 MB forcing me to downscale the quality of the videos.


You can set your texture to repeat or mirror to avoid those stretch marks

ahh… I see… Well that stretch is basically because there are no more value beyond that bound of the source image so it clips it and stretch it based on the last value available. You can combat this issue by these methods,

  1. if the source image is a tileable/seamless, then tile it before you distort it.
  2. Scale it, if the distortion on edges is not too severe, you can simply scale it up (like crop) that stretched edges.
  3. If the source image is not tileable, and you want full image and don’t want to crop by scaling, then do not distort the edges. make a mask to those edges.
  4. Or make the distortion not going inwards, but outwards.

also by looking at your pipeline, i’m a bit confuse why you do certain stuffs. But just in case you don’t really understand what each patch does to the mechanism, let me help you understand what they did, or maybe someone else who read this topic in the future.

1st, i notice that you also change the timing multiplication after runtime for both axis texture will change how fast the uv scrolls. you multiply it by 0.009 it slows down the animation. also you set up another multiplier for each texture (i don’t know why since they are the same texture anyway but different direction)

2nd i have no idea why you put 2 fragment stage patch like that.

3rd. that multiply after fragment stage is basically a zoom tiling. 1 means 100%. more than 1 means more tile is visible with an anchor/pivot point at top left (0,0). that means 2 is additional 1 tile on each side to make 2x2. 4 means 4x4. 6 means 6x6.

4th. I don’t understand why you set the other modulo to negative. because modulo is the patch that makes it tiling. it makes them repeating in 1 cycle. if you set it to 0.5, then it means it will start tiling after going pass through half way of the texture for both x and y. if its 2, then it means it repeats after 2 cycle length. you can control the x and y axis independently if you use vector 2. if you use number, it will automatically set the same value for the x and the y.

5th. the add value is the one that makes it scrolling. if you use number patch, it will moves diagonally to top left for positive value, and bottom right for negative value. if you want to move it up/down use vector 2, and only change the y value. for side to side movement, animate the x value. it will continuously scorlling since we have modulo in the end of the stream before it goes to UV input.

the adjustment after the blend mode or after the 2 texture combined which in this case is the same texture but different direction, is the one that controls the alignment of the distorted texture. since in your video you don’t use the exposure or contrast patch, you can try to align it inside the texture distortion patch. change the value of the multiply patch after the input node before the fallback.

the distortion works because it reacts to the color value of each pixel of the uv. each color values determine the direction of the distortion. UV is a coordinate system in 2D. U is the X, V is the Y. started from top left at 0,0 coordinate. the maximum value is 1. so the max coordinate is 1,1 which is located at the bottom right corner. with that it said, x and y in RGB channel means Red and Green. Red for the X. Green for the Y. X = 1 means maximum Red, Y = 1 means Maxiumim Green. 1,1 = Yellow because that’s how colors work in RGB color space, and 0,0 = black. why black? because it means 0 Red and 0 Green. No red and no green means no color, that’s why it’s black. So what if it’s negative? it will also black. what if it’s more than 1? then it will be yellow. just more yellow area

This is UV coordinate.

This is what happen if x and y are multiplied so it’s more than 1, It just create more yellow area.

In other word, the 0,0 to 1,1 area is getting smaller. that explains the point number 3 above. thats why it looks zoomed out.

when you put modulo, that yellow area changes to repeat the 0,0 to 1,1 area again and again that makes it tiling to infinity. like this:

if we set the modulo to other value:

that way, if you just want to make the image distorted, you can also simplified it like this:

With that information, you can then hopefully get better understanding of how this distortion works.

If you are interested on how to make something look fluid, try Flowmap shader.
this is a video about it where i first learn it, it’s in Unreal but you can implement it on Spark AR patch editor:

There’s a topic where we’ve discussed about it a little bit that you might want to check out:

Good luck with your project :slight_smile:


Great post, thank you!

Thank you so much!!! I think I got the result. Now I can see my mistakes, I don’t know why I used the same texture twice instead of using seamless noise texture. Now it works.