Rain ripple animated texture creation

Kratilim

Hey,

I'm trying to figure out how I would create a looping rain ripple animated texture. Anyone have an idea how I could create such a texture? Here is an example of what I need, I need them at a constant rate, but this movie helps understand what I'm talking about.

[ame="http://www.youtube.com/watch?v=Kc8jum7Pd9E"]Dynamic Paint - Rain Ripples - YouTube[/ame]

Anyone have an Idea?

SHEPEIRO

theres three things to consider.
1 - how you are going to approach making each ripple, there are several ways to do this
- makes a ripple heightmap gradient, then animate the uvs of a cone so this travels through the poly ring from centre to outside
- use a modifier in max or maya to create a geometry ripple
- use a modifier and bake that down to an animated texture
2 - tiling the ripples in 2d space, make a load of ripples that sit in the centre of the texture, then do a strip (offset to make natural) up the left and top side, instance these to the opposite side, then create some that sit on the corner and instance these around all four corners
3 - tiling in time...trickier in my experince though im not an animator, but can be thought of as the same as the 2d tiling make an set that works in the middle of the set of frames (none at begining or end), then make a set that covers the end (middle of ripple set sits on end of intended anim length) copy these and move all the keyframes so that they sit in the same position relative to the begining (this way the first frame should follow on from the last)

hope that helps... technically its pretty hard... artisticaly fairly too, if your going to do it in reasonable cost (size of texture and length) you have to be very carefull of introducing bad obvious patterns in 2d and in time

Kratilim

Thanks for the tips. I'm looking into doing the ripples as a flipbook animation and incorporating it into my master shader in UDK, this way I'm hoping the ripples will stay on the cheap side to render in real time.

SHEPEIRO

whatever the end format is the creation of the frmaes is the hard part.

Eric Chadwick

Blur Studios made a procedural texture for 3ds Max that does this. And it loops, IIRC.
http://maxplugins.de/max2012.php?search=animated%20rain&sort=Author
We used this for looping rain drips for the Bladerunner game. You can see it in action here... http://ericchadwick.com/img/bladerunner.html

sprunghunt

You could use pure math to do this. A dot product with a sine multiplied by time might do it. Repeat and multiply this over the surface a few times as distortion and you're done.

To make animated maps in max or Maya you can just use a few toruses with an animated radius and render that to frames.

Xoliul

I tried to do this for my Brawl entry.
I sorta concluded that I'd either have to generate a proper tiling, animated texture like Eric is suggesting, or do it with overlaying particles. You can't have a single ripple texture and randomly have that appear on a surface with a shader.

For the particle system:
-Get a particle system that shoots down invisible raindrops (the rain itself should just be done with planes, a particle per drop is crazy).
When the invisible drop particles hit the ground, they generate a particle event, that spawns new, visible particles.
-These new particles are the ripple, which is just a sprite aligned with the ground, and possibl a slpash mesh. The ripple you can scale out to fake the ripple wave, and have it randomize. The splash is just a cone with a shader that scales non-uniformly.

Alternatively... There's physics water in Unreal, that can actually do raindrops as well. It's just not too great on large areas and you can't mask it properly in puddles. I gave up on it pretty quickly. It is much easier to get something visible than the above method though.

TorQue[MoD]

For anyone else who stumbles upon this, the math to do this in UE4 is here courtesy of dillzilla - https://answers.unrealengine.com/questions/306033/radial-water-ripple.html

Getting it to tile across a material is what I'm currently working on. I'll post here when I figure it out.

RN

Can you post a screen of the result of that network?

Mark Dygert

https://www.youtube.com/watch?v=ymAuk1z6f-g

TorQue[MoD]

Thanks Mark! While this effect does look more realistic than ripples, my game has a stylized cartoon look to it so I want the expanding circles specifically. I ended up creating an animation in max and then using premiere to put it all together as a seamless texture. After all that effort though I realized that it'll probably look better if I use particles as the tiling was too obvious with a flipbook texture.

RN, it literally just forms a bunch of concentric circles that animate indefinitely. You'd need to mask them to get them to fade properly though so I'm not sure if it'd work as well as I thought. You're welcome to my sprite sheet if you think it would work for you though...
http://apeirogon-games.com/Water_RippleSheet.png
60 frames of seamlessly tiling (It's not seamless in the sheet because they're different frames) 512x512 ripples but sadly as I said the tiling pattern is a bit too obvious. Just plug the texture into a flipbook node, plug a constant 1 into the UV2 pin and then plug the result into both the diffuse color and the opacity and it's good to go.

oglu

BOSS the new maya ocean tool does create EXR files during caching...
http://help.autodesk.com/view/MAYAUL/2017/ENU/?guid=GUID-92200CA4-FE0C-4052-8F7A-861EAC46D2C7

if you feed the ocean plane with particle system (rain) it will output a ripple texture...

Obscura

Xoliul said:

I tried to do this for my Brawl entry.
I sorta concluded that I'd either have to generate a proper tiling, animated texture like Eric is suggesting, or do it with overlaying particles. You can't have a single ripple texture and randomly have that appear on a surface with a shader.

For the particle system:
-Get a particle system that shoots down invisible raindrops (the rain itself should just be done with planes, a particle per drop is crazy).
When the invisible drop particles hit the ground, they generate a particle event, that spawns new, visible particles.
-These new particles are the ripple, which is just a sprite aligned with the ground, and possibl a slpash mesh. The ripple you can scale out to fake the ripple wave, and have it randomize. The splash is just a cone with a shader that scales non-uniformly.

Alternatively... There's physics water in Unreal, that can actually do raindrops as well. It's just not too great on large areas and you can't mask it properly in puddles. I gave up on it pretty quickly. It is much easier to get something visible than the above method though.

Its actually possible to have a single ripple texture or node setup, and have that randomly appearing on the coordinates. You can use vector noise to generate random offset values that you can give to X amount of samples of the ripple. If you would put all this into a custom node, you could just type in how many ripples you want. 

I also tried a tiling flipbook earlier, it worked fine, but hard to create. I would suggest the pure math based stuff with the sine suggested by sprunghunt. That works nicely.

The particle solution with a single ripple material also works.  Maybe this is one of the best way, because then you can also adjust parameters with the curves over time easily.

RN

Since it's a circular shape you can use a simple radius logic in your pixel shader. With this you can shave the sine calls for some extra performance.
Using particles (ground-oriented quads), you can supply the time and the radius of each particle as uniforms and grow them in the vertex shader and output the circle shape in the pixel shader based on the UV coordinates of the quads.

Get the length of the 2D vector from the centre of the UV space (0.5, 0.5) to the UVs of the pixel. If that length is within the region of the circle border (it's bigger than the small radius and smaller than the big radius) then output a white opaque colour, otherwise discard the pixel or make it transparent.



If you don't want to use an IF in your shader (since it introduces branching), you can use a 1D texture that represents this IF test: black for negative, white for positive. If you want the radius to change with time, you can use a square texture to store several 1D "if" textures. This was used in a different effect like this:
https://simonschreibt.de/gat/fallout-4-the-mushroom-case/

Obscura

Here is an example with a 1d gradient texture. This would work with the particles setup.

RN

I wanted to try it in Blender, it's not animated though:

TorQue[MoD]

I'm back to attempting to solve the same problem here and have been playing around with multiple different options including generating the ripples with pure math. Getting a single ripple is easy but how do you adjust it to tile? The tutorial that Mark linked to above had a method that no longer works in UE 4.18.

Also as I discovered before, it was too hard to create a good flipbook animation due to the obvious tiling but now I'm thinking that you could do a combination of a flipbook and simple ripple meshes (IE planes with the flipbook texture applied) that you could paint onto the scene using the foliage system in UE4. This way you have manual control that allows you to fix the poor tiling that you get with a standalone flipbook and then you also get the bonus of being able to cull out the ripples based on distance and instancing that you get with the foliage system. I'll post my results in a few days once I get it working to my liking. 

Dash-POWER

Not sure if this will help you but I have found a good tutorial: https://deepspacebanana.github.io/deepspacebanana.github.io/blog/shader/art/unreal%20engine/Rainy-Surface-Shader-Part-1 or slides from GDC2018 might be useful https://drive.google.com/file/d/1D3Fw4kfKymimXftyGdoQ7wU4E3HsCtG5/view

You can download .pptx (including videos) from: https://tech-artists.org/t/gdc-2018-ta-bootcamp-presentations/9743

Eric Chadwick

@DeepSpaceBanana (nice one, man)

DeepSpaceBanana

Eric Chadwick said:

@DeepSpaceBanana (nice one, man)

Thanks! I'm writing up the second part of that tutorial now, ironically as I was writing it I found an even simpler solution for rainy surfaces, where the entire thing can be wrapped into a post process material.

TorQue[MoD]

Ok so I'm quite happy with the effect I came up with. I may have gone a little overboard with the number of separate ripples in the flipbook sheet (16, 128x128 ripples on a 512x512 sheet at 60 frames of animation means a flipbook texture at 3072 x 5120) but I figured 4 individual ripples on a 256x256 sheet wouldn't be enough variation.

Here's a video of the effect:
[video]https://youtu.be/H04ZwhT85Bw[/video]

And you can also download the entire package for use in your own UE4 project from my website: http://torquemod.com/RainRipples.rar

Even though my game is clearly a cartoon style, this effect will look great in photo realistic projects as well as I made the ripple effect as a normal map. Just turn off the extra color in the material for more realistic projects.