Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Official Water shader

Discussion in 'Open Projects' started by cirocontinisio, Oct 27, 2020.

  1. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    Shader for the water in the sea surrounding the island, and in smaller water ponds.

    Deep water is not accessible by the player (they can't swim), but we can consider shallow ponds in which they can walk.

    Needs support for water moving up and down, and some kind of foam (that can be turned off for ponds?).

    Even though it would still be toon-like, it can be a different shader than the one used for toon objects. For instance, it doesn't need to support additional lights, baking, etc.
     
  2. dickmendra

    dickmendra

    Joined:
    Sep 1, 2018
    Posts:
    5
    Hello @cirocontinisio, I made a basic cartoon water shader. Will something like this work?

    Cartoon Water UOP1.gif
    Here is a view of the shader graph; cartoon water shader graph.png
    The Base Color, Opaqueness, Ripple Speed, Ripple Density, Ripple Slimness, Ripple Color, Wave Speed, and Wave Height are adjustable.

    If this is fine I can make a PR. However, I didn't add any foam effect. Since I'm still new to shader graphs, left it out for someone else.

    I made this by following a tutorial by Brakyes:
     

    Attached Files:

    moosesnWoop likes this.
  3. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    Looks good! I would just add one thing to make it more cartoon: a Step node just after the Power node?

    That's perfectly fine. Maybe somebody will pick up the challenge :)

    Please try playing with the Step node, and then make a PR on the 'art-assets' branch. Thanks!
     
    dickmendra likes this.
  4. dickmendra

    dickmendra

    Joined:
    Sep 1, 2018
    Posts:
    5
    Thankyou @cirocontinisio for the feedback!
    I was wondering how to sharpen the ripple edges but didn't know which node to use. Following your advice, I added the step node and it certainly enhanced the toon effect! Here's how it looks now;
    modified toon water.gif

    Here is the modified shader graph modified toon water shader graph.jpg

    I have made a PR: https://github.com/UnityTechnologies/open-project-1/pull/137#issue-513618058

    I'm eagerly waiting for someone to work on the foam effect and tell us how they did it. Once again this project is a great learning experience. Thank you! :)
     
  5. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    You killed the cells a little bit though, now they don't connect anymore! I think playing with the Power values before you "step" it, it should bring the values back. It's an act of balance :)
    Looks good already though!

    For the foam, I think you can take out the learning from this Brackeys tutorial about how to use the depth node:



    It's the same concept he uses to make the side of the barrier that glows at the intersection with the wall.
     
    dickmendra likes this.
  6. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    Hello @cirocontinisio and all,

    What about a mix toon/realistic water shader? It seems aligned with the detailed rocks textures or the characters small details.

    I did some tests based on this tutorial:


    What do you think about this result?

    water_shader.gif
     
    dickmendra and itsLevi0sa like this.
  7. itsLevi0sa

    itsLevi0sa

    Joined:
    Oct 26, 2019
    Posts:
    128
    Hey @dickmendra, nice impovement, thanks for sharing! I haven’t played around with Shader Graph much (I was just passing by this thread) but I happened to stumble across this link which might be useful as it explains the process of adding foam lines, following as it seems a similar approach to the Brackey’s video above. It also explains how to add refraction and interactivity to the water and even shares the Shader Graph file. Here is also the video I got the link from:

    Seem like pretty interesting examples to learn and try different approaches should you wish to explore more. And she has made a good amount of other interesting tutorials too :)

    @treivize seems like we posted simultaneously. Nice work! I like the color gradience between the deep and the shallow waters and I think it would be nice to have refraction indeed. I like the movement as well, although for now it resembles more that of a river. Would you be interested in trying to figure out a more palindromic movement for the beach shore? (thanks for sharing the tutorial video)
     
    Last edited: Nov 2, 2020
    Lars-Steenhoff and dickmendra like this.
  8. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    Hi @itsLevi0sa,
    Thanks for you feedback, I had the same feeling as you regarding the river movement. It was too late yesterday to find out where to inject the Sine function :)

    I found it this morning. Here is how it looks like now. Lots of things could be still improved. I do not know if vertex displacement is a requirement or not, currently the movement is simulate by color distortion the geometry is still perfectly flat.

    Another source of inspiration for water shader comes from this shader example (implemented UE4 ;))
    https://80.lv/articles/cartoon-water-shader-in-ue4/

    Updated version with a periodic movement:
    water_shader_2.gif
     
  9. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    The whole shader looks great, @treivize!

    I also merged the PR that @dickmendra made earlier today, but by his own admission that's as far as he could go, so it would be great to integrate the stuff you are making into it / with it.

    A couple of suggestions:
    - I think it would be better if the shader was Unlit. This means that for it to pick-up shadows, you need to use the same custom HLSL currently used in the Toon shader. Would you be able to do that?
    - The sine wave looks ok, but the back and forth is really visible. What about having it go up and down instead? It might mean modulating the noise, or offsetting it, by the value of Sin(time). This way you would have a foam on the shoreline that doesn't move, but instead forms and dissolves all the time in a noise pattern, while not going anywhere.

    Looks good though! Once we have this integration it might be time to open a PR.
     
    treivize and Amel-Unity like this.
  10. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    I have updated my PR following your suggestions.

    I have struggled a bit to merge both shaders, but at the end, I kept the vertex displacement and move for unlit master shader.

    Again here is the result after the latest changes:
    water_shader_3.gif
     
    dickmendra, itsLevi0sa and javimtib92 like this.
  11. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    Hello @cirocontinisio,

    I guess you do not have time to local pull all the PR to review them, so here are some details about the shader from Shader Graph:

    A new Sub Shader (Shaders/SubGraphs/WaterNoise) has been added to handle the water noisy movement used in refraction and in foam simulation.

    upload_2020-11-3_11-34-4.png
    As suggested, it is based on offsetting + lerp over time.

    Wave is based on vertex displacement and I reuse the graph of @dickmendra as it is:
    upload_2020-11-3_11-45-32.png

    Based on the design from the tutorial attached earlier in this thread (Water refraction, Water Depth Fade and Water Foam sections) using the water noisy movement sub graph and depth fade sub graph.
    upload_2020-11-3_12-0-1.png

    Toon Shader Custom Shadow computation integration (might be useful to extract it into a Sub Graph instead of copy/pasting it, what do you think?)
    upload_2020-11-3_12-1-53.png
     
    dickmendra and itsLevi0sa like this.
  12. dickmendra

    dickmendra

    Joined:
    Sep 1, 2018
    Posts:
    5
    Oh! I've missed so much of the discussion.

    Thank you @cirocontinisio for the feedback!
    Yes, you are correct. I might have overplayed with the value trying to make it look good :oops: Also thanks for sharing the foam tutorial I'll try to learn from it.:)

    Hey @itsLevi0sa thank you for the feedback! I'll certainly watch the tutorial you shared, there seems to be a lot to learn:)

    Wow I think this looks great! It even has shoreline foam. With all the tweaks everyone has suggested this will be the perfect water shader for this game.
    Great work @treivize I'm in love with this final result! Thank you for sharing the shader graphs and explaining them.

    Yes absolutely! I only started on this because it seemed that no one else was working on it and personally to gather some experience in the shader graph. Now that @treivize has done some amazing work, I am more than happy to step aside and learn:)

    All in all, this is a great learning experience, Thank you!
     
    treivize and itsLevi0sa like this.
  13. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    Hi,

    Playing with the shader, I noticed glitch effect where the water surface becomes far from the camera. So I was thinking about introducing a fading effect on the foam/refraction/wave to nullify them for far water.

    upload_2020-11-4_17-14-52.png
     
  14. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    Yes, it's a great idea and I noticed it too from previous screenshots. Great idea!

    And by the way, it's coming out fantastic!
     
    treivize likes this.
  15. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    Hi @cirocontinisio,

    I am glad you are happy with it. Everything is pushed in my current PR, with some extra shader properties to fine tune the shadow and global illumination.

    I am currently looking at the wind effect for the toon shader and I came across this article in unity blog:
    https://blogs.unity3d.com/2018/10/05/art-that-moves-creating-animated-materials-with-shader-graph/

    There are also detailed explanations to achieve gerstner wave simulation:
    upload_2020-11-5_13-36-13.png
    I was wondering if it would be required for open water part of the level design? The current shader looks suitable for calm sea, water pound or swamps, but if open sea with true waves are needed, I can try to integrate something like the result above.
     
  16. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    Hehe, I remember that blog post, John was an intern in our team when he wrote it!

    Feel free to enhance it with better waves. Just maybe don't spend waaaay too much time on it, since for the sea we mostly see it in one scene only. (although we might have other smaller and less important Beach scenes, just to bring the protagonist back down to the water)
     
  17. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    Hi @cirocontinisio,

    Indeed, adding such waves is complexifying a lot the shader. I will focus on other tasks (shader/coding/modeling) from now. Maybe later someone else or myself will add new stuff based on the real needs of the scene composition where water is needed.

    My PR is ready to be reviewed!
     
    cirocontinisio likes this.
  18. NicknEmart

    NicknEmart

    Joined:
    Sep 9, 2019
    Posts:
    46
    I have found this video that talks about how Nintendo approached water in SMG2. I fount it interesting, but since I'm pretty much a noob when it comes to these things, I don't know how much of the stuff he says is actually useful or isn't. I hope this helps!
     
    codefish83 and Lars-Steenhoff like this.
  19. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    Hmm, I'm pulling your branch and a first attempt just gives me a flat plane with none of the effects... need to investigate further o_O

    upload_2020-11-8_10-46-20.png

    Maybe jumping from branch to branch in Git has broken something internally. I will do a full reimport as a first step.

    EDIT: Nope, nevermind, it was a matter of parameters. I think the fading was too low, and so the whole effect was faded away even if I was looking at the water from very close.

    upload_2020-11-8_10-58-25.png

    My first perception is that we need a lot of sliders in the Material inspector, to make sure people select the right values and can't "break" the shader while trying to configure it.
     
    Last edited: Nov 8, 2020
  20. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    Wow, the shader looks great! I left a few comments on the PR regarding some tweaks that it would be great to do before merging, although if you're super busy they can also be done later on (or by somebody else).

    I'll repost them here:

    - One thing that would be great to fix is to make sure that planes put next to each other displace at the same rate, so that their edges match. Is that possible, or does it depend on geometry, size and position of the object?
    You can see what I mean in the image below:

    upload_2020-11-8_11-10-52.png

    - I think it would be better to have only one displacement effect. Right now, the displacement is transparent and overlaid on top of the regular geometry render. This creates a ghosting effect that makes it a bit confusing.
    In other words, even if the shader/material is in the transparent queue, it should completely covers the pixels of the existing geometry.

    upload_2020-11-8_11-13-37.png

    - And finally as mentioned before, it would be great to have sliders that limit the values within reasonable ones, so you can't break the shader involuntarily while tweaking it.
     
    treivize and javimtib92 like this.
  21. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    Hi @cirocontinisio,

    Thanks a lot again for your feedback, I have updated the PR based on your comment. Hopefully, it was quick to figure out what was needed to be changed to solve all of them :)

    Just, I am not sure what was the content of your commit ("Small tweaks to showcase scene"), I might have overridden it...
    But in my last commit, I have modified the showcase scene to demo the water like this:

    upload_2020-11-8_15-25-22.png
    with 2 water planes one next to the other and a duplicate of a big rock in the middle
     
  22. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    Thanks! And don't worry about the scene, it's just a showcase so it's fine you overwrote it.

    I left some more notes on the PR, but I want to merge it now so don't worry about fixing it. I will put them into a different task, something for later.
     
    treivize likes this.
  23. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    Hi @cirocontinisio!

    I figure out how to solve the main problem spotted in your last PR comment:
    upload_2020-11-11_20-8-32.png

    I have injected the UV distortion computed for the refraction into the DepthFade function to apply the same distortion in the Screen Depth node UV input (instead of the default screen position UV) and... Tada!
    upload_2020-11-11_20-12-3.png

    Now I have noticed a new problem with the refraction, I do not know how acceptable it is, but the part of the objects above the sea level are refracted also on the object side, which seems not realistic... Given how this fake refraction works, I do not know yet how to solve this problem for the moment... I have to think about it a bit longer, I guess.

    EDIT: The previous update was amplifying the existing problem since the refraction was colored with shallow water color.

    After further investigation, I managed to negate this side effect :)
    upload_2020-11-11_22-19-58.png

    I will open a PR for this fix
     
    Last edited: Nov 11, 2020
    javimtib92 and cirocontinisio like this.
  24. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    Merged this one too! Great work, the water turned out pretty nice!
     
  25. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    I have opened a new PR to fix the remaining glitch around the rock above the water level, here is the result (that can be compared to the latest screenshot above):
    upload_2020-11-12_10-14-7.png

    The latest thing, that I would be happy to solve (before adding colored waves as explained above), is the shadow projection between the surface shadow and the shadow on the ground below the water.
    I feel it should be somehow connected, with fake volumetric shadow. Am I wrong with this feeling?
    upload_2020-11-12_10-18-54.png
     
  26. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    I think you shouldn't worry about that!
    At best, one thing we can do is fade the shadows on the water level a bit? So it doesn't look like a double shadow. But other than that, let's try not to make it too complex (it is already).
     
    treivize likes this.
  27. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    296
    First of all a big compliment to @treivize for the water shader, I really love it. There is one thing though that I think can be optimized - can you displace adjacent triangles consistently (world space perhaps)? Then it will be good for waterfalls as well (I am thinking of giving the waterfall an additional particle effect though). Right now the water shader looks like this on waterfalls:
    water shader on waterfall.gif
     
  28. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    @Smurjo, indeed I have already noticed that problem depending of the geometry.

    The problem comes from the displacement done along the vertex normal, it lets you normally build not only flat water geometry but it means that they have to be with smooth normal over all vertices, otherwise, the triangles have their own vertices with different normal vector and so the displacement along this normal starts to disconnect the triangles with each others.

    So I see 2 solutions:
    - apply the wave only along the world Y axis, it will work as today for sea and lake. for waterfall it means that steeper the water less wave will be visible (it might be a feature actually ;))
    - make waterfall one geometry with normal smooth vertex
     
    Smurjo likes this.
  29. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    296
    @treivize Thanks a lot. Knowing it is the normals the problem was solved in no time.

    Yet it encouraged me to abuse your water shader even further - I tried to provoke edge foam instead of using a particle system by placing a object at the water surface (and moving it with the wind shader). It would give me much more control over how the foam looks like.

    Here you see the result:
    gif_Forest_022.gif
    Only I would prefer if the edge foam creating objects themselves were invisible - but apparently invisible objects create no foam.
     
    cirocontinisio and treivize like this.
  30. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    Haha, funny technique, very creative :)

    Hmmm. Can you assign these objects to any of the layers not rendering? Or, create a new layer, put the objects on it, and then exclude it from the "layers that render" on the Custom Render Features?
     
  31. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    296
    It didn't work - sure the objects became invisible, but didn't create edge foam either.

    It also seems I have some kind of flood water problem with the water shader - below you see the "town" scene with a 2D view of the "farms" scene:
    viewWithoutOcean.PNG
    The 2D-view is marked, it's clearly above water level. But if I switch on the ocean (a simple plane with water shader), this happens:
    viewWithOcean.PNG
     
    Last edited: Feb 1, 2021
  32. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    For this we should see the setup of the scene. Might be a bug on the shader indeed. Tagging @treivize for visibility (sorry! :D)
     
  33. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    Yeah, I was trying to figure out what could be the issue, but sorry @Smurjo from your post I am not sure to understand exactly what is your problem.

    But please check the following things: the Y scale of your water plane. It should stay at 1.0 and check the water fading distance, it should not be too big.
     
  34. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    296
    @treivize
    I don't know whether you followed the discussion in the whiteboxing thread (https://forum.unity.com/threads/whiteboxing.987468/) about how to give the player a view on far away scenes that are not loaded. One method is to put it in the skybox - but the skybox follows the player around, it is only correct from one exact position. So my solution is a screenshot with a transparent background on a huge plane, so the player gets the impression it is nearer or further away as he moves. Except for the transform it is Unity's standard plane from which I removed the collider (the collider is definitely not needed as the plane is only loaded when the player is far away). The ocean plane's Y scale is still 1. I also changed the "global fading distance" from 15 to 5 with no effect.

    Meanwhile I played with it some more and observed yet another strange behaviour connected to the problem: The plane is rendered correctly when the camera is close to it (unfortunately this is exactly not the purpose of the plane) but not when it is further away.
    waterShaderAndFarAwayView.PNG waterShaderAndFarAwayView2.PNG
     
  35. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    Smurjo likes this.
  36. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    @Smurjo, sorry now I got it! Indeed @cirocontinisio has spotted the right explanation of the problem. the material shader of your background plane should not be set as transparent. Keeping it opaque and enable alpha clipping with a value higher than 0 should do the job.

    I did a dummy test with one texture with alpha info and I think it works fine:
    upload_2021-2-3_10-55-17.png
     
    Last edited: Feb 3, 2021
    Smurjo and cirocontinisio like this.
  37. Smurjo

    Smurjo

    Joined:
    Dec 25, 2019
    Posts:
    296
    This solved it!
     
  38. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    @Smurjo and @cirocontinisio, I have just opened a PR to fix an issue I discovered on the water shader in play mode only and visible on some of your screenshots Smurjo.

    upload_2021-2-3_17-58-31.png

    There is a crispy white outline appearing around object in front of water. It was pretty annoying especially when vegetation or objects appearing small on the screen because they are far from the camera are rendered over the water plane. It should be fixed now!
     
    Last edited: Feb 3, 2021
    NathBar, cirocontinisio and Smurjo like this.
  39. cirocontinisio

    cirocontinisio

    Joined:
    Jun 20, 2016
    Posts:
    884
    Yes, please! Thanks!!! I was going to mention it (but was too busy to :D)
    It was indeed very much in your face, glad it was fixed so fast!
     
  40. NathBar

    NathBar

    Joined:
    Jan 18, 2022
    Posts:
    11
    Did you managed to fix this ? I have the same problem...
     
  41. treivize

    treivize

    Joined:
    Jan 27, 2016
    Posts:
    136
    NathBar likes this.
  42. NathBar

    NathBar

    Joined:
    Jan 18, 2022
    Posts:
    11
    Yes thank you ! :)
    The problem was that I was not injecting the screen position into my block which was calculating the depth of the water!