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

Stylized Water Shader - Desktop/Mobile/VR [Built-in RP]

Discussion in 'Assets and Asset Store' started by StaggartCreations, Sep 8, 2016.

  1. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
    Thanks for the reply.
    Yup, I don't want reflection for now. Can you answer my actual question ?
     
  2. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    If you're not using planar reflection, using a tiled setup is possible. When the UV mode is set to "World-space" you'll have seamless tiling between the tiles. Worth noting that you'll only need the StylizedWater script component on one of your tiles.
     
  3. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
  4. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
  5. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    There is no special requirement for a tiled setup aside from what I mentioned before. Though for an isometric game such as Into the Breach rendering the intersection effect traditionally won't cut it. It will not be visible behind "earth" tiles because their backsides aren't visible either.

    The best course of action is to create water tiles for every possible edge combination, and vertex paint the edges:

    upload_2019-2-21_13-19-47.png

    You can set the intersection effect to use vertex colors (instead of depth-based)

     
    a-t-hellboy likes this.
  6. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180

    Should I just paint those edge vertices ? Because it doesn't look correct.

    upload_2019-2-21_23-32-48.png

    Also does it have any problem with new prefab system (Unity 2018.3) ?

    Also can I achieve this kind of tiling when water tiles are connected to each other ? (Player has an ability to add tiles in the game)

     
    Last edited: Feb 21, 2019
  7. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    For reference this is an example mesh with vertex colors, and the result in Unity:
    upload_2019-2-22_10-13-52.png

    As for a hexagonal map, the same principles as a tile-based world apply. It really depends on how accurate you want the intersection effect to show, may be worth-while to go with depth-based first and see how that pans out ;)

     
  8. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
    So what is wrong with my test ? (Those extra white intersections)

    I don't want hexagonal map actually. I just sent it as a reference to show connection between water tiles. I want to know how can I achieve connection between water tiles when they are next to each other (Which show that they are not separated)

    Also as I said I want intersection with other tiles like grass or stone tiles. So I think that vertex paint which you told will work for my need. Do you think Depth-based works either ?
    If I disable Depth-based and I put an object in middle of water (Like the rock in the image you sent) the intersection doesn't work automatically ? (I should paint it ?)

    Another thing which I don't know if it exists in your shader is about the intersection size variable for edges (Like water in pond) different than an object in the middle. Because if I pick a small size for it, intersection doesn't looks enough for objects in the middle of water.

    Also does the package have any problem with new prefab system (Unity 2018.3) ?

    Could you please answer all of my questions ?
     
  9. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    Not sure what you mean. Connecting tiles is as simple as placing them next to each other.

    This still applies and will avoids visible seams.

    Depth-based intersection will be the easiest to work with, since it automatically creates an intersection effect for any object. The drawback is that it won't render behind or next to objects (see comparison from previous post). On the other hand, vertex painting gets around this issue, but won't be dynamic and has to be manually painted on.

    The intersection size unfortunately has to be constant.

    I don't know if there are any issue with the 2018.3 prefab changes. This package isn't officially supported for that version (noted on the store page) because of a bug on mobile, so I haven't done any further testing in that version until I know how to fix it (so far no luck).
     
  10. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
    I mean I don't want all of tiles has same waving effect and stuff and separation between them. So by seting "World-space" I can achieve what I want.

    Aha, could you please tell me what I did wrong in vertex painting which it doesn't look like yours ? I just paint it by Polybrush with red color.

    I've seen a solution for this issue. If you want I can send the link, it may be helpful.

    Oh, I didn't see that in store page :-\. What is the issue on mobile ? I use 2018.3.

    Seems it doesn't work correctly with new prefab system because whenever I change values in Stylized Water component, the prefab is changed too so undo doesn't work either.
     
  11. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
  12. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    If I understand correctly, you want different wave settings per tile? That would in any case cause seams, because the vertices at the edges would not match up anymore. As long at connecting tiles use a material with the same wave property values it should be fine.

    I'm not sure why your mesh turns out like that, compare it to my example screenshot, it should depend on how the vertices are distributed It will look best when the vertex color show a visible gradient between vertices.

    In 2018.3 (on Android at least) something changed regarding screen coordinates for OpenGL, though I can't find any documentation about it. It causes the intersection and depth rendering to be offset in some way. When using vertex colors, that won't be relevant.

    Worth noting that the inspector mostly sets material properties, so these values will always be shared between tiles that use the same material. If you want to use unique properties (Color, tiling, etc) for another object, you'll need to create a unique material for it. This is the same as using materials on any other 3D object.
     
  13. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
    @StaggartCreations What are using for vertex painting ? Polybrush is weird on your shader.
     
  14. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    I painted a mesh in Maya. But I also tried out PolyBrush and that works as well (painting the edges and such). The layout of the vertices is very important, a default Unity plane mesh has very dense vertices, so won't give a nice gradient. You can use this as a reference:
     

    Attached Files:

  15. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
    I'm curious why you didn't use mask texture instead of vertex painting for achieving this kind of intersection.
     
    Last edited: Feb 24, 2019
  16. lorddesu

    lorddesu

    Joined:
    Aug 20, 2014
    Posts:
    31
    Great shader but any chance to see lil vertex displacement waves here?)
     
  17. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
    Hey @StaggartCreations
    Can you tell me how can I paint vertex in Blender ? (I know how to paint but I have some problems with subdividing, I want to subdivide edges like you did).
     
  18. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    I've never used Blender before, so I can't be much of help regarding that ;)
     
    a-t-hellboy likes this.
  19. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
    I just made it finally :D
    But it doesn't look right in Unity and by your shader. What is the problem ?
     

    Attached Files:

  20. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
  21. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    Please be patient, I'll respond when I'm able to provide a proper answer, there is no need to prod.

    I imported your mesh and it turned out the same as mine, with the intersection effect around the edges. Could you provide a screenshot illustrating what doesn't seem to look correct?
     
  22. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
    https://gyazo.com/86a31c5ced2bf895a091fd580037f691
     
  23. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    You'll have to set the Tiling method to "World-aligned" (under the Surface) tab, because the UVs of your mesh are teeny tiny. You'll need this regardless, if you're using a tiled setup so tiling is seamless between them.

    Also worth checking if the intersection mode is indeed set to "Vertex color", but I suspect the tiling mode is the issue.
     
  24. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
    It is a material setting:
    Settings.PNG

    By your plane it looks like this:
    https://gyazo.com/d93f80ce21e33b35a308f72cea51da37

    But my plane with that material looks like this:
    https://gyazo.com/148133568829c45c4b04d6cb9d221631

    By changing it to World-aligned:
    https://gyazo.com/147781e9980c92649cbed9a98f4bc240

    It is the plane in Blender:
    PlaneInBlender.PNG
     
  25. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    This is essentially the expected behaviour, since the tiling values you use are extremely low, and "World-aligned" tiling is still disabled. What you can do is enable it, and increase the tiling values (under the tabs Normals/Foam/Intersection) until you get the result you're after.

    Also worth noting that your plane mesh was exported using incorrect scaling and is 100x too small. A quick way around this is to uncheck the "Use File Scale" checkbox on the mesh's import settings in Unity. I'd advise to create a Cube next to the plane as a scale reference before setting the tiling values.
     
    a-t-hellboy likes this.
  26. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
    Thanks. It solves the problem.
    I solved that scaling problem.
    Just one thing, for better waving I should add more vertex to the plane ?
     
  27. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    Great! That is correct, the more vertices there are to work with, the more detailed the waves will appear to look.
     
    a-t-hellboy likes this.
  28. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
    I added more vertices but now I have this problem (The left one)

    https://gyazo.com/69ab1dd09c622d66bf6955ce600a645c

    2.PNG
     
  29. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    a-t-hellboy likes this.
  30. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    180
    Thanks, although I don't have any idea how to achieve it in blender :D I will find it.
     
  31. Alic

    Alic

    Joined:
    Aug 6, 2013
    Posts:
    137
    Hey Staggart, I can tell a lot of work went into this asset, you've got a ton of ideas implemented and I appreciate all you've done. That said, I think this shader is the main graphical element I dread tweaking in any project I've worked on. Let me try to explain why, and hopefully it can either be helpful feedback or you can set me straight on how I'm doing things wrong :)

    First, the main "StylizedWater" script that wraps the water material. I assume it does some important stuff unique to a water shader, like managing the planar reflection camera, adding the water shadow script to lights, and maybe combining some textures (in addition to letting us select all the texture presets). This stuff is great, but the price it seems to pay in usability is that suddenly undo doesn't work consistently. If I were just editing the material I wouldn't constantly try to memorize every setting before I tweak it, because I'd have faith that undo would work every time.

    A smaller annoyance -- for whatever reason, the tiling of the normal texture can't be typed in for values above one. You've got it clamped between 0-1 as a range in the shader, but even changing that doesn't allow me to set normal texture tiling above 1 without clicking the little arrows several hundred times. Setting the normal tiling above 1 is really useful depending on how my water plane is UV'd.

    Another annoyance with the StylizedWater component -- unlike materials, occasionally play mode changes will not persist. I haven't tracked down exactly when this happens, but I've definitely lost work from some setting reverting (I'll try to catch it next time it happens).

    The worst gotcha of the StylizedWater component is that occasionally changing a setting like a texture or the "compression" flag will overwrite all of your texture settings -- for normals, intersection, and waves! Once I was messing around throwing a bunch of different normal maps on water to see what looked good, and found something I was amazed by (and it was amazing because your shader is great!) and then, after tweaking a bunch of different settings, I clicked some check box and suddenly all of my custom texture references were lost and I had giant windwaker textures. And then I realized I had never looked at the names of the textures I'd been selecting. I think I cried, lol -- I will very likely never find that normal map again (was picking things at random in a project with a ton of normal maps).

    Aside from interface stuff, I have some questions. These all apply to the desktop shader set on "Advanced" lighting. Is Horizon Color (Fresnel Color in the shader) broken? I can't find any examples that use it, they all have it set to 0 alpha, which at least keeps it from overwriting all the other water colors you select (which is also a gotcha, I think?) I can't figure out how to get the distance setting to fade it in and out, it seems to pretty much apply to all the water equally with no reference to a view angle or horizon distance.

    The depth foam effect works pretty nicely for shoreline once you get the right texture. It seems like the color channels of the intersection texture are being scrolled against each other in some way? I've been finding that black and white textures look worse than textures with some color variation. Is there a description somewhere of how the custom texture is being used for intersection and foam effects? I can just look in the shader, but everything being named as nodes in a generated shader makes that a bit more of a headache.

    Anyway, sorry for the giant wall of text. Despite the frustrations I've run into, which may or may not be of my own creation, I've gotten some results with the shader that I'm really happy with. Thanks for your awesome work.
     
    Last edited: Mar 9, 2019
  32. DarkGate

    DarkGate

    Joined:
    Jan 26, 2016
    Posts:
    33
    I noticed that the script Enabled Dept Buffer increases the CPU batches by about 40%.

    upload_2019-3-10_12-22-51.png

    The worse part is, the more things you add into the scene, the worse it gets because the scale is percentile. I tried playing around with two cameras but it does not look as good. This is the main performance killer, do you have any suggestions? If not, I may have to look at alternative water solution.
     
  33. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    Thank you for taking the time to write detailed feedback! It's almost always the case that I must anticipate user behaviour and workflows based on my own experience, since most of the times I don't know where and how an asset will be used in the end. So your feedback is most valuable! I've noted your points for further improvement, and I can answer some of your questions.

    Unfortunately saving all the settings after exiting play mode would require me to rewrite the inspector to use a profile/preset system. I intended most decisions such as wave/intersection styles to be made in scene-view, as I imagined this wouldn't change often once a satisfying style was achieved. Material properties such as colors or tiling have the benefit of always being saved.

    The horizon color's alpha channel controls the opacity of the effect. By setting it to 0, you can turn off the color influence entirely. If the "Horizon distance" parameter is set to 0, all of the water will take on the horizon color value (undesired), a value of 1 or higher already provides a better result. This color will only be visible when viewing the water at glancing angles, never directly at the surface.

    Custom intersection texture should always be grayscale because internally the red color channel will be extracted. You can still supply a color texture, but the result will be difficult to predict.

    You can always access a description of a parameter by toggling the help icon on the right of a section.

    This is unfortunately a common drawback when using Forward rendering. When the depth buffer is enabled, the scene is rendered once to the depth buffer, and again as it would normally. Deferred rendering does not require this. If you don't have any specific requirements for using Forward rendering, then I would definitely recommend to stick to Deferred.

    You can change this in the Graphics Settings, which will make it default for all cameras.
     
  34. DarkGate

    DarkGate

    Joined:
    Jan 26, 2016
    Posts:
    33
    Learned something today. I switched my camera to use deferred instead and attached a global fog script to control the fog (since deferred ignores the fog effect). Thank you so much!
     
  35. BigRookGames

    BigRookGames

    Joined:
    Nov 24, 2014
    Posts:
    330
    Does this work with lwrp by chance?
     
  36. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    Unfortunately not, I don't think it will in the future, as it would be easier for me to start over from scratch ;)
     
  37. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    Submitted version 2.0.3

    - Minimum supported version is now Unity 5.6.0
    - Namespace was renamed to "StylizedWaterShader"

    Added:
    - Metallicness parameter when lighting mode is set to "Advanced"
    - Sea level can now also be set for Vegetation Studio Pro when installed.
    - Render queue field under the Advanced tab

    Changed:
    - Minor script and quality of life improvements

    Fixed:
    - Depth banding issue when using Unity 2018.3 on Android (OpenGLES)
    - Edge Fade color blowout when HDR was enabled
     
  38. sclong02

    sclong02

    Joined:
    Jul 17, 2017
    Posts:
    2
    Hi, StaggartCreations. We use Forward rendering, Subtractive GI, and turn off the camera depth texture. When we upgrade to 2.0.3, all water disappear...and I back to 2.0.2, the water come out again.(Unity editor and game mode)
     
    Last edited: Apr 2, 2019
  39. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    There is someone else who reported the same issue for Android, this did not occur during development and testing, so I'm looking to reproduce the issue. Could you tell me which Unity version you are using? I assume this for Android as well?
     
  40. sclong02

    sclong02

    Joined:
    Jul 17, 2017
    Posts:
    2
    Yes, it should be Unity version caused this problem. We use 2018.3.0f2, then both editor and Android have this issue. We will change the latest version 2018.3.11 for testing.
     
  41. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    Thanks, same version as the other person, so seems to be version related. This didn't occur during my tests in 2018.3, so it may be related to a specific project setting. I'll dive into it this week so I can hopefully push a fixed version very soon.
     
  42. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    @sclong02 I found the cause of the issue and managed to implement a fix!

    Submitted version 2.0.4

    Changed:
    - Blue vertex color channel can now be used to flatten waves
    - Improved behavior of Glossiness parameter when using Unlit or Basic lighting modes. Now visually closer to PBR glossiness for an improved "sparkle" effect

    Fixed:
    - Water turning invisible in 2018.3 when using Forward rendering without a depth texture
     
  43. GEOMETRICBYTES

    GEOMETRICBYTES

    Joined:
    Aug 23, 2016
    Posts:
    37
    Hello, I have several problems configuring the water. The first is that it appears transparent. No matter what color you put, it always remains transparent. Transparent inn Surfface is 1. The second is that Planar Reflections does not work. Please, I need help with this as soon as possible. Thanks in advance!

     
  44. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    I've replied to your email!

    Submitted v2.0.6

    Changed:
    - All color parameters now allow HDR usage, enabling emissive water when desired. Useful for lava or toxic water.
    - Intersection size parameter is now limited to values from 0 to 1 when using vertex colors for the effect
    - Improved performance of refraction when using multiple water objects

    Fixed:
    - Issue with meshes that have null vertex colors, causing water to always be transparent (Desktop).
     
  45. GEOMETRICBYTES

    GEOMETRICBYTES

    Joined:
    Aug 23, 2016
    Posts:
    37
    Yes, I have received it and it has worked perfect! Thank you!
     
    StaggartCreations likes this.
  46. BruceKristelijn

    BruceKristelijn

    Joined:
    Apr 28, 2017
    Posts:
    107
    And how about the HDRP? I've really enjoyed the asset before!
     
    DrOcto likes this.
  47. HalDevOne

    HalDevOne

    Joined:
    Apr 12, 2014
    Posts:
    67
    Hi there. Was wondering. Does it matter how many vertecies a water mesh has? I mean does that effect anything in the water shader? I am making a custom mesh and wonder if i should make it dense or not.
     
  48. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    For a dense mesh, the shader will have more vertices to process, so it will run slower, but this is the case for any shader. If you're making a procedural mesh, be sure to calculate tangents and normals for it as well, otherwise the wave normal map will fail to work. If you're using Maya/Blender, then that's nothing to worry about!
     
  49. HalDevOne

    HalDevOne

    Joined:
    Apr 12, 2014
    Posts:
    67
    Ok but does the vertecies affect anything was my question. Do i bennefit a mesh with 4 vertecies vs a mesh with 10000. Is it for the nicer waves you need a dense mesh?
     
  50. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,237
    It will affect performance. But for more detailed waves, you generally need denser vertices so the shader has more to work with ;) It doesn't have any effect on other functions.
     
    HalDevOne likes this.