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

[Asset store] [Documentation]
[Video] [APK Demo] [Rate/Review]​

Highly customizable to suit your art direction through various parameters. This package focuses on providing artistic freedom, rather than a realistic water simulation.

NEW Version 2.0!
• 3 new demo scenes
• Revamped desktop shader
• 4 water VFX assets
• New mobile shader (up to 37% faster)
• Orthographic camera support
• Lighting modes (Unlit/Basic/Advanced)
• Shadow transmission
• Vertex painting support
• Water particle effects
• UX improvements
• Reflection blurring
• Tiling reduction (Desktop)
• Color gradient feature
• Improved wave animations (Desktop)
• Custom heightmap option

Read all about the update here

The style can be customized through a set of built-in textures, as well as by adding your own. These are automatically packed into channels, making this package customizable and lightweight.

Also includes a mobile shader, features can be disabled to suit your performance target. Effects also feature an optimized mobile shader. Minimum requirement is OpenGL ES 3.0.

== Colors ==
The water can be colored from shallow to deep through color fields, or through an integrated gradient editor.

The material reacts to lighting conditions accordingly. Supports GI and Reflection Probes.

== Intersection ==
Objects intersecting with the water, such as shores and rocks automatically receive a foam effect. Features several techniques for achieving this effect, more details in documentation

== Mask rendering ==
Intersection and opacity can be denoted through the use of volumes, or dedicated meshes.

Features:
• Custom inspector, intuitive design
• Intersection effect with other objects
• Surface foam
• Orthographic camera support
• Advanced and Simple lighting modes
• Refraction (Desktop only)
• Planar reflections with blurring (Desktop only, excl VR)
• Shadow transmission from Directional Light
• Shallow wave animation (GPU)
• 8 built-in normal maps
• 7 built-in intersection textures
• 5 built-in wave heightmaps
• UV-based tiling or World-space (endless water)

Contents:
• Island, lake and pond example scenes
• Desktop shader
• Mobile shader
• 4 matching water particle effects (splashes and circles) including shader.

WARNING! Does not support:
• Buoyancy
• Lab Renderer
• Reflections in VR (SPR)
• Spherical water
• Scriptable Render Pipeline

As seen in:
• The Trail
• Shotgun Farmers
• Re:Legend

Would you like me to see where you're using it? Submit a game for the porfolio!

Spoiler: Changelog

v2.0.0
Deprecated desktop shaders have been removed. A package containing version 1.50 remains in the package.

Added:
- 3 new demo/example scenes: Island, lake and pond.
- 4 water VFX assets
- New Mobile uber shader (up to ~37% faster)
- Orthographic camera support
- Lighting modes (Unlit/Basic/Advanced)
- Vertex painting support for intersection and opacity
- Support for Single-Pass Stereo rendering
- Reflection blurring
- Tiling deduction toggle (Desktop only)
- Color gradient feature (Desktop only)
- Additional waves layer toggle, for improved wave animations
- Surface highlight and Intersection distortion parameters
- Custom heightmap option

Changed:
- Inspector UX improvements, sections now function as an accordion
- Tiling is now separated for each feature (Normals/Waves/Intersection/Foam)
- "Surface highlights" is now called "Foam" for clarity
- Depth and Intersection maximum value ranges have been increased
- Desktop shader no longer uses tessellation, for wider compatibility
- Compressed textures option now automatically bakes textures when value is changed
- Increased UV size of included meshes to be more in line with World-space tiling
- Wave direction now also allows negative values
- "Custom" toggles for intersection and waves is now a dropdown menu option

Removed:
- Old demo scene and related assets
- Mobile Advanced and Mobile Basic shaders

v1.50
Replaced Substance functionality, textures are now generated on the GPU.
Customization options have been retained, so the changes are purely internal.

Added:
- Reflection Fresnel parameter
- Toggle for hiding the material inspector

Fixed:
- Normal Strength and Glossiness correlation

Removed:
- Random seed functionality

v1.40
Changed:
- Minimum supported Unity version is now 5.4
- Beta shader is now incorperated into the package by default
- Surface highlights can now also be darkened (useful for lava)

Fixed:
- (Beta) Incorrect behaviour when Normal Strength is set to 0
- Desktop shader not compiling on macOS

Removed:
- (Beta) Default ASE shader inspector, as it throws a warning when ASE is not installed

v1.31
Fixed:
- Streaking in refraction when camera is close to the water surface (desktop only)

v1.30
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

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
- Material inspector is hidden when the StylizedWater component is used
- Normal Strength and Wave Size are now a shader function
- Improved "Billowed" heightmap
- Improved wave animation in Mobile Advanced shader

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

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

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)

v1.26
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

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

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

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

v1.23
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

v1.22
Changed:
- Set Substance to 'Uncompressed' by default for Mobile
- Improved normal map blending
- Restored light reflection to its former glory

v1.21
Added:
- Shaders can now be modified using ShaderForge.
- Unity 5.5 support
- Demo scene with 30 free stylized models
- Option to randomize seed in inspector

Changed:
- Improved support for Substance material instances
- Changing materials shows/hides the new parameters automatically
- Wave vertex offset now follows the mesh's normal direction, rather than offsetting in the world Y-axis (useful for curved surfaces)
- Switched from glossiness to roughness type, for better results under low/no light conditions
- Inspector GUI improvements
- Substance will generate both texture maps regardless of "Generate all outputs" option

v1.2
Added:
- Custom inspector component for ease of use
- Fresnel color (alpha controls opacity)
- New mobile shader variant "Basic"
- Documentation now contains a parameter glossary

Changed:
- Previous mobile shader is now called "Mobile Advanced"
- Updated demo scene
- Set Substance to 'Uncompressed' for Desktop
- Mobile shader has been tweaked for performance

v1.15
Added:
- Fresnel control
- Multi-light support
- Rim color alpha now controls intersection amount
- Support for Unity 5.3.0 and up.

Changed:
- Fresnel color is now derived from Ambient Light rather than Directional Light
- UV/WorldSpace tiling values are more logical
- Reflection intensity is now bound to the glossiness parameter
- Depth control is more physically correct

v1.1
Added:
- Surface highlights.

Removed:
- Heightmap, since it was not used.

Changed:
- Name of depth buffer script to avoid conflicts.

v1.0
Initial release

Feature requests:

• Waves heightmap
• Flow direction
• Skybox lighting
• Orthographic camera support
• Realtime reflections
• Filter objects subject to intersection effect

 

Nice! 3 queries (priority order):
- Artificial surface highlight based on wave (to mimic specular reflections)
- Caustics (on underwater objects)
- Underwater effect?

 

Good call! Although I think the last two points would be outside of the scope of this project. To my understanding people usually achieve caustics through the use of Projectors and an underwater camera effect through a camera shader.

I'd like to add the ability to use the intersection texture on the surface as well, but tiled larger, much like in Windwaker. It warrants some experimentation

 

It looks really nice! Can you provide web or apk demo for testing?

 

Will do! My idea would be to expose the shader parameters in a UI, so you can try out all the things

 

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

 

Upcoming update (v1.1) will add surface highlight detail. Size and transparency are adjustable.

 

Just wanted to let you know this gif sold me on the asset. I'm getting it now and I look forward to this update. Thank you for sharing your work.

 

If anyone is experiencing issues with Unity 5.5, some underlying shader changes were made, which prevents this shader from compiling.

However, I have a fixed version. If you're set on using 5.5 and you'd like to use this shader in your project please contact me with your invoice number and I'll sort it out for you!

The manual fix for compatibility with 5.5 will be included in the next manual update. Unfortunately, It's pretty difficult to ensure compatibility with different versions of Unity, I'm currently looking for the lowest possible version it's compatible with, since not everyone is on 5.4 yet.

 

Received some important feedback from several users, aiming to submit version 1.15 this week!

Added:
- Fresnel control
- Multi-light support
- Rim color alpha now controls intersection amount
- Support for Unity 5.3.0 and up.

Removed:
-

Changed:
- Fresnel color is now derived from Ambient Light rather than Directional Light
- UV/WorldSpace tiling values are more logical
- Reflection intensity is now bound to the glossiness parameter
- Shadermap is now assigned by default
when resetting the shader
- Depth control is more physically correct

New demo image:



Shader as seen in "The Night's Willow"

 

Hi Jonathan, I just wanna say that you've done a great job with this water. It's a great new to see that you're still supporting and improve it with those new features and control options.

I'm working in a personal project and I'm pretty confident that your water will be the one that I'll use in it.

Keep working hard!!

 

Thank you for your kind words! I appreciate it

In the next update I'm aiming to add a custom inspector, so all the shader and substance parameters are in one place, and neatly organized. This update will introduce a slight price increase, because of the time investment and the added functionality.

I noticed I accidentally included my work-in-progress script for this in the last version. So all I can ask now is: please ignore it :>

 

Hey Jonny, I recently bought this shader and I've been using it for a project I've got going. It fits really well, love it, great job!

Custom inspector sounds really cool as well, looking forward to it!

I've got one question/request. I have day/night cycle going and I make small real time changes to some of the properties to make the water fit better, but there's this grey gradient effect ( fresnel ? ) that I can't seem to change at all, pictured in the image below. Is there any chance you can expose the controls of it as a property, so I can either remove the effect during night or change the color of it?

 

Hi,

Please send me an email (contact info is on the asset store page) and I'll fix you a modified shader with the fresnel color exposed (currently linked to the scene ambient color). I'll include the fresnel color in the next update, where the alpha channel will control its opacity.

 

A price increase is totally fair man, the new update sounds very interesting!

 

Making good progress on the custom inspector. Right now the undo function is too wonky for comfort

I've also added a toggle which allows you to use the intersection texture type (either the built-in or a custom provided map) as the surface highlight. When switched off this is derived from the normal map.

 

Did some experimenting with animating Substances, to see if I could move some of the texture cross-panning out of the shader. Which seems to be a huge performance bottleneck on mobile.

https://gfycat.com/TepidShrillCrayfish


The result is visually identical, but yields a 300% performance boost on mobile (tested with Oneplus One). Another benefit is that I can now utilize all of Substance's functionality to replace certain shader operations.

If you're interested in giving it a spin, contact me with your invoice number and I'll sent it out as soon as I've ironed out the kinks Feedback is much appreciated at this point!

 

Hey there, awesome stuff with this water shader... I'm about to buy it but wanted to ask if you could share some vertical examples using this shaders, luje waterfakks as well as using this very shader on a sphere or other surface that it is not 100% flat.

 

If you're worried about stretching, you can toggle world-space tiling

 

Version 1.2 has been submitted for review! Documentation is now available online, as is an Android APK demo. Links are in the first post.

Added:
- Custom inspector component for ease of use
- Fresnel color (alpha controls opacity)
- New mobile shader variant "Basic"
- Documentation now contains a parameter glossary

Changed:
- Previous mobile shader is now called "Mobile Advanced"
- Updated demo scene
- Set Substance to 'Uncompressed' for Desktop
- Mobile shader has been tweaked for performance

 

Just picked this up, loving it so far! The substance control is super neat.
However, there is a vital feature for me that is missing, and that is surface shadows.
I tried going about it by adding a plane on top of the water with a shadow cutout shader, but to no avail as the blending seems to eat up the shadows.
Any idea what can be done to amend this? Thankful for any help!

 

Hi, transparent objects cannot receive shadows, as it is not supported in Unity's rendering pipeline. This post should hopefully clarify this: http://answers.unity3d.com/answers/1198627/view.html

I realize this means the water can look very detached from an environment, but I do not know any way around this. Personally, I usually make the water at least 60% transparent, so you can see some shadowing underneath the surface.

 

Hey @Jonny10 i have a problem with the shader
first of all it is a great shader, a tremendous shader i have a great respect for your shader:

this is it in Redwood Tale were making.

However upon testing it in build it turns out the shader refuses to show up no matter what i do.

• The object is in scene with desktop shader
• shader is included in always include list

Shader shows me an error

Maybe that is the issue?


I did all i could, the water just refuses to build, i use Unity 5.4.0f3

 

Hi! I have not been able to replicate the error on 5.4.0f3 when building. Please shoot me an email (contact@jonathan3d.com) with any more details you can spare and hopefully we can work it out.

 

The next update will introduce some new content! Desktop shaders will work will multiple lights, as has been requested and have been modified to work correctly under low/no light conditions. Package is now also compatible with Unity 5.5.

The ShaderForge source for all shaders will be available. Users who own ShaderForge can make changes to the shaders as they see fit. However, ShaderForge is not required to use this package!

I have also had permission from the artists who worked on the assets you see in the demo image to include this with the package, as an added bonus These are from The Torch, our school student from a while back.

 

40% discount until December 31!

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

 

Just to let you know we are adding Stylized Water Shader to AssetStoreDeals.com.

When you have other sales, you can add them to this website yourself simply by pasting the link to your asset in the designated area.

Best of luck to you with this sale!

 

Thanks! I had already submitted it!

 

Pretty shader
Do you have a non substance version ? with textures without needing Substance plugin ?

 

Nope, using Substance in my pipeline has a lot of benefits.

However, you can export the generated maps and use these directly in the shader. You can do this by selecting the Substance material instance and choosing "Export Bitmaps (original alpha channels)". This will prompt a save location and export two .tga files: StylizedWater_normal and StylizedWater_shadermap. Assign these two in the respective slots in the shader and you will not be involving Substance anymore.


Is there any specific issue you're encountering with the Substance plugin?

 

It will work for a project using only few Substance materials ( less i use better it is, i don't want long game loading times because of textures generation, it was a disaster in Recore game).

 

Just purchased this package. All I'm getting is a grey surface - I'm using the latest Unity version and I noticed that the instructions say 5.5 is not supported. Is this the problem?

 

The note in the manual was regarding the Unity 5.5 beta, it works without modification in the official release. This will be removed from the manual in the next update, which I am finishing up tomorrow.

Please contact me at contact@jonathan3d.com with any information about your project setup, so we can work out the issue you're having.

 

New version has been submitted and will be available soon! http://u3d.as/A2R



Added:
- Shaders can now be modified using ShaderForge.
- Unity 5.5 support
- Demo scene with 30 free stylized models
- Option to randomize seed in inspector

Changed:
- Improved support for Substance material instances
- Changing materials shows/hides the new parameters automatically
- Wave vertex offset now follows the mesh's normal direction, rather than offsetting in the world Y-axis (useful for curved surfaces)
- Switched from glossiness to roughness type, for better results under low/no light conditions
- Inspector GUI improvements
- Substance will generate both texture maps regardless of "Generate all outputs" option

 

Hi Jonny,

Is possible to have the Intersection to work with an specific Layer ?

 

Regarding selective objects, to my understanding that is not possible. Because the shader takes the depth texture from the main camera. So multiple cameras would have to be used, I'm not entirely sure if, or how that would work. But it would probably add more complexity to your game than desired.

Or excluded objects would need a custom shader that excludes them from the depth buffer. But that would exclude them from any image effect that uses it too (for example fog and AO). So I'm afraid given my current knowledge and tools I won't be able to implement such a feature.

 

Maybe I am mistaken...but I was talking about the shoreline ( the rim..) that is generated from the water intersection with the objects. I want to use the Stylized Water Shader mainly for the shoreline, but it is colliding with another water plane where we have an animated surf wave and it is generating a shoreline in the intersection of the Stylized Water plane and this surf wave plane.

 

I don't own the asset yet but I might be interested in a solution there also. I am generating chunks of a planet and as you get closer to the surface, I plan on separating out the water into a separate meshes and using something like this. There shouldn't be any overlap with the chunks but my concern is that floating point precision issues might trigger this. It would be nice to have all water in a separate layer to keep it from interacting with itself. Alternatively, a trigger distance value vs -normal could provide a buffer against any precision issues.

 

I could create a variant which works with vertex color, so the intersection effect can be manually painted where wanted. Would that be a viable solution for you?

 

Hello @Jonny10 would you consider adding lightmaps support? This is for mobile

 

Yes, but how are we going to paint it over the intersection effect ? It would be better if could generate I depth map image from the intersection and save it localy. Your script would have an option to use this depth map for the intersection.

This is what some of the other water packages in the market are doing...

 

Objects with alpha blended shaders, like this water, do not contribute to Enlighten, so lightmaps will have no effect on the water surface, unfortunately.

This is an interesting suggestions, and warrants some R&D. I'll be sure to experiment to find a way to exclude certain objects from the intersection effect.

 

New update submitted!

Changed:
- Set Substance to 'Uncompressed' by default for Mobile
- Improved normal map blending
- Restored light reflection to its former glory

 

Is there any way to access earlier versions? I had a nice and narrow sun reflection the first time I tried it maybe two weeks ago, but it's gone no matter how I twiddle with the knobs.

I also get errors like

NullReferenceException: Object reference not set to an instance of an object
UnityEditor.EditorStyles.get_toolbarDropDown () (at C:/buildslave/unity/build/Editor/Mono/GUI/EditorStyles.cs:183)
StylizedWaterInspector.setStyling () (at Assets/StylizedWater/Scripts/StylizedWaterInspector.cs:614)
StylizedWaterInspector.OnEnable () (at Assets/StylizedWater/Scripts/StylizedWaterInspector.cs:94)

which didn't happen before.

 

Hey! I've been implementing your plugin into my webgl game. But when i try to build i get this error - `Procedural Material' could not be found. Are you missing a using directive or an assembly reference?

If i let it take me to the error it directs me to your StylizedWater class and highlights:
public ProceduralMaterial substance;

It works fine when i build to any other platform... Any ideas? Is your water supposed to be supported for web builds?

 

Thanks for your reply @Jonny10 !

 

This is due to an oversight on my part, the last update will restore the reflections. It's currently under review and will probably be available in a few days.

The Substance plugin is not supported on WebGL, I didn't realize this. I will add a check for this platform in the script so it won't be included in a build and you will be able to build without error.

 

Alright! Thanks for looking into fixing it! Please tell me when WebGL builds will work

 

Would you be able to make a water shader that works well from the side as seen in ori and the blind forest?

 

I think you're looking for something more like Liquid Volue https://www.assetstore.unity3d.com/en/#!/content/70992 or Liquid Physics Approximation https://www.assetstore.unity3d.com/en/#!/content/60764