Search Unity

[Released] Stylized Water Shader - Desktop/Mobile/VR

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

  1. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    That would work, the planet in the screenshot I posted also uses noise displacement and a second sphere to serve as the water.
     
  2. SebastianMaj

    SebastianMaj

    Joined:
    Nov 28, 2013
    Posts:
    112
    Alright sounds good I will purchase it tonight! Also I was wondering how you got your planets to look so nice.
    That's what the planets I'm using look like but I like your style more. Is it a sphere that is extruded using perlin noise and has a spherical height shader.
     
    Last edited: Apr 21, 2017
  3. Lars-Steenhoff

    Lars-Steenhoff

    Joined:
    Aug 7, 2007
    Posts:
    3,063
    thanks, If you can make a hard white edge on the surface that would be cool, and some ripples on intersection when a player interacts.
     
  4. deadlycrow

    deadlycrow

    Joined:
    Feb 10, 2014
    Posts:
    135
    Package update is now complete, maybe some features will be covered in the next update, like the ripples, for now you have:

    - complete re-do from scratch of the shader
    - intersection foam
    - height displacement with no seams from the side view
    - a simple version of the shader without using depth information(useful for mobile and orthographic camera games)
    - 4 different water meshes with different poly-count levels
    - many other stuff :)
     
    Lars-Steenhoff likes this.
  5. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    Perhaps its best if you created a new thread for your asset. I find it a little inappropriate to use this asset's thread to promote your own.

    I'm using a height/diffuse map created through Substance. Which is largely Perlin-noise-based as well. I've attached the Substance for you to try out. But don't expect much of it, it was quick and dirty ;)
     

    Attached Files:

    Alverik likes this.
  6. SebastianMaj

    SebastianMaj

    Joined:
    Nov 28, 2013
    Posts:
    112
    Thank you, I will have a look once I get home. Never used substances before so this will be new :)
     
  7. UmbraSouls

    UmbraSouls

    Joined:
    Oct 3, 2013
    Posts:
    2
    Hey Jonny10, just wanted to say great asset! I picked it up on the big sale on right now, saves a lot of time.

    I have a request:
    • Is it possible to make it easier to change the Surface Highlights texture, and colour?
    I can see it seems to be using the Shadermap red and blue channels to layer two different directions of the tiling texture that sort of fade in and out with each other.
    If I wanted something closer to the original WindWaker where its just one tiling voronoi pattern, that'd be cool.
    Whenever I try changing the Shadermap texture to another one of mine, it just resets, and if I change the Waves normal map it goes all funny.


    Some other things:
    It would be great to expand the intersection highlight across the surface of the plane at the point of the intersection, instead of just based on the object's depth. Guessing this would be a bigger ask, and I should probably just create a tiled mesh with the same texture as the intersection that sits on the surface. An older thread here discussing what I am talking about.

     
    Last edited: Apr 24, 2017
  8. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    I'll look into it this week! I'll see how feasible it is to implement a toggle that switches the surface highlights between what they are now (uses the Red normal map channel) and the intersection texture. So you can opt to use the intersection texture for the surface highlights as well. This way, you can recreate the iconic wind waker entirely.

    Edit: Got it working now, will show how it looks exactly later. Also needs to test it thoroughly, still!

    I would not change the Shadermap texture, as you noticed, it's not possible. If you pick a custom intersection or wave texture they get packed into the shadermap channels automatically.

    About the intersection, the way it works now is the only method I know that can be used in Unity. It is possible to extend the rim in Unreal Engine shaders. If I were to make an environment like the Windwaker island, I would place meshes around the objects, assuming they won't move. It should probably be possible to procedurally create these meshes, but I have no experience with this.
     
    Last edited: Apr 25, 2017
  9. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    Rough unedited preview of the new, requested, features:

    Added:
    - Option to use intersection texture for Surface highlights (desktop only)
    - Heightmap-based wave animation, you can pick between a Smooth, Sharp and Billowed style. Great for large bodies of water! (desktop only)

    Changed:
    - Cleaned up Shader Forge node tree
    - Increased default Anisotropic Filtering value for normal and shader map
    - Surface highlights masks out the normal map to simulate thickness
    - Surface highlights are now also affected by overall Transparency, to ensure correct color values
    - Glossiness value can now be set higher, in case your normal map is faint and and you want to keep reflection details.

    Fixed:
    - Missing Transparency parameter in inspector when using the Mobile Basic shader
    - Undo functionality not working correctly when the inspector does not have focus
    - Fallback shader on Mobile set to Unlit/Transparent, instead of referring to Legacy Shaders

    The waves increase the visual depth of the water, so they naturally add some color variation.
     
    Last edited: May 1, 2017
    docsavage, rrahim and brisingre like this.
  10. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    274
    Those are some really nice waves...
     
  11. UmbraSouls

    UmbraSouls

    Joined:
    Oct 3, 2013
    Posts:
    2
    Excellent, thanks for your quick response! Exactly why I bought the asset, great developer communication.
    The new preview looks great with those new waves, also makes my own wave mesh script redundant now :(

    I thought that would be the case, my issue then becomes if the waves are bobbing up and down on the water plane, I need to synchronise the mesh around the objects also bobbing up and down.
    That would require some way of passing wave height at that point on the mesh to the object, would need to think about that one...
     
  12. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    New update has been submitted (see post above about whats added)

    It's also the last day of sale, it was supposed to end yesterday, but I believe it has been given an additional day:


    Also added a comparison chart to the documentation so it's more clear which features are excluded on mobile. The full list of parameters can be viewed in the documentation: http://staggart.xyz/unity/stylized-water-shader/documentation/#parameter-glossary
     
    Last edited: May 1, 2017
    brisingre and docsavage like this.
  13. MaTaXeToS

    MaTaXeToS

    Joined:
    Apr 9, 2014
    Posts:
    1
    Jonny10, One question, does your asset work with a orthographic projection?
     
  14. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    Unfortunately, it does not.
     
  15. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    274
    IMO it's not half bad. It breaks everything that runs off the depth texture, which as far as I can tell is just Depth and Intersection, although I don't have the newest version yet, so it's possible it'll break the new waves or something.

    Depending on your art style it might be totally fine.
     

    Attached Files:

  16. pro-bchevalier

    pro-bchevalier

    Joined:
    May 30, 2013
    Posts:
    46
    Hello @Jonny10 , I am getting this on my project:

    Screen Shot 2017-05-03 at 4.52.58 PM.png

    Would you have an idea what could cause that?

    Thanks!
    ben
     
  17. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    Please shoot me an email at contact@staggart.xyz with this screenshot and some information about the platform you're developing on. That way we can see what's what :)
     
  18. pro-bchevalier

    pro-bchevalier

    Joined:
    May 30, 2013
    Posts:
    46
    Hi @Jonny10 I just sent you a mail.
    Thanks!
     
  19. alanmthomas

    alanmthomas

    Joined:
    Sep 7, 2015
    Posts:
    197
    I'm getting the exact same thing in my project. What was the solution?
     
  20. LeoLiFan

    LeoLiFan

    Joined:
    May 18, 2017
    Posts:
    2
    Hi @Jonny10 Can you help me?That's on the mobile,Thanks!
     

    Attached Files:

  21. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    I've narrowed down the issue, will have to contact Allegorithmic support. As it appears to be an issue with Substance normals maps in Unity 5.6 on mobile. I should note that this only occurs in the editor, not in a build.

    For now, there's a usable workaround, by exporting the generated normal map to TGA, and using that instead.

    1. First off, remove the Stylized Water component from your water, as this will revert the change you will make.
    2. Select the StylizedWater Substance material, and choose "Export Bitmaps" under the gear menu
    3. Export the 2 maps anywhere you like. Then hit CTRL+R (Or right click in your project view and hit Refresh), to refresh your asset database, this will import the textures.
    4. Drag and drop the exported normal map into the normal map slot of your material
    Hope to find work out a solution for this soon!

    This is an issue with precision, some devices do not support a high-precision depth texture. It's possible to force higher precisin through the Android player settings, some users reported this working: https://docs.unity3d.com/Manual/class-PlayerSettingsAndroid.html

    If you are on Android, could you download and run the demo and see if that does work? https://www.dropbox.com/s/5za5xo1hza21x3s/SWS_AndroidDemo.apk?dl=1
     
    Alverik likes this.
  22. alanmthomas

    alanmthomas

    Joined:
    Sep 7, 2015
    Posts:
    197
    That did it. Thanks!
     
  23. LeoLiFan

    LeoLiFan

    Joined:
    May 18, 2017
    Posts:
    2
    Hi @Jonny10 .This download Android Demo apk on my mobile side is the perfect display.
    Can you show me your Android player settings?Thanks!
     
  24. Mr_FJ

    Mr_FJ

    Joined:
    Sep 4, 2013
    Posts:
    4
    Hey, is there a way to make the Stylized water work with an orthographic camera?
     
  25. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    274
    Not without modifying the shader (and I don't know exactly how to do it with modifying the shader.) Stylized Water uses the depth texture for a lot of stuff. As far as I know, orthographic cameras do generate this information, but they store it in a different format. It probably isn't impossible to get it working, but it does not currently work.

    It doesn't break entirely with an orthographic camera. Depending what you need from it, it might be okay -- I posted a pic earlier in the thread.
     
  26. Mr_FJ

    Mr_FJ

    Joined:
    Sep 4, 2013
    Posts:
    4
    Hmm I'm only getting the refraction effect, anyway without the edge effect it's kind of a bust :( Thanks for the answer though :)
    upload_2017-5-27_23-6-55.png
     
  27. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    274
    Refraction, surface highlight, waves, etc should work.

    Depth fade and intersection (the edge effect) rely on the depth texture and won't work with an orthographic camera without some sort of modification.
     
  28. alanmthomas

    alanmthomas

    Joined:
    Sep 7, 2015
    Posts:
    197
    Do the image effects from the Post Processing Stack affect this rendering properly? Is there some way around this?
     
  29. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    I have not encountered any issues so far. Before the official release there were some issues with Temporal AA (jittering intersection effect), but I cannot reproduce in the final release.
     
  30. alanmthomas

    alanmthomas

    Joined:
    Sep 7, 2015
    Posts:
    197
    Could it have something to do with the workaround for the other issue? Specifically, with any post processing effect, the wave foam at the intersections goes away.
     
  31. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    I will send you an email, so we can hopefully see what's what ;)
     
  32. xzbobzx

    xzbobzx

    Joined:
    Apr 7, 2015
    Posts:
    27
    This looks absolutely great!

    Does it work with deferred rendering mode?
     
  33. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    Yes! :)
     
  34. sgower

    sgower

    Joined:
    Mar 9, 2015
    Posts:
    315
    Hi, any chance you could update this shader to support single pass stereo rendering for VR? I've been using your asset, but notice that the water doesn't look right when I turn on single-pass. I believe Unity has instructions somewhere for how to upgrading shaders. I'd really appreciate it! I don't think I'll be able to use this if it doesn't support single-pass. BTW, I'm using Unity 5.6.1p3 and developing a VR game for the Vive.
     
  35. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    I'm afraid the asset does not support VR rendering, officially. As I do not have the resources or knowledge to do so. Making manual changes to the shaders also introduces some headaches with editing the shaders with Shader Forge, as it will overwrite them whenever opened :(
     
  36. darkl4805

    darkl4805

    Joined:
    Jul 28, 2013
    Posts:
    5
    upload_2017-6-25_16-5-36.png

    Do you happen to have a copy of the settings you used when you created this screenshot? I'm trying to get this exact water effect. Thanks.
     
  37. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    I'm sorry, I don't. It appears to use the intersection style "None" (no texture) in combination with the "Stream" wave style.
     
  38. theLittleSettler

    theLittleSettler

    Joined:
    Jul 14, 2012
    Posts:
    36
    Hey, we have an issue with ambient lighting (that it recieves only legacy ambience, which doesn't match well when everything else is pbr, realtime GI). I saw in your docs you mentioned rewriting the shaders without shader lab, any eta on that?

    I was able to hack a fix using spherical harmonics for ambient from unity's shader code - screenshot here (left normal; right mine).

    Tried both mobile advanced and desktop, same issue.

    Workaround works for us but if you've already got it redone with pbr lighting / corrected shader forge (preferably not...generated shader code is too hard to read), that'd be awesome.

    Shader edits to mobile advanced
    in VertexOutput
    fixed4 ambientDiffuse : COLOR0;

    in vertex function
    o.ambientDiffuse.rgb += ShadeSH9(half4(o.normalDir,1));

    in fragment function
    replaced
    indirectDiffuse += _LIGHTMODEL_AMBIENT.rgb; // Ambient Light
    with
    indirectDiffuse += i.ambientDiffuse; // Ambient Light

    cheers
     

    Attached Files:

  39. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    Thanks for bringing this to my attention! I've been so used to using the legacy ambient color that this seemed to go over my head.

    Regarding the rewrite, to be frank, I haven't given it much attention lately, as I have been focused on freelancing (bills hehe) and finishing my Fantasy Adventure Environment asset. I think it'll be much faster for me to recreate the shader(s) in Amplify Shader Editor. Which will have much of the same benefits as rewriting it and still allows for user-editing.

    I'll also be added Realtime Reflections, already have it working, but I still need to incorporate the settings into the inspector. ;)
     
  40. theLittleSettler

    theLittleSettler

    Joined:
    Jul 14, 2012
    Posts:
    36
    No worries. I've written enough transparent shaders to know how time consuming that can be (particularly with the various draw order issues that can arise). :) We won't need it for a long while yet, though.
     
  41. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    Recreated the shader in Amplify Shader Editor with the intend to prototype its functionality. Seems to work exactly like the current version, however it's a lot tidier under the hood and works with proper ambient lighting and reflection probes. Refraction doesn't want to play nice at the moment, so I'll have to see what's up. EDIT: Got refraction working again!

    Some things I added along the way:
    • Wave normal map is masked by wave heightmap, this adds a little variation in normal map strength. Beneficial for large water bodies.
    • Wave foam, shows the current surface highlight at the peak of the waves.
    • Realtime reflections. Still a little buggie, I took the functionality from the standard Unity water, but I noticed it keeps flooding the hierarchy with new cameras (normally this is hidden from view).
    • Flow direction, allows you to set the direction in which the water flows. Either in world-space or UV-space


    It's probably best if I release this shader as beta, and deprecate the Shader Forge shaders once I'm positive they it works properly ;) It will also increase the lowest supported version to Unity 5.4

    As for mobile, I'll have to make a careful assessment regarding performance, since it should not see a decline! I tried things out like flow direction, but due to the low precision on mobile GPUs the water turned into pixel vomit after running for a few minutes.
     
    Last edited: Jul 4, 2017
    Alverik, brisingre and Acissathar like this.
  42. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    274
    Looking forward to the new version. The new features look great, especially reflections, and I'll be able to tweak this one because I actually own ASE...
     
  43. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630


    Brought refraction back to it's former glory. Also improved the specular term by a stretch. Turns out my approach wasn't exactly right.

    I will put this shader in a .unity package, so it can be unpacked separately. I'll continue to recreate the Mobile Advanced shader next and gauge the performance.
     
  44. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    274
    It could be my imagination but that specular does look better. Refraction definitely looks right.

    Something that keeps coming up for me, that I wonder if you can think of any way to deal with:

    I'd really like to be able to use the depth effect on water that's over a transparent background, like the glass in a fish tank. That doesn't work because the depth effect uses the regular camera depth texture, and regular transparent geometry doesn't render to the depth texture. You can force a transparent shader to write to the depth texture. I think it messes up sorting and stuff and is generally a hot mess, but it might be worth a try.

    Perhaps I could render a special depth texture with just the back faces of my tanks, but that wouldn't handle overlap well at all. Ideally it seems like you could get the depth info you need at the same time as you get your grabpass for refraction, but I don't know if that's possible in ASE, or indeed at all...

    I'm happy to monkey around for a while when I get the chance, and it wouldn't be terrible if I ended up with just the tanks I have right now, but I figured it's worth asking. Any ideas about this?
     
  45. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    That is a pretty tricky case as you seem to understand.

    Yesterday I was experimenting with rendering the depth texture from a separate camera and use that in the shader instead, so it's possible to cull certain layers from rendering to the depth texture. With the idea to exclude certain objects from receiving the intersection effect. Didn't quite work unfortunately, but warrants some more experimentation.

    Hypothetically, such a method could also be used to render an opaque mesh of your tank's walls, which would be set to be culled by the normal camera. If my thinking is right, it would be a hacky way of including transparent objects in the depth texture.
     
    brisingre likes this.
  46. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    Have been working on tying all the functionality to the inspector window and smashing bugs. As mentioned, it will be included in a separate package first (which you can unpack), since it visually differs from the current version. So not to screw anyone's project over and have you try it out at when ready. Eventually it will replace the current Shader Forge shaders, and they will be removed.

    Changelist for next version is as follows:

    v1.27
    This version includes a separate unity package which contains a Beta shader. It's targeted at desktop, mobile shaders will follow suit later. The minimum support version is Unity 5.4

    It features:
    - Recreated in Amplify Shader Editor entirely
    - Realtime reflections
    - Skybox lighting
    - Reflection Probe support
    - Mask surface highlight by heightmap (wave foam)
    - Wave direction configuration
    - Improved texture crosspanning
    - Improved glossiness
    - Unlit mode

    Fixed:
    - Corrected behaviour for Substance instances when reloading a scene

    Changed:
    - Set prefabs on "Water" layer (default built-in layer)

    In this example video I go between a more realistic style to a toony style:
     
  47. Afroman

    Afroman

    Joined:
    Aug 17, 2013
    Posts:
    43
    This looks really good. When do you think the mobile version will be completed?
     
  48. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    Difficult to say at this point. Need to make sure the Desktop version works flawlessly before moving on to the mobile platform ;)
     
  49. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    The new version is now live, you can unpack the beta shader and it will go in a separate folder and namespace.

    For desktop users, please try it by using the Beta shader instead of the current shader. If you encounter any issues please voice them here or contact met at contact@staggart.xyz

    Hopefully if everything runs without a hitch I can remove the Shader Forge shaders and move forward.
     
  50. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,630
    Currently the transparency behaviour in the Beta shader isn't correct, apologies, I will submit an new update shortly.

    I will also be added an option for a "shallow water color", which allows for a more natural depth effect. And I've made a modification where the intersection color is far brighter. It can still be toned down through the intersection color's alpha channel.

    https://twitter.com/JonnyIO/status/887772350661394433

     
    Last edited: Jul 19, 2017
unityunity