A question about loop animation on textures

Hello everyone. I’m trying to do floating clouds and stars freckles on the face, but I’m not really sure how to do that. I read somewhere that I need to do a loop animation on the textures I’m using( to use animated normal map), but unfortunately the girl that posted on the spark ar Facebook group didn’t gave any further explanation on how to do that. Is this possible with patch editor and how?
If anyone knows how to do floating textures on the face mesh, please share the info!
Thank you :two_hearts:

4 Likes

Hi Mariya! You can do this pretty simply with a few patches and a tile-able texture (make sure you set the tiling mode to repeat). The basic setup is to use a loop animation that connects to a 2d transform pack.

5 Likes

Thank you so much Josh, It worked!
I really appreciate your help, it means a lot :heart:

2 Likes

I can imagine more ways to extend this functionality with masks!
So basically that 2D transform pack and that texture transforms will manipulate UV coordinates, right?

Yeah, you can do a whole lot more with texture coordinates + texture sampler (or function + composition). Here’s some neat-o patterns in the book of shaders.

3 Likes

What a gem! Thank you for sharing.

1 Like

I notice that depending the duration of the loop animation the texture jump when it end the loop. I mean the final position doesnt match the initial position. There is a way to create a seamless loop ?

What does your setup look like? The duration shouldn’t affect it since the “progress” value always goes from 0-1.


Looking now I think the transition is the problem and I am using pivot instead of translation

Ah, yeah and since you are using a Transition node, it changes the output range. I think the scale might have something to do with it too. I’m not sure exactly what order those transforms are applied in.

Hi, I just finished experimenting with loop animation to move a texture so it looks like it’s flowing. I also found the jump problem. I know we can just reverse it but it will also reverse the flow and won’t look continuous, so to work around that, i create a duplicate flowing texture, but with a delay half of the duration of the loop, and mix them together. after that, modulate the alpha 1 to 0 to 1 or mirrored with sinusoidal curve. the reason behind that is so when the jumping occurs, that texture is in 0 alpha or in other word invisible. and filled with the other duplicate. then when the duplicate is going to jump, the first texture that was invisible is gradually fading in to cover the jump moment of the duplicate, it will goes on and on to create illusion that it is continuous or a seamless loop. I tried to use runtime but i kinda have a love hate situation with runtime since it tends to drop the fps over time and sometimes troublesome in some device when i tested them. here is a clip of how my routing works. Any feedback is very much appreciated.

3 Likes

I trying to understand what the pacthes are doing. I will try to incorporate this in my filter and see if it look good. If I am using the animation time with 8 seconds my delay should also be 1 second ?

1 Like

Nice solve! This is also how flowmaps work!

2 Likes

sorry if its choppy in the video. My laptop is not good enough to handle multiple chrome with multiple tabs, spark ar and Obs at the same time. but it looks seamless in person. no jump cut visible. i hope it helps

all you need to focus on is simply the loop animation routing. I set up a value named “duration” on the left connected to sender patch so i can change the duration in multiple spot at once except for delay patch in the center (a bit left bottom from the center) because unfortunately the duration in delay patch (and exponential smoothing) doesn’t have duration input node to connect. so i have to set it manually. it’s simply just half f the duration value. also look at the bottom center, that loop animation is for the crossfade. that also half of the duration.

the top pipe line is just the distortion setup.
the middle is for 2 animation. the original and the delayed animation.
the bottom pipeline is the crossfader pipeline where.
the bottom left corner is just a switch to activate all of those process and also to stop plus reset.
the right side is the output.
the whole process ends in the Mix patch. after that is just color adjustment and another mix patch for the input of the distorted texture. and yes you heard that right, the input texture that get distorted is in the end of the pipeline. the other pink/magenta input nodes are for the texture that i use to distort the main texture.

also if you wonder what that disconnected patch in the middle (the patch on the middle top of all that pipeline) is a constant bias patch, it just stylistic preference if that is conected to the multiply, it will make the flow flows in an organized fashion. like it just stay still but flowing, where if it disconnected, it will create that wavey distortion. i kinda like that, so thats why i disconnectd it but leave it there.

Note: you can also use procedural or tiling method like in @josh_beckwith’s Video on youtube about perlin distortion. In fact, I learn this method by watching that video and messing around with the project file that he shared there.

I hope you find it useful. Good luck :smiley:

3 Likes

Thanks Josh! Man… I’m so happy to hear that from you. Thanks man! I learn a lot from you. Can’t wait for your next spark AR video. Teach me senpai! :pray: :pray: :pray: :pray:

Wow I found this thread really insightful, I’m messing around building shaders too!

I thought I would just leave this small contribution:

You can use something like modulo(X + 0.5; 1) to avoid using the delay patch (you can’t control the delay dynamically)

You could also try using something like cos/sin x (and work with pi) but the outcome wouldn’t be the same because they are not linear

Check out a visualisation here:
[Remember the range we care about is 0-1]

3 Likes

Hey that’s a neat graph tool! I end up using this combo a lot. It’s a mirrored behavior that will give you seamless loops.

mod(abs(x - .5) * 2, 1)

Screen Shot 2020-10-10 at 4.34.39 PM

2 Likes

Man… I love it when someone smarter and better than me provide better alternative. Thanks man!

Is that mirrored behaviour going to make the animation/transition played in reversed?

Smarter? Haha, dude I wasn’t kidding when I said I found this insightful. You taught me some stuff here, I just added a small thing :slightly_smiling_face::heart:.
Thanks

1 Like