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

This is may be the case, but the shader already takes this into account and flips the coordinates when using OpenGL

 

Submitted version 2.1.0. Change log:

Changed
- Reflection fresnel parameter can now be set to 0, resulting in full reflection strength, regardless of viewing angle
- Desktop shader now renders in the Transparent queue, for better sorting between other transparent materials such as particles

Fixed
- Shader dropdown not having any effect since last update

 

Hi, will this support URP in the future?

 

No, but also yes.

Since URP compatibility means rebuilding everything from the ground up, I'm developing a new stylized water package specifically for the URP. This won't simply be identical to the current shader, but aesthetically similar. It's a good opportunity for me to approach things differently and explore new features or different techniques. Currently still prototyping and seeing what sticks. For the time being my Fantasy Adventure Environment package features a water shader for URP in the same vein.

This new asset will have a free upgrade path for people who own the current Stylized Water Shader package. For at least a month, after which there's a reasonable upgrade fee.

Hereby an open call to sound off with feature requests, so I can take these into account

 

waiting for urp version,!

 

I'm trying to set up the Stylized Water Shader in a scene where I'm using a cinemachine dolly camera. Adding the 'enable depth buffer' script to the main brain cam doesn't enable intersection effects and adding it to the dolly cam seems to break the dolly cam so that it no longer tracks properly. Is there a known and/or easy fix for this? Thank you.

 

The script should be added to the object with the Camera component, it doesn't have to be applied to any virtual camera's. Is this the case for you?

 

Thanks for the quick reply! When I added the depth buffer component to the brain cam initially, the intersection foam didn't appear in my scene. It only appeared when I added the component to the virtual camera (which seemed to break the virtual camera)... HOWEVER, now that the foam has appeared, it's stayed on even though I removed the component from the virtual camera! So, it seems to be working as intended now, although it was a bit of a roundabout way to get here hopefully it stays working! I will let you know of any plot twists that come up... thanks again!

 

Do you have any ETA for when URP stylized water package is going to be released?

 

An estimation would be by the end of the year, I'm currently working on URP/HDRP compatibility for another asset, which is taking priority. After which, I'll have a lot more time to continue working on it.

 

Hi where I can get your water shader?

 

You find it on the asset store http://u3d.as/A2R

 

I'm seeing this effect when trying to use the material on a "waterfall" mesh (just a curved plane really). The darker blue hourglass appears to follow the focus point of the camera, and it's translucent for what it's worth. Modifying the Transparency value just increases/decreases the effect of this as well.



2019.3.11 + SRP + Deferred, think those are the only things I've got going on

EDIT: Seems to be an Editor Scene only thing, in Playmode + build I'm not actually seeing it.

 

I'm having an issue with the brightness of the Water (using the mobile version). The scene's lighting is for nighttime, and there's a tinted directional light in my scene. It seems to be making the water brighter than the land surrounding. I've tried setting the Lighting to Unlit, then Basic, and then tried setting the Shallow Color to black.

I attached a screenshot showing the issue.

I'm having to use just the shallow color because the icebergs and glaciers were creating squares of "shallow" water around them. My solution was to add a plane slightly under the water plane.

Any way for me to make the water a darker shade while keeping my lighting setup?

 

Hi, is there a alternative way for the DepthBuffer Script on the camera ? I notice some major performance issues on some mobile devices. (especially Huawei)
So far this Shader is a bliss to work with.

 

The water uses the depth buffer to measure how far away objects underneath it are, so it's required for the depth and intersection effects to render correctly. On some devices, without it, the water would turn invisible. So I'm afraid it's a requirement.

The performance drawback in this case is that Unity does another pass on all objects, to get their depth. In Deferred rendering this is "free", but Forward rendering is better suited for mobile.

 

I'm using a trimmed down version of the water shader, but some players are reporting that it's drawing before the fog. On my machine it renders after the fog so this is only on certain platforms.

Tried changing the render queue of the water shader to be 3000+ and no effect. Do you have any suggestions?

 

I assume this is using a fog post processing effect? Transparent materials such as water do not contribute to the depth buffer, as such any depth-based effects like fog can't tell how far away the surface is and appear to ignore it. In this case, the fog effect should execute before transparant materials are rendered, and it will fog transparant materials purely on what's behind them. Still not ideal, but avoids them not being affected at all.

 

Just circling back on this in case you missed it. It might be something simple but I haven't coded many shaders so I'm not sure where to look.

 

I have, apologies! Since the water is flat, it will be shaded uniformly. In your screenshot, some of the terrain surface is facing away from the light direction, so they are a darker shade.

Setting the Deep/Shallow colors to black, will in any case make the water black regardless of any direct or ambient light. So setting these colors to a darker tint will decrease the brightness of the water. If you're using a fixed lighting setup, then using the Unlit lighting mode is viable, and you can tweak the colors to the point where you're satisfied.

Hope that clarifies it!

 

That's what I had tried, but this time I set Intersection to black as well and that did it (along with rotating the direction light a little bit). Icy water looks dark and imposing now.

Interestingly, I still found that directional lights (not moving) still affect the water shader's tint even when set to Unlit. That might be different from the fixed lighting you mentioned though.

 

Yes it's deferred fog with the v2 postprocessing.
I can't find any way to customize the fog draw order. It's frustrating because it renders properly on most machines. I guess we just have to live with it?

 

I see, the built-in fog effect cannot be modified in this way. It's possible this behaviour is deferent between DirectX and OpenGL/Metal. Do you happen to know if this occurs only on Windows or Mac?

Seeing as the deferred fog and "normal fog" use pretty much the same technique. It may be possible to enable the normal fog anway. Transparent materials (such as water) render in Forward rendering. So this may be a way to still apply fog to them. I'm not sure if the post processing stack forces fog to disable, if it's using deferred fog. But worth a shot!

 

When running android build with forward rendering water is not rendering at all if depth buffer is not enabled. Tested with several devices. It renders fine in editor.
I can live without intersactions and depth and understand that these cannot work without depth buffer. But water should be rendering, just without these.

 

The depth buffer is also used to drive the water's transparency, without this it is perceived as infinitely shallow and thus becomes completely transparent. Because of this, it is required. There are few slight manual modifications you can make to the mobile shader file, that will convert it to an opaque material:

Replace line 44 with:

Code (CSharp):

1. Tags{ "RenderType" = "Opaque"  "Queue" = "Geometry+0" "IgnoreProjector" = "True" "ForceNoShadowCasting" = "True" }
2.  

57 with:

Code (CSharp):

1. #pragma surface surf StandardCustomLighting keepalpha noshadow nolightmap  nodynlightmap nodirlightmap nometa noforwardadd vertex:vertexDataFunc

155 with:

Code (CSharp):

1. float DepthTexture494 = 1;
2.  

You can remove the entire block of code above line 155 surrounded by "Stylized Water custom depth" comments at this point. After which you'll have to turn the intersection and depth effect parameters all the way down, or they'll span over the water entirely.

 

Thanks! That made it work on mobile without depth buffer.

 

Is it possible to reflect the Skybox? This is especially viislbe in the Pond demo scene, where the mountains are not visible in the reflection.

Are there any workarounds?

 

When Planar Reflections are enabled, the skybox is always reflected (Even if "Reflect Layers" is set to 'Nothing').


An alternative means is to set the Lighting mode to "Advanced" and create a Reflection Probe that encompasses the water. The Glossiness and Metalicness parameters have to be turned way up before the water starts taking on reflective properties in this case.

 

@StaggartCreations Thank-you, that helps a lot!

I noticed that the Colors > Use Gradient checkbox does not work.

 

Me too, this has meanwhile been fixed in an upcoming update. By the looks of it, this was broken for a long time, but nobody including myself noticed

 

Finally have some progress to share on the state of Stylized Water 2, most of the functionality makes up water is there. There's still a few painpoints that need addressing, next to a whole lot of polishing/UI.

The main differences between the current version:
- Built for URP (hand-written for maximum performance)
- Single shader, scalable from mobile to desktop
- Separate controls for sun/environment reflection
- Depth calculation through scene depth, baked texture or vertex colors
- Improved GPU waves (should make buoyancy support possible in the future)
- Improved intersection effect
- Wave/foam painting through particle effects
- Caustics in shallow water
- Shoreline waves
- Translucency rendering on high waves

The scope remains the same, not aiming for a water/ocean simulation. But rather something that can fit a wide range of stylized/cartoony art directions and performance targets.

 

Submitted v2.1.2. Changelog:

Unity 2020.1 compatibility verified

Added:
- (Mobile) Enable Depth Texture toggle under Advanced tab. If the scene camera is intentionally not rendering the depth texture, this can be toggled. This ensures the water does not render as invisible when built on the devices (depth/intersection effects will be lost either way)

Changed:
- Removing the "Enable Depth Texture" component from a camera will have the camera stop rendering a depth texture
- Height- and normal maps textures are now in Linear-space by default

Fixed:
- Not being able to enable the Gradient color option

 

Hm, testing out Enable Depth Texture toggle. It seems that it have to be toggled on to even be able to use vertex color intersections. If you just toggle it off you cannot paint intersections anymore.

 

And btw using green vertex color for transparency works fine. So it is just red for intersections that does not work when depth texture toggle is disabled.

 

This water asset was my favorite one of all But a few questions:

can I create BEACH waves (the bigger waves. Not the deal ripples a lake has) with foams on the shore lines and all?

I use the built in pipeline, does this up port that?

Can I change water color?
Does it have underwater effects? (Fog, blurry camera, warped camera etc.)?

 

Afraid not, breaking waves so far have been more of a demo scene type of thing, given the complexity. Or it has to be based on a baked fluid simulation. Either way it requires some trickery, which is why it isn't very common in games.

The water color can be changed. There's a parameter for deep, shallow and horizon color.

There's no underwater effect included. However my post effect pack contains several effects that can be combined to achieve this (namely blurring, fog, screen waving). These could be added to a post processing volume that's placed underneath the water surface, so they become active once the camera goes underwater. Though this is simply a switch, underwater rendering with a partly submerged camera is a different beast

 

Added basic buoyancy support for Stylized Water 2. With the technique used for waves in the current package, this was never possible. This time around, I kept this in mind from the start.

This allows objects to float on the water. I won't go as far as to extend it with true buoyancy physics or boat controllers, as that's a different focus entirely. I'll see if I can add an integration for Dynamic Water Physics 2 package, which has all the bells and whistles.

 

You have a very interesting asset, pretty good job. I have a couple of questions:
1- Does the asset have underwater effects or do you plan to add it?
2- Do you know if it's compatible with Tenkoku?

 

There's no underwater effects included in the package. There is an underwater post processing preset in this package, which has effects for fog, screen waving and blurring, which is essentially what an underwater look amounts to. This is for the Post Processing Stack, so a box volume could be placed underneath water so it becomes active when the camera goes beneath the water surface. But there's no special rendering to cover the scenario where the camera is half submerged, this is a different beast

The shader doesn't pick on any third party fog effects, because the same code requires to be incorporated into the water shader. The same goes for any other transparent material/shader really. For shallow water, this is never really an issue, since the amount of fog you'll see on the water always matches whatever is behind/below it.

 

Ok, thank you very much.

And you don't plan on adding those effects to this asset? I mean, so you could create a more detailed underwater effect (for example where the camera is half submerged) and in addition we don't have to buy 2 assets. Anyway, do you have an example of how it would all look together? The effect under water using SC Post Effects Pack and Stylized Water Shader.

I'm looking for a water shader that fits in my game better, for now I'm using a free shader, but so far out of all the ones I've seen, yours is the one that fits the best.

 

No plans to add this I'm afraid, as it's outside of the scope for this package. Here's a mockup of using a post-processing volume under water with the Ripples, Color Split, Radial Blur and Fog effects combined:

 

Perfect, looks nice, I like it.
I'm pretty sure I'll go for your water shader in the end, and I'll probably buy the SC Post Effects Pack for underwater effects as well.

Thanks so much again for the help.

 

Hello!

im having trouble using the VFXs right now.

Im really not used to particle shaders btw.
How do you handle the set up?
The deer cross water animation you showed up looks amazing but i cant get it to work right.
Added the shader to a material, the material to the trail renderer, but not really looking any good.

Hope you can clarify thanks !

 

It unfortunately won't work with a trail renderer. The meshes created for the particle effects have a second UV channel, which controls the scale for the dissolve effect, since this had to be tweaked per effect. The mesh a trail renderer creates won't have this information, so it ends up giving the shader a scale of 0 to work with.

Particle systems for this sort of effect actually work best:

Since the particles spawn evenly behind the player based on distance traveled. While a Trail Renderer creates a strip mesh based on velocity, unless the character moves at a fixed speed, you'll get varying results. If you move really fast, the trail will retract at the same speed. While particles stay true to their lifetime, no matter how fast the emitter moves

 

Mmmm i understood what you explained but im far away from getting the same result.
im trying to dig into how the particle system works..
Is it too much to ask how you set it up or an example?
i would like to learn how to do it

 

The "SwimEffect" prefab is the same as shown in the earlier video: https://gyazo.com/edc4452a9dfe6d784d763342798bebe2.

Some of it's settings like "Texture Sheet Animation" or "Color over Lifetime" shouldn't be changed. But you can freely adjust the size, lifetime of spawn rate of the particles.

I checked, and I triggered the water splash and activated the swimming effects using this script:

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4.  
5. public class SwimEffects : MonoBehaviour {
6.  
7.     [Header("Effects")]
8.     public ParticleSystem swimEffect;
9.     public ParticleSystem waterEnterEffect;
10.     public ParticleSystem waterCirclesEffect;
11.  
12.     void OnTriggerEnter(Collider other)
13.     {
14.         //Checking against a tag
15.         if (other.CompareTag("Water"))
16.         //Checking against layer
17.         //if (other.gameObject.layer == LayerMask.NameToLayer("Water"))
18.         {
19.             if(!waterEnterEffect.isPlaying) waterEnterEffect.Play();
20.             swimEffect.Play();
21.             waterCirclesEffect.Play();
22.         }
23.  
24.     }
25.  
26.     void OnTriggerExit(Collider other)
27.     {
28.         waterEnterEffect.Stop();
29.         swimEffect.Stop();
30.         waterCirclesEffect.Stop();
31.     }
32. }

This has to be attached to a GameObject that has a BoxCollider with the "Trigger" checkbox ticked and a Rigidbody, your player likely already has these. So the OnTriggerEnter and OnTriggerExit functions actually fire.

Additionally, a BoxCollider (also trigger) has to be added to the water surface as well. You can see I added a "Water" tag to the project, and assigned this to the water object, in order to identify it. The result should be that the effects start to play when touching the water, and stop when leaving it. As I recall, it didn't work perfectly, since the water splash effect would also play when leaving the water, but it was only a demo.

Hope that gives some ideas!

 

i reeally missed those prefabs, thank you so much!
those fixed params where the ones i couldnt get right, now its way easier.

 

@StaggartCreations
Hey there, Recently added the v.2.1.3 package to our project and wanted to look at some of the _Demo versions for examples.
The Unity version:2019.3.06f
Had issues that all Shaders where broken on fresh install. Fixed some of them example of how below. But the shaders and prefabs for the stylized water themselves are still broken. Any thoughts for trouble shooting and fixing?

To fix them I went to the materials. Selected them and updated them to the Universal IRP Materials. Edit>RenderPipline>UniversalRenderPipline>UpgradeSelectedMaterialsTo Universal IRP Materials.
Took any other Straggler Speed tree files and changed their Shader to Speed tree... 7 shader.

Would be nice to get an update that addresses the above fixes.

 

Hello. I'm sorry if this has been solved before but I don't seem to find the answer yet.

I'm having an issue building for iOS as the water lacks transparency and looks like this (here are also the Build Player Settings):


And this is how it's intended working on Android whit the water settings



I'm not sure what I'm missing. Thanks for your help!

 

This package isn't compatible with the URP, so this simply won't work. The upgrade materials menu option only swaps out Unity's built-in shaders with their URP variant, but doesn't affect any custom shaders.

If you intend to use URP, you can send me a DM and I'll forward a download to link a preview version of Stylized Water 2, which is specifically built for URP. It's not finished, but is currently definitely usable as far as a water shader goes

This appears to relate to an entirely different water shader asset, I'm not its developer