Home Technical Talk

Animating Normal maps to achieve rain drops in 3DS Max or Unity3D

13

Replies

  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Ah okay. Really thanks for your replies and help. now the refraction works and I won't need 2 meshes for this. (reducing the number did worked,though) However, One more thing is remained for the windshield, and that is real time reflection. However there is a bit more refraction for the glass but is okay, in my opinion.

    2igdc39.jpg

    EDIT: I've added a multiply node before connecting a node to the albedo one and I multiplied color with scene color, so that we can have a tint color for the glass. Also I haven't used a mask node for this at all.
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Here is the physics for the metaballs, now they react way better than before.
    UnnaturalDarlingBlackcrappie.gif

    However after I made that GIF, I've added a spc map so that it appears that those water drops have shadows.
    o05q10.jpg
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    image_4.img.jpg

    That is a screen shot of a wet car body in NFS video game. So I just surfed internet to find a normal map or specular map of something like this wetness (water drops of the car body, I mean), do you have something like that guys?
  • remotecrab131
    Offline / Send Message
    remotecrab131 polycounter lvl 5
    Say if this is done with textures, then how is the game environment affecting all the raindrops. It must be a long algorithm for the effect, and probably take a lot of iterations to finally have that realistic effect.

    With physics particles however, each raindrop is already a particle, and they get affected by physics, so when car move forward fast, they will be blown by the wind up to the top of the car. Also works with the wiper or anything that is physically simulated.



    With material shader, if you can bake DuDv map off the motion of the wiper, you might be able to get similar effect. With a flip book mask texture that follows the motion of the wiper, you can simulate the wiper effect quite ok, but it won't be too realistic.

    Scripting something that creates raindrops and store them individually, then take the wiper in to effect to control raindrops' movement, even physics. This might be the only realistic approach other than particles.



    That NFS car shot. Realistically the raindrops on the side would be tilted instead of vertically pointing down. Cuz that car is clearly moving fast.


    Note:

    2 flow map(DuDv) with one transition map(a map that can be used as an linear interpolation mask for the 2 flow map)

    One flow map for the speed at 0, another flow map for the speed at max. This would simulate the physics of speed affecting raindrops. Use speed with transitional map to mimic the effect of physics maybe.

    Wiper motion mask, so this will eat out the raindrops frame by frame, (flipbook) but I have no idea how the new raindrops can re-appear realistically after the wiper mask.

    The actual raindrop normal map. It will pan as to create a effect of gravity, then the 2 flow map will determine how they flow, so it's not straight downward. and blah blah...

    If the raindrop normal map can be scripted to the way real raindrop appears on the windshield, then these whole thing might be a good 2D solution.

    In the end, what matters isn't the totally realism, as long as it look good, believable, it should be good. And it all depends on what your final product is aiming at.
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Say if this is done with textures, then how is the game environment affecting all the raindrops. It must be a long algorithm for the effect, ...
    Thanks for your informative and great post, but I don't want water drops of the car body affected by physics (simply I want them be static), that is too much for my simple game. that's why I need simple normal map of water drops on a metal or something that is similar to the car wetness in the screenshot of the NFS, I've searched internet but have not found a good one.

    But about the windshield, great tips thanks. will think about them when possible. Also some one in Unity3D forum wrote this:
    Mauri wrote:
    I found an interesting note on this Eurogamer website:
    "We'll be adding things like screen-space effects to actually get all the water droplets on the screen. We'll get the wind-screen wipers working [too], that'll have a full simulation pass so that you get proper droplets," Perkins explains, using his own, private debug build to demonstrate. "It's all modelled. Because of the atmospherics system, everything has to be modelled. It all sits in and writes at the same level. It's one of those things that's really subtle and helps tie it all in."


    Anyways, I think the metaballs effect is okay for the windshield, what do you think?
    3o85xwD8M1dlZskfmM.gif
  • remotecrab131
    Offline / Send Message
    remotecrab131 polycounter lvl 5
    151669.png

    The steering wheel movement is amazing

    I never used meta balls so I have no idea what they can end up looking like. So far I think it's functioning quite ok, just a little bit of glitchy. I probably won't ever touch it. :P
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Thanks man, Glad you've liked it.
    The steering wheel movement is amazing
    Hehe... yup, it is rotating 1150 degrees (as real life cars) but even my father says what the heck is that steering doing?! :P
    I never used meta balls so I have no idea what they can end up looking like. So far I think it's functioning quite ok, just a little bit of glitchy. I probably won't ever touch it. :P
    :D Well at least you liked that so that's OK, I think. I'll try (if possible) to make them better.

    For now, I am trying to make the flipbook node.
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Making the flipbook node looks easy, yet there are problems with realflow, as soon as I solve them I will make a tutorial for it, so you guys can have fun with it. meanwhile I am making an other game and I can't wait to show you, yet I am making normal maps for this game and I've found this in Google, that's a good image to start with, I should make a normal map for it and then apply it to the cars in my game.
    Click to see the image.
    Do you know a better image? (I need it to make the car body like the NFS's when raining)
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Here's what I've got for the car, I've shared the nodes of this custom light shader so I need your thoughts about this. (This is forward rendering and not alpha blended)
    2vxr6u1.jpg
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Need for speed style :D
    28k6el0.jpg

    Here is with the panner enabled, the shader doesn't look good IMO,though. any suggestions to make it sexy?
    IdealisticHideousCrocodileskink.gif
  • remotecrab131
    Offline / Send Message
    remotecrab131 polycounter lvl 5
    Dude, the still image looks kinda good, but the actual panning.. Nah I think you still need a flow map for the flip book raindrop normal. Since you have the model, the flow map should be easy to bake, but I have no idea how.
  • tadpole3159
    Offline / Send Message
    tadpole3159 polycounter lvl 12
    is this any good to you? you can even download the scene used in the tutorial
    http://www.3dtotal.com/index_tutorial_detailed.php?id=2068#.VedeO5exV0w
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    @tadpole3159 I'll look into it thanks.
    @remotecrab131 Thanks for the info, I'll do something for it.
    _____________________________________________________________________________________
    It's been around 9 months and schools are now closed and now I'm here to continue this project (for fun and part time only). Unfortunately Obscura deleted all his videos here but not a problem for now, I'm going to post messages step by step as I develop the car shader. So lets start (I'll be posting new messages here).

    Now before I start, I should say that:
    0) I tried to use only one huge texture atlas for my 3D car models to reduce draw calls. So that means the glasses of my 3D car and also the plastic bumpers of my 3D car use (and share) only one texture.

    1) My shader editor is ShaderForge.
    2) I'm going to use  a sphere (instead of my 3D car) first.
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    So first thing first, is to setup reflection probes and lighting.
    Here is the scene that I'm working with in Unity3D, I guess this is a good scene for it.

    This is a scene that I modified a bit, It comes from RTP Relief Unity Asset Package.
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    The game engine I use is Unity3D. I'm using ShaderForge as my shader editor. At first I'm using a sphere then I'll use a 3D model of a car that I've made.

    Going through car paints, we will see there are 3 main types: Glossy, Metallic, Matte. Which you can use the metallic type for creating the 4th type of car paint which is called "Pearlescent". So our car shader should be able to create all of them, here is how I am making the shader and gonna post it step by step until we reach the animated normal maps. Mean while, I'd like to hear feedback from professionals.

    First I should recreate a steel material here is how I did it:

    Now I'll add a texture map input for the shader to start creating the metallic paint, for the metallic paint, we need a normal map to recreate the "flakes" effect.
    Using normal maps for creating the flakes didn't work so I had to make a black-white texture for it.

    Here is the result, I also added a "IsMetallic" switch so that I can use it when player chooses a paint type.

    It is easy to recreate the matte paint from this shader by script now. But for the Pearlescent paint, I should do something. I'll do that next.
    UPDATE: Now Pearlescent paint has been added. This is what the whole shader looks like and the next image after that is the result. I'm happy with that. Still the tough part is not anywhere near... the tough and cool part, I meant.


  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Here is the car, it's actually a 3D model of my real car. I've made it last year, I should add a dirt map and the other maps all in the shader (if possible) to increase performance. I'll be updating my car paint shader according to the goal, soon. step by step in this thread.
    Please tell me if I'm doing anything wrong.

    (The car is shown with Unity5 Standard shader and should be replaced with my shader soon)

  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Okay, I think it is better to skip posting of How to make car paint shader and go back straightly to the topic, so I'm gonna skip the details of the updated shader and only share the results with you. Then I should start adding the animated normal maps in it and send posts about its details here.
    So here is the results up to now:







    Hopefully the next post is about animated normal maps (for water drops of the car body).
    If you noticed the lack of opacity, Actually it is because of the deffered shading I can't use opacity with my custom shader and I will have to find a solution for it soon.
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Today ladies and gentelmen is the day, it's time to make the animated normal maps... the main topic here.
    So lets make a new forward transparent shader. We need a plane or a good UV mapped windshield.
    And now I should make a flip book shader, thanks to Obscura and ShaderForge wiki, I've made it.
    Here is the result:


    I was lazy to put the numbers and the lines correctly on the texture.
    Here is the texture atlas:

    And here is the code:
    Next I should add this shader into the shader and then I should add the 3D water effect that I've made to the shader.

  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    I've added the flipbook effect to the shader and also added a "switch". So when it rains, a script enabels the switch and the rain effect appears. Here is a sample, the rain texture is too low quality but once you use a better quality texture, it'll be great.


    (http://gifyu.com/image/ZXc)
    Animated normals and dynamic dirt map.

    Next part is the piece of cake part, I should add normal masks for the wiper effect.
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Bingo!! Every thing of this project is almost done. Look at these sweet screenshots.


    What do you think about this? Please note that this is incomplete.
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Here is a bit of having fun with the car paint shader, This is indeed a type of paint called "Glitter".


  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    So here is a result of another shader that I've made with the same technique for the main camera.




  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    And there you go, finally the water drops on the windshield. Thanks to the people who helped me make it, specially @Obscura and @Eric Chadwick .



    This is still under development, though.
  • Eric Chadwick
    Great to see it all coming together!

    Some of the water drops on the glass are really large compared to the rest. They end up looking like a bunch of jellyfish. You might need to play with scale a bit more.

    But the wiping motion is amazing. Kudos D4N005H!
  • Mossbros
    Offline / Send Message
    Mossbros polycounter lvl 9
    Looking great so far, as Eric stated the drops are looking rather large at the moment causing it to be very blobby. 
    Another thing I noticed is the drops seem to spontaneously re appear after the wipers have gone over the spot when they have completed their motion, this could work for extremely heavy downpours but the transition would have to be different for lighter rain (speckles appearing over time) and a cleaner area where the wipers slide. As for heavy rain like you've shown, you should make the wake of the wipers smaller, as the rain is pretty much piling up right behind the wiper and add minor rain to that area.
    https://www.youtube.com/watch?v=r3Z_FHmE7Ic

     
  • xChris
    Offline / Send Message
    xChris polycounter lvl 9
    Looking really good! Subbing cause eventually I want to looking into making something like this, the batmobile rain drop effect in arkham knight was what peaked my interest 

    https://youtu.be/dUDsT9H2iCQ?t=8m51s
  • vonBerg
    Offline / Send Message
    vonBerg polycounter lvl 5
    Ow snap that is cool!
  • Obscura
    Offline / Send Message
    Obscura grand marshal polycounter
    Nice results! Can't say much other than the feedback that you already got. Glad to see you still work on this and it progresses.
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Thanks for your replies. Actually I got more energy to work on this by your positive comments. Once this shader finished,I'll optimize and clean it (it is really messy and not suitable to share right now). There are lots of features missing (like the haze effect and so on) and I should make 'em all. (-: :-)
    ------------------------------------------
    Eric Chadwick said:
    Some of the water drops on the glass are really large compared to the rest. They end up looking like a bunch of jellyfish. You might need to play with scale a bit more.
    Mossbros said:
    As Eric stated the drops are looking rather large at the moment causing it to be very blobby. 
    Another thing I noticed is the drops seem to spontaneously re appear after the wipers have gone over the spot when they have completed their motion, this could work for extremely heavy downpours but the transition would have to be different for lighter rain (speckles appearing over time) and a cleaner area where the wipers slide. As for heavy rain like you've shown, you should make the wake of the wipers smaller, as the rain is pretty much piling up right behind the wiper and add minor rain to that area.
     

    About the size..., well if I make the spheres smaller then Unity skips most of the collisions between the wiper and the spheres (water drops) -  it is the limitation of Unity's physics at the default physics time step.It is possible to do so,though. But I should decrease the time step from 0.02 to 0.0145 or less, which may cause performance issues for the players who have weak computers.
    So I did another trick, I decreased the fresnel value of the shader thus the sphere looks smaller, but the downside is the water drops look less realistic if they collide with each other.
    I can use both fresnel value and the time step value, for example if player chooses "Ultra graphics settings" on the main menu, then the game change the value of physics time  step from 0.02 (default) to 0.0145 or less. Otherwise the game use the default time step value for the physics and use a smaller fresnel value. But what I did now is just decreasing the fresnel value for now. Please have a look at the new images below to see if it does look like a jelly fish or not.
    About the effect, actually you have the control to make it like heavy raining or light raining. Here are an example of light raining (when the wipers end wiping the windshield) and heavy raining (when those wipers start wiping it):

    There are no dirt effect on the windshield so you can focus only on the water drops and speckles.

    But thanks for the input, I'll try to make it more realistic for light raining.

    xChris said:
    Looking really good! Subbing cause eventually I want to looking into making something like this, the batmobile rain drop effect in arkham knight was what peaked my interest

    This looks to me as an animated shader for normal maps, all you have to do is to use a flipbook shader (the last 11th post here is about it) and use that for normal map. It is the best choice performance-wise.


    More to come - hopefully - soon.
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Check out the new car paint, I decided to a use static normal map for car paint wetness. Otherwise it would not be good for performance. Look at the inside of the red rectangles of the image below to see the wetness of the car body.

    And here are more images of it.





    Hopefully I'm going to add the haze effect and some other stuff to the shader soon.
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Just found this in the shader forge manual today. LOL... it has the flipbook effect already and I didn't know. Haven't tested it,though.

  • Tamarin
    Offline / Send Message
    Tamarin polycounter lvl 17
    Hey, just wanted to say thanks for starting a great thread. I wanted to create a similar effect in Unity and the information in here has been very helpful.
    https://www.youtube.com/watch?v=CxhCFfynjU8
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Tamarin said:
    Hey, just wanted to say thanks for starting a great thread. I wanted to create a similar effect in Unity and the information in here has been very helpful.
    https://www.youtube.com/watch?v=Hs9cedZaWQI
    You're welcome. Someone starts doing something others develope it and make it even better this is how life works.
    So far so good. Good job.

    Still I haven't edited the shader. Once I prepare it, Hopefully I'm going to share it here.
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Well hello again, I just gave the shader to someone to make it "Compute shader" - Which means I wanted it to be more GPU-side and therefore it'd use CPU less - But to the time, it didn't go well so I decided to update the shader and the scripts to optimize it. And here is the result so far. So far so good (59 fps while more than 80 meta balls are enabled in 720p HD) but still it is not ready to be shared. [The video below is 29.7 fps]
    https://youtu.be/87lkDKPN-uw

  • Polynurb
    Offline / Send Message
    Polynurb polycounter lvl 15
    Is it possible this new functionality in Unity can achieve the desired effect?
    https://github.com/Kink3d/LensRain


  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Polynurb said:
    Is it possible this new functionality in Unity can achieve the desired effect?
    https://github.com/Kink3d/LensRain


    I don't have Unity 2017. Generally, there is a 3d model acting as a metaball and it is only being captured by a 2nd camera. Then a shader will use the output of the 2nd camera for refraction, bump and normal maps. The shader acts as a screen space (takes main camera info) and then applies the normal, bump and refraction to it. If this how the new feature works, then the answer would be yes.
    However, this is what I did for the windshield. For the lens effect, I've used a flipbook effect and not a secondary camera which you would see the resutls below.
    D4N005H said:



    BTW, if the water drops on the GIF that you've posted is real-time then it is very nice and impressive!!
  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Here is the updated version in my project check it out in the video below. Once I finished the project, I'll share this for free. Watch it from 3:10 .
    https://youtu.be/GjkCOBWZC1A?t=189


  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    Please read my blog before downloading it for more important details!
    Special thanks to Polycounts, especially @Obscura and @Eric Chadwick for their help.
    Regards.


  • Polynaught
    Offline / Send Message
    Polynaught polycounter lvl 11
    The metaballs approach is interesting but the resolution of the droplets is pretty low (they look big).
    Have you seen these papers by Tatarchuk, Isidoro et al:

    There's a very interesting approach that relies solely on texture lookups - so all GPU.


  • D4N005H
    Offline / Send Message
    D4N005H polycounter lvl 6
    The metaballs approach is interesting but the resolution of the droplets is pretty low (they look big).
    Have you seen these papers by Tatarchuk, Isidoro et al:

    There's a very interesting approach that relies solely on texture lookups - so all GPU.


    That's why I shared it on GitHub, I encourage everyone to enhance it or make a better FX with it.
    Texture Lookups sounds a great approach yet currently I don't have time to do so.
  • Sage
    Offline / Send Message
    Sage polycounter lvl 19
    I haven't read everything. It seems you might need particle trails for your rain drops. I did a search for particle trails and this came up, Maybe it can help you with the "streaking" effect particles have once they hit a windshield. The other thing you might be able to do is simulate the particle fx and bake the data out so Unity just plays the sequence

    https://www.youtube.com/watch?v=agr-QEsYwD0&list=PLNW2L7zpg5BHsN0izELOZ_YhKjFu7vpEb&index=2
13
Sign In or Register to comment.