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. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    New version has been submitted and will be available soon!

    https://www.assetstore.unity3d.com/en/#!/content/71207

    v1.28

    Beta shader:
    - Corrected transparency
    - Added shallow water color parameter (replaces Depth functionality)
    - "Depth" tab and "Depth darkness" parameter have been removed from the inspector
    - Intensified the Rim color by default, which can be toned down by the color's alpha channel

    I found there is an issue when using a camera with HDR enabled, which blows the colors out of proportion. Will have to look into that!

     
    Last edited: Jul 20, 2017
    Alverik and seanweech like this.
  2. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    Last edited: Jul 22, 2017
    Alverik likes this.
  3. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    Have been experimenting further with using a secondary camera to provide the shader with it's depth information. Which also allows it to cull certain layers, so objects can be excluded from the intersection effect.

    Once the new shader is out of beta I'll look into implementing this as a feature. Currently it still has a lot of possible implications, especially on mobile. So one step at a time :cool:

    With this I'll also be able to (finally) implement support for orthographic cameras without stepping away from Amplify Shader Editor :D

     
    Last edited: Jul 23, 2017
    Alverik and brisingre like this.
  4. Thermos

    Thermos

    Joined:
    Feb 23, 2015
    Posts:
    148
    Hi Jonny,
    This asset is just amazing. I've tried your beta shader, the reflection makes this water even better. However I have a feature request that it would be really nice if you add some interaction ripple system.

    Try this https://github.com/hecomi/UnityWaterSurface
    I spent less than 1 hour last night and successfully integrate his code into stylized water shader(dx11), and it looks great.
    1.png

    But since I'm not pro at shader and so it would be nice if you could officially contact that author add this feature to this water asset. All those water assets in asset store, it either looks great without physical interactions or just focus on physical simulation without having a nice looking. If Stylized Water could do both, I believe it would be the top selling.

    Also, it would be nice if you could provide screen space reflection rather than camera planner reflection. Try this https://github.com/i-saint/Unity5Effects

    Finally, I don't know if it's a bug, but you can actully add sub material inside one substance file rather than duplicate the entire one. However the stylized water inspector can only take the first one sub material.
     
    rrahim likes this.
  5. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    Thank you for your suggestions!

    From the start I intended this package to focus on stylization, artistic control, rather than realism. So any functionality such as buoyancy, caustics or ripples are outside of the scope. As I feel it steers it more towards a water system. I plan on releasing a separate package with stylized particle effects which can accommodate this water shader: https://twitter.com/JonnyIO/status/871290664482426880

    I believe at some point I will have to look in SSR, as to my understanding it holds several benefits, even for flat surfaces like water. ;)

    Also, there is no use for multiple Substance instances in the inspector. As you will only use one normal- and shadermap per material. The documentation elaborates on how to use instances: http://staggart.xyz/unity/stylized-water-shader/documentation/#material-instances
     
    rrahim and Shodan0101 like this.
  6. rrahim

    rrahim

    Joined:
    Nov 30, 2015
    Posts:
    206
    I'm interested in both the ripples and particle solution, so either way works for me.
    Do you have any time-line for releasing the particles?
     
    Alverik likes this.
  7. alanmthomas

    alanmthomas

    Joined:
    Sep 7, 2015
    Posts:
    197
    Any timeline on when we can expect the mobile version?
     
  8. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    It's something I want to work on next. But currently I'm working on redoing the mobile shader and the Fantasy Adventure Environment, next to freelance gigs (rent and food!). So it's difficult to tell exactly when I will have the time ;)

    I'm letting the desktop version sit as is, to gather more feedback before moving on, and to work on the mobile shaders. I've already stripped it off it's expensive features and brought it down to the level of the Mobile Advanced shader. So far, it didn't work at all on my Android device :rolleyes: so I'll have to spend some more time on it. I will also put it in a beta stage first, to not shoot anyone in the foot.
     
    Alverik and rrahim like this.
  9. rrahim

    rrahim

    Joined:
    Nov 30, 2015
    Posts:
    206
    Holy Crap! Fantasy Adventure Environment looks awesome!
    I definitely want to pick that up. One question / suggestion; it would be great if the asset and its shaders can be usable on other meshes / custom meshes such as something built with Probuilder. For the purpose of building more content using a similar style.
    Looking forward to your future work.
     
    Alverik likes this.
  10. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    Thank you, I appreciate the interest :D

    The assets are prefabs, so they can placed (or painted) on anything really. The vegetation shaders can be used on other trees or plants, granted they have Ambient Occlusion baked into the vertex colors, but the documentation will go into more detail about it.
     
    Alverik, Shodan0101 and rrahim like this.
  11. theLittleSettler

    theLittleSettler

    Joined:
    Jul 14, 2012
    Posts:
    36
    We tried out the updated shaders...love the improvements, but we can't use it till it supports hdr (more specifically, we're using hdr, deferred, linear). Should be able to give you some decent feedback when we look into it after you have that working.

    One thing to note though from taking a quick look at it is that we need some kind of size control for the body of water (or adapt to scale). We're using it for the ocean.

    Going to be exciting to ramp up the waves during weather, never expected you'd add waves like this :)

    ...and since that's there, it would be convenient if you have a method for sampling wave height in scripts for it, so that we can then have buoyant objects, since that should be fairly simple. :)
     
  12. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    277
    I would also like an easy way to sample wave heights, to better detect whether the player is underwater.
     
  13. Django

    Django

    Joined:
    Nov 25, 2008
    Posts:
    120
    Hi,

    I just wanted to say thank you for making these awesome shaders and for putting the time and effort to keep them up to date. I am looking forward to the update for the mobile shaders!
     
    StaggartCreations likes this.
  14. manumartinez

    manumartinez

    Joined:
    Nov 17, 2014
    Posts:
    5
    Hi, does it support PS4? If not, is there any chance it could be adapted for PS4? Thanks!
     
  15. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    I do not have access to a dev kit to test it, nor have I heard of anyone using it on a PS4 before. If you'd be willing to try it out, that'd be great! If it ends up not working as expected I would oblige a refund of course.
     
  16. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    277
    upload_2017-9-10_10-8-36.png
    I've been having problems with other transparent objects sometimes being sorted in front of the water with the old non-beta shaders.


    upload_2017-9-10_10-6-30.png
    When I went to see if it was any different in the beta shader, I found another issue. When you look upward at the beta shader, or even sideways through it, you get this fresnel color apocalypse.
     
  17. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    Thanks for outlining the issue!

    I'm not sure what I'm seeing in your first screenshot, but if you're having issues with the sorting. You can try and change the render queue of the shader, to ensure it is always rendered in front or behind other transparent objects (or UI text). Transparent objects are 3000, so if you change it to 3000+1, it will render in first.

    I believe since Unity 5.5 you can do this in the material inspector like so:


    If you're using an older version, you can open up the shader file in a text editor and change from "Transparent" to "Transparent-1":


    I replicate the issue, with the water upside down, where the fresnel color blows up, but I managed to fix it. I should note that water being upside down will not look the same as a regular plane. Because in most situations the sun will be behind the water, so you will not see any of the normal map. I'll message you with the modified version. ;)
     
    brisingre likes this.
  18. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    277
    Thanks so much for your quick response on the Fresnel thing. I'll try to elaborate on the first issue.

    My scene uses two transparent shaders. One of them is yours, one of them is a very simple thing I wrote in ASE to use for glass-fronted tanks. Depending where you stand, it's possible to view the water through the side of a tank, or to view the front of the tank through the water, so I can't just render queue the tanks to always be behind the water -- that might be an approach, but I'd need to write a system to keep track of which should be in front depending where the player's standing and looking, and even then I'm not sure I can guarantee that there's nowhere where you can, for example, look out of one tank, into the water, and through the front of another tank under the water. I'd really like not to go down that route.

    What I need is for sorting transparent objects to work properly, which is something I have problems with frequently. And, for the most part, it does.
    upload_2017-9-11_7-8-49.png
    In this screenshot, everything looks right. The tanks in the back are drawn first, and refracted properly.

    upload_2017-9-11_7-11-17.png
    If we walk a few feet up that ramp directly in front of the camera and look at the middle tank, the sorting starts screwing up. Opaque objects are refracted properly, but the tanks are drawn on top of the water and aren't refracted. I suspect it has to do with the water surface being close to the camera, and not actually to do with standing on the slope.

    upload_2017-9-11_7-19-40.png
    The view of the water from the tanks is fine. Everything in this picture is sorting correctly.

    upload_2017-9-11_7-20-58.png
    If it were screwed up in the same way, it would look like this. I had to mess with the render queue to make this happen, as far as I'm aware this version doesn't happen on it's own, at least not in this scene.

    EDIT:
    upload_2017-9-11_7-56-26.png
    The new version the beta shader you sent me works well upside-down, and exhibits a different behavior in terms of the sorting bug. It's sorting correctly and drawing on top of the tanks when it's supposed to, but it's not grabbing or refracting anything transparent behind it.
     
    Last edited: Sep 11, 2017
  19. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    Thank you for the detailed illustration! Is it possible you could send me this scene to contact@staggart.xyz? That way I can try some things out and see where the issue lies.
     
  20. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    277
    Sure thing. I'll get that packaged up.

    upload_2017-9-12_11-23-39.png

    Just to note, it is possible to get it to draw some tanks properly and other tanks wrong.
     
  21. Nedgoom

    Nedgoom

    Joined:
    Jan 16, 2013
    Posts:
    9
    This is a great plugin, but I have one problem
    ,
    In the promo videos, the intersections are all nice and white, but in my project (Unity 2017.1.1, ios platform). they are all a sort of mid grey/blue colour. If I add a completely blank, full white texture as a custom intersection texture, then all the intersections look mid grey. I can adjust various sliders to make the intersections darker, but I can't get them to look white.

    Is there some really basic setting I'm missing somewhere?
     
  22. antoripa

    antoripa

    Joined:
    Oct 19, 2015
    Posts:
    1,163
    Hi @Jonny10
    i downloaded 1.28 and I expected the shader create with ASE. But i still see the 4 shader with SF ...Can you help me ?
     
  23. antoripa

    antoripa

    Joined:
    Oct 19, 2015
    Posts:
    1,163
    I got it . .did not see the beta package . thanks
     
  24. theLittleSettler

    theLittleSettler

    Joined:
    Jul 14, 2012
    Posts:
    36
    hey, I found the hdr problem with the beta shader.

    change the blend mode from
    Blend SrcAlpha OneMinusSrcAlpha

    to
    Blend One Zero

    Which is possible because you're using a grab pass to blend things, anyway.
     
  25. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    Had the chance to test it out on PS4 through another user, got it working by making a few modifications which I've outlined in the documentation: http://staggart.xyz/unity/stylized-water-shader/documentation/#playstation-4

    Cool beans, thanks! :D

    Will be submitting a new update today. I had the opportunity to delve into the new mobile shader, but with little success so far. Will have some time this week to look into it further ;)

    v1.29
    Beta shader:
    - Recompiled using latest version of ASE
    - Fixed colors blowing up with HDR cameras
    - Added a layer mask to the inspector for realtime reflections
    - Reflection is now less intense at certain viewing angles
     
    antoripa likes this.
  26. angel_m

    angel_m

    Joined:
    Nov 4, 2005
    Posts:
    1,160
    How it is not clear in the documentation, the actual shader (all versions) has realtime reflections or not?
     
    Last edited: Oct 4, 2017
  27. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    277
    Only the beta shader has realtime reflections. The old shader can be assigned a cubemap for reflection.
     
    StaggartCreations likes this.
  28. pahe

    pahe

    Joined:
    May 10, 2011
    Posts:
    542
    Hey.
    Got some questions about the Substance texture:

    1. When using the generated textures from the substance archive, is the whole Substance system activated (load into memory)? We had something similar in an old project and that caused about 10-20mb of additional memory usage on mobile, which is not desireable :)

    2. If the Substance textures are exported and assigned manually to the shaders texture fields I saw that they always get overwritten by the StylizedWater script, assigning the substance archive texture to the shader again. Is there any way to prevent that, other than removing the script again (tried to remove the referenced substance archieve and set the field to none, but it automatically assigned it back again).

    Thanks for help.
     
  29. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    If you scroll to the bottom of the Substance material and set the "Load behavior" to "Bake and discard Substance", it will generate a regular texture when you build the project. This is actually a really good practice, and I'll be sure to make this the default setting with next update.

    If you open up the StylizedWater shader and comment out lines 141 and 142 it will prevent it from assigning the textures from the Substance material.
    Code (CSharp):
    1.         shadermap = proceduralTextures[0];
    2.         normals = proceduralTextures[1];
    I think there is no way around the fact that I will have to redo some of the functionality. Where an option is added to bake and assign the generated textures. Because the bug on mobile in Unity 5.6 (and up) with Substance material remains, and will probably not be fixed for a long time to come (boo!). It will basically come down to an 'Apply settings' button ;)
     
    pahe likes this.
  30. daGOTTh

    daGOTTh

    Joined:
    Jul 8, 2013
    Posts:
    1
    Hi Jonny10,

    I have a question about the water shader when using the Google Pixel.
    After loading the scene the water seems fine, put after a couple of minutes it starts stuttering pretty heavily (just the wave animation, the performance stays fine) and the texture gets pretty pixelated.

    I tested this on the iPad too and there is not stuttering or pixelation present at all. Any idea what could cause this?

    water_shader_comparison.png
     

    Attached Files:

  31. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    What happens is Unity internal "Time" value, which is a float, incremented over... time, eventually becomes so large the device shows precision issues. This unfortunately varies from device to device. This will happen on PC's too, but will take several days of runtime before such a point is reached :p

    The time parameter is used to determine the UV's of the waves and such, so if the value is too high to represent, pixellation will occur.

    You could elevate this by disabling "world-space tiling". If that doesn't work out, please send me an email at contact@staggart.xyz
     
  32. theLittleSettler

    theLittleSettler

    Joined:
    Jul 14, 2012
    Posts:
    36
    You could pass Time.time % animationDuration to the shader instead, if you can determine how long the animation lasts until it repeats.
     
  33. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    277
    Instead of passing in total time and multiplying it by the wave speed vector in the shader, you could just pass in the current offset. Then, you don't have to figure out how long the animation is. You just have a script that does something like this:
    Code (CSharp):
    1. Vector2 UvOffset = Vector2.zero
    2.  
    3. void Update()
    4. {
    5.      UvOffset += WaveSpeed * Time.deltaTime;
    6.      UvOffset = UvOffset % 1;
    7.      renderer. sharedMaterial.SetVector("_WaveUVs", UvOffset);
    8.  
    9. }
     
  34. Novez

    Novez

    Joined:
    Jun 3, 2014
    Posts:
    14
    I'm using the beta version and it doesn't seem to show any reflections. Do I have to do something special to display it?
     
  35. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    Thanks for the tips @theLittleSettler and @brisingre. I had dabbled with this method before, but had little success since some elements move slower or faster than others, and thus showed an obvious jump in animation. I've managed to elevate the issue by using higher precision for the UV's. This is actually what should have been done in the first place, but I fortunately learn new things over time :)

    Primarily, you need to have the "Reflections" checkbox enabled in the inspector. When you're using the beta version, be sure to use the "StylizedWater_Beta" script on your water mesh, rather than the regular one.

    On another note: I'm working on the ability to bake the substance properties to textures, for users on 5.6 and mobile platforms. It's a viable workaround for the broken normal maps in this scenario.
     
    pahe likes this.
  36. Novez

    Novez

    Joined:
    Jun 3, 2014
    Posts:
    14
    What would I do if I wanted to create a big ocean with this water?
    Do I copy paste a bunch of tiles each one with the script on it? Or one huge plane?
     
  37. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    277
    Both of those will work just fine.

    You don't need the script on every tile if you go that route, I don't think: just the material & one copy of the script to set it up.
     
  38. dadude123

    dadude123

    Joined:
    Feb 26, 2014
    Posts:
    789
    There's a bug, "Normal Strength" keeps resetting to 16 after a while
     
  39. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    If you tick the "World-space tiling" option, you can stretch out the water plane as big as you like, and the tiling of the material will stay the same. Using both that and tiles would also be an option, it would aid performance since the unseen tiles would be culled.

    As @brisingre mentioned, you'll only need the component on one object per unique material/subtance instance

    Thanks for the heads up, I'll look into it!
     
  40. idemobi

    idemobi

    Joined:
    Sep 29, 2016
    Posts:
    1
    Hello,

    How to create 2,3,4 differents substances of water (I need to change color of water in 4 lakes AND the rim shape) ?
    I try to add Styled Water as the instruction (§material instance) but the StylizedWaterScript always reselect the StyledWater original for the Substance!

    The step : "You can assign this new material to Substance field in the inspector:" is not possible :-/

    Thanks
     
    Last edited: Nov 7, 2017
  41. strawberrydoll

    strawberrydoll

    Joined:
    Jan 15, 2014
    Posts:
    43
    Hey, just wanted to say I love the shader so far, I have a small issue I was hoping you can help with.
    I have this strange flickering behaviour with this shader when rotating or moving my camera:

    [gfycat link] (11s)

    Removing all my geometry and bringing it back seems to fix it:

    [gfycat link] (30s)

    Any idea what's going on? Happens on every machine I've tested it with (variety of hardware)
     
    Last edited: Nov 9, 2017
  42. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    I'm currently in the process of rewriting the entire inspector, I'll be sure to make a note of this. I managed to reproduce the issue myself, a little odd, as I have used instances before in the past. These sort of hickups are part of the reason why I'm turning the script on it's head and giving it a thorough shake ;)

    Is this the beta shader with reflections? I found there is an issue with flickering when using Occlusion Culling, but I know how to fix it, and will do so in the following update.
     
  43. strawberrydoll

    strawberrydoll

    Joined:
    Jan 15, 2014
    Posts:
    43
    It's the normal shader with occlusion culling off. It seems to happen when a lot of alpha geometry is in view, and only seems to happen if the game is running. I'll see if I can find the exact culprit and create a standalone project with the issue
     
  44. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    Looking at it more closely, it appears that the cloud shadows are what appear to flicker, not the reflection. It goes between cloud shadows and fully shadowed, so to speak.

    How are you achieving the cloud shadows? It could very well be related to a z-fighting issue, which could be solved by adjusting the shader's render queue order.
     
  45. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    On another note, I've successfully rewritten the inspector. I've decided to use the method of using baked textures throughout the package. This will ultimately make it more straightforward to use instances, and have different looking water variations in your game.

    The script now uses the default "StylizedWater" Substance material, purely as a function. The textures are generated on command with the settings as set in the inspector, and saved as PNG files in a "/Textures" folder next to the material file:



    This means certain features must be manually applied through an added button. The inspector is also a lot faster because of this, since it doesn't continuously generate new Substance textures:



    Each section will now also have a help toggle button, which will display a description of each parameter
     
    brisingre likes this.
  46. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    277
    That looks great!

    using baked textures makes a ton of sense. I'm probably going to do that with my own Substance stuff soon.
     
  47. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    Changelog for version 1.30, I'm aiming to submit it by the end of the week.

    Beta shader:
    - Fixed flickering in reflection when using Occlusion Culling
    - Surface highlights will now appear to be affected by the waves
    - Improved intersection texture animation
    - Improved wave normals through layering

    Current shader:
    Fixed:

    - Precision issues on mobile
    - Broken normal maps in Unity 5.6 on mobile platforms (editor only issue)

    Added:
    - Help toggles, per options section, which show a description of the parameters
    - Shader variant dropdown menu
    - "Wide waves" wave animation
    - Toggle to hide the wireframe on versions older than Unity 5.5

    Changed:
    - Rewritten inspector to make use of serialization
    - Substance outputs are now baked to texture files, per material instance
    - Normal Strength and Wave Size are now a shader function
    - Improved "Billowed" heightmap
    - Improved wave animation in Mobile Advanced shader

    In the beta shader, I've improved the animations. Instead of panning the intersection and surface highlights I'm utilizing UV distortion through the heightmap. Windwaker did it :p
     
    brisingre likes this.
  48. neoshaman

    neoshaman

    Joined:
    Feb 11, 2011
    Posts:
    6,492
    JUst a minor nitpick, would you find a way to merge the white of the coastal foam with the water pattern using a max instead of a mix? Ie the pattern merge instead of overlapping?
     
    rrahim and dadude123 like this.
  49. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    277
    upload_2017-11-19_13-13-45.png

    I've been getting a lot of this since the last update.
     
  50. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    2,226
    I think I understand what you mean. However, it's very specific and it would require a lot of core changes, to the textures as well. I'll experiment with it, to see what the impact is, but no promises ;)

    I'm not sure what I'm looking at, could you elaborate? It looks like the edge of your map.