Search Unity

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

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

  1. halDev

    halDev

    Joined:
    Apr 12, 2014
    Posts:
    55
    Thanks for the anwser i was thinking it would be about the waves.

    Wonder another thing. I have copied my top mesh stylizedwater GO and flipped it to get the underwater. But the top and the bottom meshes dont sync up when i have some small waves. So when looking horizontal from the water line/border the top and the bottom mesh overlap back and forth and loooks strange.
     
  2. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    The waves push the mesh's vertices in the direction of their normal. So for a plane, that would be straight up. This means, if you were to rotate a plane 180 degrees, the waves will appear to push down.

    There is a small modification you can make in the desktop shader (assuming you're using that), to make the waves always push up in world-space, rather than using the mesh's normals

    Replace line 191
    Code (CSharp):
    1. float3 Displacement100 = ( ase_vertexNormal * temp_output_95_0 );
    with
    Code (CSharp):
    1. float3 Displacement100 = (mul(unity_ObjectToWorld, float3(0,1,0)) * temp_output_95_0 );
    This will make your two planes have the same wave displacement (granted the settings are identical). The waves will appear much higher after this modification, but you simply have to decrease the height.
     
  3. halDev

    halDev

    Joined:
    Apr 12, 2014
    Posts:
    55
    Awesome thank you. :)
     
  4. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    153
    Hey there,
    I want to know if it is possible to achieve something like this water block side by your shader ?
     
  5. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    I can't say the shader would be ideal for that sort of set up, specifically. Namely due to the sides of the cubes, the normal map will be of the same strength on both the top and bottom, which may look a little odd. The waves would have to be flat, otherwise the mesh will appear to split at the corners (on the edges where the side meets the top).

    The intersection effect can be controlled through vertex painting, so it can also be added on the edge. Here is my attempt:
    upload_2019-5-15_21-16-8.png

    I have attached the mesh and material if you'd like to take a look.
     

    Attached Files:

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

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    153
    Hey @StaggartCreations,
    Thanks for the reply.
    Can I have just that intersection without any water texture for the sides ?
     
  7. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    Short answer would be no, this would require to modify the shader in several places so that certain effects (normals, refraction, foam, etc) are only visible on the top faces of a mesh.
     
    a-t-hellboy likes this.
  8. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    153
    What is your suggestion to solve this problem which water blocks don't look like this ? (Look at sides)
    https://gyazo.com/13f4334c44564cf02373c5f790d57e0d
     
  9. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    153
  10. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    Sorry, completely forgot to respond!

    The water is single-sided in any case, so looking through the water onto a side without any walls it will appear invisible. There is unfortunately no straight forward way to circumvent that other than creating a shader that render backfaces in a specific way (eg. a plain color). The other point would be the waves. Setting the tiling mode to "World-Space" will avoid the edges splitting up, but will also stretch the normal map and intersection at the sides. Sadly, it can't be both ways.

    I'm afraid this all peers more into the direction of a custom shader, that's set up specifically to work on cubes as a volume, which this shader is not.
     
  11. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    153
    Is there any way to modify your shader to work with cubes ? Like sides go up and down exactly same as surface wave.
     
  12. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    You can make the same change as I outlined in this post. For something like a cube it wouldn't be desirable for the waves to use the mesh normals, this would mean waves on the sides would push sideways, rather than up.
     
  13. a-t-hellboy

    a-t-hellboy

    Joined:
    Dec 6, 2013
    Posts:
    153
    That link is your profile.
     
  14. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    a-t-hellboy likes this.
  15. BasiliskGames

    BasiliskGames

    Joined:
    Sep 13, 2014
    Posts:
    1
    I have been looking for a water shader solution that works with Deferred Rendering and Unity's Post Processing Fog (Unity 2018.4). Will this water shader render properly with fog? Every shader I've looked at can't render transparent water with fog, so distant water looks out of place in the game scene with the surrounding terrain / trees cloaked in fog.
     
  16. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    Unfortunately this shader would succumb to the same common issue due to being transparent, rendering it "invisible" to any screen-space fog effects. The default Unity fog is neatly integrated into Unity's shader library, so it's easy to implement in any shader through ~3 lines of code.

    For any other fog effect (namely the one from Post Processing Stack) this is usually not the case, where the fog shader code sits in one shader, with its own settings. Rather than in a library, using global settings (like the default fog), making it impossible to reuse and mirror it in another shader.
     
  17. halDev

    halDev

    Joined:
    Apr 12, 2014
    Posts:
    55
    Hi. Are you planing to add any extra details functions to this shader in future?
     
  18. JMeer

    JMeer

    Joined:
    Mar 3, 2017
    Posts:
    20
    Hi StaggartCreation. I've been using your water shader for quite some time for our game. It's awesome!! And working great on our PC VR version of the game. I'm porting the game to the Oculus Quest (runs on Android). Switched to the mobile shader, set the lighting to Unlit. Some adjustments, awesome result!

    But in the Android Build of the game, the water doesn't seem to show up in the Oculus Quest. No errors and no warnings.

    So i made an empty project. Imported the Stylized water shader (latest version), Added the Oculus Integration (Asset Store). Added the StylizedWater_Mobile prefab to an empty scene. Added the Enable Depth Buffer script to the camera. Still no water in the build.

    Unity version: 2019.1.8f1
    Graphics API: OpenGLES3

    Any idea how i can get the water to render? Or do you have any tips? I have included the ProjectSettings i'm using. They are mostly default settings.
     

    Attached Files:

    ROBYER1 likes this.
  19. cawty

    cawty

    Joined:
    May 12, 2019
    Posts:
    1
    I recommend making sure the main camera has EnableDepthBuffer script.
     
  20. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    I don't have an Oculus quest, but I will see if I can reproduce any issues using your ProjectSettings on Android ;)
     
  21. WR-reddevil

    WR-reddevil

    Joined:
    Apr 16, 2019
    Posts:
    52
    Hiii there

    I am getting this error

    Assets/UI textures/StylizedWater/Scripts/StylizedWater.cs(108,12): error CS0619: 'ProceduralMaterial' is obsolete: 'Built-in support for Substance Designer materials has been removed from Unity. To continue using Substance Designer materials, you will need to install Allegorithmic's external importer from the Asset Store.'

    how do I solve this

    I have imported this asset
    https://assetstore.unity.com/packages/tools/utilities/substance-in-unity-110555

    I was using 2017.4.15f and it was working fine in that
    and I have upgraded to 2018.1.9f1 and I am getting this error

    I imported the above mentioned plugin and restarted the unity but still the error was there.
     
  22. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    The version you're using is over 2 years old if you're seeing that error. Updating the package is necessary to use it in 2018.1+
     
  23. WR-reddevil

    WR-reddevil

    Joined:
    Apr 16, 2019
    Posts:
    52
    Which version should I use?

    I was using 2018.1.9f1 which is 2018.1+ right?
     
  24. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    You can get the latest version by updating through the store page ;)
     
    WR-reddevil likes this.
  25. JMeer

    JMeer

    Joined:
    Mar 3, 2017
    Posts:
    20
    Thanks!
     
    Last edited: Jul 5, 2019
  26. amoghvc

    amoghvc

    Joined:
    Jul 15, 2013
    Posts:
    2
    Hi Staggart, bought your plugin and it is great. Everything works fine in Editor, but when I build for device and run it on an Oneplus 6, the water shows up only very close to the camera. Water which is further away from the camera does not get rendered.

    Any help with this would be greatly appreciated. :)
     
  27. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    Already replied to your email ;)

    EDIT: Solution was to decrease the camera's far clipping plane from the default 1000 units, which will yield higher precision in the depth buffer, particularly important for mobile devices.
     
    Last edited: Dec 7, 2019
  28. amoghvc

    amoghvc

    Joined:
    Jul 15, 2013
    Posts:
    2
    :) thanks! I was not sure which medium was faster to reach you, will reply in the e-mail and then later update this thread for other people to be able to refer in the future.
     
  29. Pendulum_

    Pendulum_

    Joined:
    Jul 30, 2015
    Posts:
    117
    I cannot seem to get intersections working with an Orthographic camera. I have attached the depth buffer script and am using forward rendering.
     
  30. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    Is this in the editor, or only in a build? If so, on which platform? Note that when changing from projection to orthographic you'll need to tweak the intersection size and falloff parameters, since the depth values are wildly different between the two camera modes.
     
    Pendulum_ likes this.
  31. Pendulum_

    Pendulum_

    Joined:
    Jul 30, 2015
    Posts:
    117
    Yup, that did it! Amazing asset.
     
    StaggartCreations likes this.
  32. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    Submitted version 2.0.9

    Unity 2019.3 compatibility verified

    Added:
    - Desktop shader using Advanced lighting now receives color from up to 3 point lights

    Changed:
    - Improved code for UI sections, expanding/collapsing sections no longer marks the object/material as changed
    - Delete obsolete and legacy code

    Fixed:
    - Horizon color covering entire mesh when water is viewed from below
    - Null reference error when destroying the water object in a build
     
    Lars-Steenhoff and Acissathar like this.
  33. khushildep

    khushildep

    Joined:
    Oct 10, 2013
    Posts:
    7
    Hi

    Just purchased and trying to find some documentation but the link for docs isn't working?

    Khush
     
  34. khushildep

    khushildep

    Joined:
    Oct 10, 2013
    Posts:
    7
    Also - is there anyway to set and underwater environment at all?
     
  35. Migueljb

    Migueljb

    Joined:
    Feb 27, 2008
    Posts:
    491
    Does this run on oculus quest and unity 2019.2?
     
  36. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    Can I ask where you found a dead link? All links should point to http://staggart.xyz/unity/stylized-water-shader/documentation/

    For underwater effects you could use the Post Processing Stack v2, and create a local volume with an "underwater" profile underneath the water. When the camera moves below the water surface, this profile will take effect. This profile could override the color grading to add a blue tint, for example. There are a bunch of effects in my SC Post Effects package which are useful for underwater effects, namely blurring and screen waving.

    I haven't specifically tested this, but recently some one told me they go it to work by adding the EnableDepthBuffer script to the Center Eye Anchor camera object. Without this, the water will turn invisible in a build.
     
  37. Byberg

    Byberg

    Joined:
    May 20, 2013
    Posts:
    53
    Hey! Love the work! Was going to purchase it but noticed that it does not support URP, LWRP or HWRP at this time? Is this coming?
     
  38. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    Thank you :) This is unfortunately not in the cards. The render pipelines works so differently that porting the shader and rendering over is as much work as starting from scratch. At which point it would no longer work in the built-in render pipeline.

    I'm conceptualizing a URP version, which will be an entirely new asset. I don't want to make any promises, as this may very well still be a year away, but at some point I'm going start on development (at least after other new assets are finished)
     
  39. Harran922

    Harran922

    Joined:
    May 6, 2019
    Posts:
    6
    Will this water shader support lwrp or urp?
     
  40. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    See my post above ;)
     
  41. CoCoNutti

    CoCoNutti

    Joined:
    Nov 30, 2009
    Posts:
    501
    Hi - curious if I can get transparency with the mobile shader as I can with the standard one? Need to see object under water if looking down into the water. Cheers.
     
  42. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    Transparency between the mobile and desktop shaders works differently under the hood. But both shaders share the depth and transparency parameters. Note that the alpha channel of the "Shallow water" color also affects the transparency in shallow water, this is in turn affected by the "depth" parameter. Hope that clarifies it!
     
  43. CoCoNutti

    CoCoNutti

    Joined:
    Nov 30, 2009
    Posts:
    501
    Thanks - still confused how I can achieve the same result though between desktop and mobile.
    On the mobile shader, all objects underneath only appear in silhouette, tinted by color 0 - I can't see, for example, the octopus face, whereas on the desktop I can have pretty much have clear water if I want to I can see the detail of underwater objects from above.

    e.g. Mobile shader
    [ mobilewatertest.png
     
  44. CoCoNutti

    CoCoNutti

    Joined:
    Nov 30, 2009
    Posts:
    501

    Also, do you know why my reflections in my test scene are 'upside down?? Example test scene:

    Screen Shot 2020-02-19 at 12.32.16 pm.png
     
  45. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    That's very unusual, never seen that happen before. Are you using any special set ups like VR or AR? Does this happen with every thing in the scene?
     
  46. CoCoNutti

    CoCoNutti

    Joined:
    Nov 30, 2009
    Posts:
    501
    Nohing special - just one camera, ios mode. I only had two objects on the water in the scene that were bobbing under and above the water.
     
  47. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    917
    Does this occur in any of the demo scenes as well? If that is the case, there must be a project settings that's conflicting, though I can't think of one. If you could send a zip of the ProjectSettings folder I can try to reproduce the effect. Should the reflection would fine in a demo scene, then it's likely something in the scene setup, any more information you can offer about it would be most helpful in that case.
     
unityunity