Search Unity

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

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

  1. adhochero

    adhochero

    Joined:
    Feb 2, 2017
    Posts:
    42
    hI I just bought this asset, but i can't figure out how to put the water in my terrain. in some tutorials they just drop something into the scene and scale it and put it at the level they want but i don't know what to drag in with this asset. is there a trick to get this to work?
     
  2. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    Hi, you can follow these steps to get started:

    1. (Optional) Create a plane object
    2. Create and assign a material to your water mesh and assign a shader found under /StylizedWater. Or use one of the included materials named "StylizedWater_*"
    3. Add the StylizedWater script component to your object to start modifying it to your liking.

    I'll be sure to include a prefab in the next update to avoid confusion.
     
  3. adhochero

    adhochero

    Joined:
    Feb 2, 2017
    Posts:
    42
    Hey thanks that worked.
     
  4. adhochero

    adhochero

    Joined:
    Feb 2, 2017
    Posts:
    42
    another quick question: what settings did you use for the water in the scene with the stylized nature pack? to get that look?
     
  5. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    I did not create that image, it's from a game called Sharpflint ;)

    If I had to guess, it looks like high opacity and glossiness values and fitting color use.
     
  6. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    I'm not sure I understand, could you provide a screenshot of what you mean?
     
  7. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    Just a intermediate update. I'm currently in the process of rewriting the shaders, starting with the mobile basic version. Because I want to rid myself of Shader Forge, since it offers limited control. This will ensure better performance and will allow me to implement new features such as orthographic camera support for the intersection effect. Filtering objects for the intersection effect is still something I hope to implement, so far the experiments have been successful, but not 100%.

    I can't give an estimate as to when the first improved shader will be released as much of this process is uncharted territory. Which is also pretty exciting :D

    Thanks for the support so far fellow game devs! I'm happy to see people satisfied combining this package with their game environments ;)

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

    se

    Joined:
    May 20, 2013
    Posts:
    38
    I'm now getting this rather sharply defined, darker area in the water that shifts and changes in weird ways based on camera position. No slider has any effect on it. I'd really appreciate access to earlier versions.

    Edit: I just forgot to disable shadows for the water mesh. :oops:
     
    Last edited: Mar 4, 2017
  9. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    Could you shoot me an email (contact@jonathan3d.com) with a screenshot of the issue? I'd like to look into it.

    The Asset Store doesn't support version history, unfortunately. However, I am going to turn my portfolio website into a documentation/support page soon, which will have previous versions available.
     
  10. se

    se

    Joined:
    May 20, 2013
    Posts:
    38
    I sent you a PM with a WebM.
     
  11. JMeer

    JMeer

    Joined:
    Mar 3, 2017
    Posts:
    20
    We really love the shader! It fits our environment perfectly. We are creating a game with the HTC - Vive. While the mobile shader is working perfectly for us, the reflection of the water seems to have some problems to be rendered correctly on the HTC - Vive. Has something to do with the camera setup. To render the so called 4D effect the camera left eye and right eye have some offset between them.

    I've found a lead to a similar problem. And potential fixes https://forum.unity3d.com/threads/5-4-beta15-reflection-rendering-wrong-in-openvr-htc-vive.398756/

    I'm pretty handy with coding myself, but have no experience with shaders. Maybe you could point me in the right direction with viewing the the link i posted. And i will test (or implement the fix myself) For HTC - Vive / Oculus compatibility.

    Let me know!

     
    Last edited: Mar 4, 2017
  12. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    I will have to set up OpenVR and see if I can replicate the issue, from there on I can try some things out and get back to you!
     
  13. JMeer

    JMeer

    Joined:
    Mar 3, 2017
    Posts:
    20
    Thanks! Good thinking!
     
  14. pro-bchevalier

    pro-bchevalier

    Joined:
    May 30, 2013
    Posts:
    46
    Hello @Jonny10 , I recently purchased your asset, it seemed very promising but I can't seem to get it to work.

    The demo scene is working just fine, but when I'm trying to copy/paste the water asset in a different scene, it just doesn't work as expected(the water is pretty much greyed out, depth doesn't show, intersections neither).
    I tried building the water plane from scratch(add the proper material, then add the script) and it doesn't work as well.
    Please find a gif of the issue attached.

    Our project is using Unity 5.5.1p2, set to mobile.

    Could you please advise?

    Thanks!
    ben
     

    Attached Files:

  15. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    Replied to your email! ;)
     
  16. pro-bchevalier

    pro-bchevalier

    Joined:
    May 30, 2013
    Posts:
    46
    Thanks for the support!
    So, after adding the "Enable Depth Buffer" on the camera, everything worked as expected :)
     
  17. SilverStorm

    SilverStorm

    Joined:
    Aug 25, 2011
    Posts:
    669
    Right now whenever I click my water I get 999+ errors of...
    "GL.End requires material.SetPass before!"

    I have to close the project and re-open it but usually whenever I re-open it when there are errors unity will recompile your scripts.

    I get a lot of other similar errors in the past and I believe they are because you are using unnecessary components such as a script and a sbar substance which complicates it when it should be a simple select water shader on a flat plane instead.
     
    Last edited: Mar 12, 2017
  18. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    The package makes no use of the GL class (low-level GPU API), so this could very well be caused by some aspect of your scene/project.

    I'm sorry to hear you find some aspect overcomplicated. However, the scripts and Substance use are simplified by the custom inspector for this purpose. Some features would not be able without these things ;)

    If you encounter any errors which prevent you from working, please don't hesitate to shoot me a quick email. I try to replicate any use-cases before publishing, however everyone's project is different...
     
  19. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637

    Small, but useful, new feature will be added: intersection distance. For smoother intersection edges.

    Made some good progress on the shader rewriting too. It now uses a direction vector for the waves, so it can flow in the direction you desire. Some features, like surface highlights, intersection and cross-panning can be disabled and won't be compiled. Which removes the need for a both a high- and low-end mobile shader, as you can just disable taxing options. I'm down to optimizing the lighting model, so it performs optimal on mobile devices.
     
    PressEveryButton likes this.
  20. Randomman159

    Randomman159

    Joined:
    Oct 26, 2013
    Posts:
    11
    Hi Jonny, I'm having an issue where selecting the water simply crashes Unity. I'm not quite sure what is causing this, and I'm failing to find a nice work around.

    Any help would be awesome.
    Joel
     
  21. Randomman159

    Randomman159

    Joined:
    Oct 26, 2013
    Posts:
    11
    Here a picture of the inspector (sometimes it doesn't crash, as long as I'm in debug inspector), and (top) a screenshot of our water usually.
    The bottom water is what it looks like when it's likely to crash. Basically, at this stage I've learnt not to click on it if it looks like this. Seems to sometimes go back to normal.

    upload_2017-3-17_16-9-32.png
     
  22. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    What happened here is that the Substance materials failed to generate somehow. Curious, because I built in a failsafe for this. You can reinforce this by setting the "Generate all outputs" option on the Substance material. I already have this set to default for the next version.

     
  23. Randomman159

    Randomman159

    Joined:
    Oct 26, 2013
    Posts:
    11
    We found there might have been a fix by Unity regarding failed substance generation in 5.5. We happened to have a fair few reasons already that we wanted to update so we just to the leap. That seemed to fix it.

    Thanks anyway!

    One other question, if we have something in front of the water such as a sword, then the refraction of the water behind it sometimes shows the sword. Is this unavoidable, or are we missing something?

    Cheers,
    Joel
     
  24. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    Hi Joel,

    This is a common artifact with refraction shaders. I know what causes this, and have a possible solution lined up. However, I won't be able to address this until I get to rewriting the Desktop shader (currently working on Mobile first, where I will add features until it reaches Desktop level).
     
  25. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    New update is available on the Asset Store!



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

    Added:
    - Intersection distance parameter (as seen in GIF)
    - Prefabs
    - Square and Circle water mesh, high-poly and low-poly variant
    - Transparency parameter for Mobile Basic shader

    Changed:
    - Set Substance to generate all outputs by default, to avoid empty textures

    Removed:

    - Disabled shadow-casting in shader, as this is unwanted behaviour anyway
     
    PressEveryButton and docsavage like this.
  26. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    Thanks to some faithful tester, the banding artifact which occured on some mobile GPU's has been fixed. The update has been submitted to the Asset Store, and will be available in roughly a few days.

    v1.24
    Changed:
    - Fixed depth banding artifact on some mobile GPU's.

    I would also like to point out that online documentation is now available! http://staggart.xyz/unity/stylized-water-shader/documentation/
     
  27. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    Alverik likes this.
  28. SilverStorm

    SilverStorm

    Joined:
    Aug 25, 2011
    Posts:
    669
    The stylized water inspector script gave a null reference error during playmode, nothing major but it did concern me, then I removed the script and realized you can just create a plane and assign the shader and tweak the material settings, no need to add the inspector at all, problem solved so far!

    Here was the error in case anyone gets it:
    NullReferenceException: Object reference not set to an instance of an object
    StylizedWaterInspector.getProperties () (at Assets/StylizedWater/Scripts/StylizedWaterInspector.cs:144)
    StylizedWaterInspector.OnEnable () (at Assets/StylizedWater/Scripts/StylizedWaterInspector.cs:98)
     
  29. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    Thanks for bring it to my attention! It's an error because the script seems to have an existential crisis o_O It should still work on the next frame, but I'll be sure to add an additional null check here!
     
  30. SilverStorm

    SilverStorm

    Joined:
    Aug 25, 2011
    Posts:
    669
    So far it's looking pretty nice and working just fine without the inspector, no errors so all good for me.
    I did notice and I am not sure if this is a performance decision or what but the edge shoreline effect seems to appear based on the camera's orientation. So in other words it looks like a screen space effect and not a global one, is there a way to change that or?

    Sample1: Viewed on an angle it shows the foam from the two nearest sides of the plane but not the distant back edges of the plane.
    CropperCapture[6].png

    Sample2: Camera is facing straight and only shows the most nearest edge shore, the left and right edges of the plane show no shoreline.
    CropperCapture[7].png
     
  31. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    Yes, it is a screen-space effect. Unreal Engine has shader features which allow more advanced ways of achieving this effect, but then again, that's in UE4. I'm afraid trying to port these features to Unity is outside of the scope of this package.

    I want to look into alternatives, such as pre-baking an intersection mask. But my priorities for this package are the rewriting of the shaders first, which will see platform-wise performance increase and orthographic camera support, as well as several other features.
     
  32. SilverStorm

    SilverStorm

    Joined:
    Aug 25, 2011
    Posts:
    669
    Oh yeah no worries, I was just wondering if there was a setting you put in there somewhere that I had missed. I thought you created the shore effects using the Mesh colliders on a plane or something but now it all makes sense.
     
  33. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    Fixed the aforementioned error and added two new wave types and one new intersection, as shown below:

    v1.25
    Added:
    - Cells + Cloudy wave types
    - Perlin intersection style

    Changed:
    - Minor script improvements
    - Improved appearance of the different waves and intersection styles



    Update has been submitted and will be under review!
     
    Last edited: Apr 10, 2017
    docsavage likes this.
  34. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,303
    Looks great, quick question before buying:

    How much of this works WITHOUT using Unity Terrains? (hopefully all of it?)

    Background: my world geometry is entirely procedurally generated (shoreline, rocks, hills, etc - all of them custom meshes built at runtime). Some other water assets only work with Unity Terrain (e.g. the wet sand effect)
     
  35. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    None of it requires interaction with your terrain, as the shader effects are not dependant, only the camera's depth texture. So you are free to use it with any other geometry.
     
    a436t4ataf likes this.
  36. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    274
    What does this shader look like from underwater? Is it double-sided at all or is it totally invisible like the built-in water?
     
  37. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    It is one sided.

    One way around this is to duplicate your water mesh, flip it and assign another material variant with some different visual settings.
     
  38. brisingre

    brisingre

    Joined:
    Nov 8, 2009
    Posts:
    274
    That'll probably work. I'll try it out.

    EDIT: Looks great. Underwater trick totally works. Nice shader!
     

    Attached Files:

    Last edited: Apr 9, 2017
  39. FeastSC2

    FeastSC2

    Joined:
    Sep 30, 2016
    Posts:
    931
    Yea it'd be great if it could have that same effect on the side like in Ori. I'm looking for a water that can do that.

    Could you show an example of what it's like if it were used in a side scroller game like Ori?
     
    Last edited: Apr 12, 2017
  40. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637


    It does not behave entirely correct. Since the wave animation will shows cracks where the horizontal and vertical plane. A way around this is to not use the wave animation entirely, or to use two separate planes.

    The top images shows two planes, both with the water shaders (note that the vertical stretching is due to the world-space tiling only working in the X and Z direction.). On the bottom the side plane is a standard Transparent shader.

    Do note that the intersection and depths effects are lost when using a 2D or orthographic camera.
     
  41. vARDAmir88

    vARDAmir88

    Joined:
    Sep 9, 2015
    Posts:
    22
    Hi,
    I'm looking to buy this shader but I have some questions.

    1. If I change directional light rotation or color would water change color? I have day and night cycle in my project
    2. Is it possible to choose which object would be refracted/reflected? I want to use this water in mobile project and have as less drawcalls as possible.

    Right now I'm using Unity's water with disabled reflections and refract layers for player and ocean bottom
     
  42. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    The shader is GI compatible so it will react to a skybox or lighting color change. The mobile version does not have refraction, and uses a cubemap texture for reflection. Unlike Unity's water shader, which utilizes a secondary camera for these effects. Something I hope to get around to as well, but not for mobile platforms.
     
  43. vARDAmir88

    vARDAmir88

    Joined:
    Sep 9, 2015
    Posts:
    22
    Thanks for answers. So mobile version doesn't have transparency at all or I will see underwater objects without refraction like in Unity water?
     
  44. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    It is transparent, but lacks the refraction effect for the mobile shaders ;)
     
  45. vARDAmir88

    vARDAmir88

    Joined:
    Sep 9, 2015
    Posts:
    22
    That is great! Thanks! :)
     
  46. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    brisingre and AlanOToole like this.
  47. SebastianMaj

    SebastianMaj

    Joined:
    Nov 28, 2013
    Posts:
    112
    Hey! I am interested in this asset while the sale is on. Does it support spherical objects? I have planets and was wondering if I could use it as water for them.
     
  48. Alverik

    Alverik

    Joined:
    Apr 15, 2016
    Posts:
    411
    This looks really nice! I've checked many water shaders and none really looked how I wanted (I prefer artistic rather than realistic). Wish I had seen it earlier, but now I'm broke, lol. So it'll have to wait for a while. Will keep an eye on this thread though :)
     
    Last edited: Apr 21, 2017
  49. StaggartCreations

    StaggartCreations

    Joined:
    Feb 18, 2015
    Posts:
    1,637
    It is possible, but not ideal. One problem you might face is your UV's. Since the World-Space tiling feature only works on the Y-axis, it would stretch on the sides of a sphere. The alternative is to toggle it off and use your mesh's UV, however that will likely show texture seams. When using the wave animation cracks in the mesh will show along the UV borders as you can see here. So all in all, I wouldn't entirely recommend it.

    If your sphere UVs are laid out like a world-map you can cover the seams using something like polar caps.



    Thank you! The aim is indeed to provide artistic control, rather than a water simulation. ;)
     
    Alverik likes this.
  50. SebastianMaj

    SebastianMaj

    Joined:
    Nov 28, 2013
    Posts:
    112
    Alright sounds good, I may give it a try. The planets are procedurally generated, I only want to have small lakes nothing really big. My algorithm takes a regular sphere with a ton of verticies and it stretches them based on a Perlin noise. So I was planning to get another sphere into the center of the planet and then just scale it based on the planet and that would be the water.
     
unityunity