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

Hahaha You're right I confused it with another of your assets we're working with, I'm sorry

 

Is there a way to edit the shader so tree billboards intersect with the water?

I had this issue with another water shader and the developer did something that made the shader intersect. Im asking them about it too, but I thought I should ask here since you know the shader best.

Its great water by the way - very versatile and good performance.

 

Setting the render queue value on the water material to 2899 will likely fix this. With the default value of 3000, the water renders over tree billboards (assuming the ones created by the terrain system). These have a render queue value of 2900, so having the water render before them will result in correct sorting. On my end, the water then properly intersects with the billboard meshes.

 

Thank you I figured it out. I removed the alpha:fade from the shader and now it intersects with billboard trees.

I have another question.

How can I turn on and off the reflection by script. I was to do this in my options so people can choose.

stylizedWater.useReflection = true/false turns planar reflections on and off in the script attached to my water object. But it doesn't actually turn the reflections on and off in the water.

If I start the game with planar reflections on then this will turn it off, but not on again.

If I start the game with planar reflections off it won't turn them on or off (although the checkmark in the stylized water script goes on and off in all cases)

Would I have to make a operate water object with a. separate stylized water script with planar turned on and switch between them?

 

Glad to hear that works for you. I wasn't required to modify the shader, but who knows!

Settings the "enableReflection" bool value on the water component will enabled/disable the rendering. And disabling it sets the reflection strength on the material to 0, otherwise it shows a gray reflection (default texture color). But it doesn't set it back to what it was, when enabled.

So when you enable it again, you'll have to use StylizedWater.material.SetFloat("_ReflectionStrength", <value>); to set it back to whatever value it was. It's a little counter intuitive, since you'll have to save the desired reflection strength value somewhere beforehand, but it works

 

thank you for the billboards I use a huge water plane like 2000x2000 - maybe that's why my billboards don't intersect. Unity is like love - full of mystery

it's really wonderful water. I love diving and swimming in it - it feels so wet.

if I disable the reflection during run time do you know if there any kind of performance hit, compared to if I disable it from the start and never enable it?

 

Happy to hear you like it!

I don't think there will be a noticeable performance hit. But toggling reflections does involve the creating/destruction of an object and texture. But if the game is loading anyway, a fraction of a millisecond probably doesn't make a difference. Ideally, it would be disabled by default, and enabled when needed. But I don't think it's it would be causes for concern otherwise

 

Hello again. Would your asset be compatible with Overcloud?

http://overcloud.me/compatibility.html

I have no idea about shaders, so I would be unable to make it compatible.

 

Any news on the URP version? Will it be for mobile as well?

 

I don't Overloud myself, so can't exactly test it. But judging by that page, it should be possible to add support for it. This requires some minor modifications to the shader. You can do this by opening the StylizedWater_Desktop.shader file.

At line 66, add #include "Assets/OverCloud/OverCloudInclude.cginc" underneath it. Note that the file should actually be located there, if you've moved the Overcloud folder, adjust the file path to match the location in your project.

At line 360, replace:

Code (CSharp):

1. c.rgb = staticSwitch857.rgb;
2. c.a = OpacityFinal814;

with:

Code (CSharp):

1. float4 finalRGBA = float4(staticSwitch857.rgb, OpacityFinal814);
2. OVERCLOUD_FRAGMENT_FULL_ADD(finalRGBA, ase_worldPos.xyz);
3. OVERCLOUD_OCEAN_ADD(finalRGBA, ase_screenPosNorm, ase_worldPos.xyz);
4. c.rgb = finalRGBA.rgb;
5. c.a = finalRGBA.a;

With this in place, Overcloud's effect (I'm assuming volumetric lighting) will be drawn on the water surface correctly. Let me know if it throw's any errors

 

It's practically finished, except for some minor touch ups and polish. I'm currently down to screenshots and documentation, which is the final stretch! I decided to omit some of the advanced features (interactive water and underwater rendering) as separate extensions. Otherwise it just drives up the price, and takes much longer to finish.

Like the original package, it's also mobile compatible. On low end devices (OnePlus One and iPhone 6s), it runs at about 36fps with all features enabled. Disabling the advanced features, which aren't targeting mobile anyway, brings it up to 60fps+. On newer devices (Galaxy S10/Nintendo Switch), all features can be enabled, without noticing a performance hit.

It's a huge improvement over the current shader, since I'm not using a node-based shader editor, so was able to optimize it rigorously.

 

It would be amazing if your water would support ripples and splashes like this:
https://www.reddit.com/r/Unity3D/comments/jcbar8/if_only_water_always_looked_like_this_irl/

Is this the kinda thing you mean by interactive water? Those flow distortions/refractions are amazing

 

Yes, that's exactly what I meant

This technique uses particle systems. I made a prototype that uses this a few months ago, but it's fairly basic and difficult to translate full characters bodies and boats into ripples. The ripples also can't bounce off each other. What I'm looking to achieve is the same technique as used in AC Origins, Uncharted 4 and Fortnite (example). I've conceptually laid it out, but there's still a lot to figure out, so I'm leaving for it for a rainy day.

 

Well our money is sitting here for the taking, please do take it

 

this looks beautiful man.

Does stylized water allow for DOF blur
What about stylized water 2?

also is SW2 only for urp or also Built in?

any update on SW2 release date?

I don’t want to be buy SW1 and then SW2 gets released lol! Unless ur doing some kind of free upgrade or reduced price upgrade.

Will you keep supporting sw1?

And lastly any specials coming soon? I see you have done some discounts in the past.

 

Thanks!

DoF ignores transparent materials, since they don't contribute to the depth texture DoF uses, unlike opaque materials. For shallow water, this isn't much of an issue, since the terrain below it is not much further away than the actual water surface is. So this unfortunately wouldn't be much different for Stylized Water 2.

I expect this to be released some time next week, after which a free upgrade will be available until the end of the year. It'll be exclusively for the URP, it unfortunately can't go both ways

The currently package will be still be maintained for bugfixes and compatibility with future Unity versions.

And I'm afraid we're not exactly allowed to share details about any upcoming sales, but I always accept participation.

 

I see. So my current DOF won’t be applied to this water? so my far out objects will be blurred except the water?

 

It depends, if there is something underneath the water, like a terrain it will still looks blurred. Though technically it receives the same amount of blur as the terrain does. Here is a frame of reference (water is ~10 units above the terrain):



If I were to remove everything but the water, it would be blurred completely. Since all the DoF effect sees at that point is the skybox, which is infinitely far away so gets blurred completly.

 

Oh ok. So it DOES blur. Damn that looks nice. I’ll be purchasing this soon. Just need to make sure it’s the one I need lol.

And particles are easily to implement? Like splashes and ripples while my character swims around?

Any support for water displacement coming? Like water movement around swimming animations? I guess i could just use your ripple particles for this.

oh I forgot to ask, can we adjust the movement of the water? I figure if I turned that baby red and yellow/orange and slow it down I can make it look like lava or if I turn it brown I can make it like mud.

 

The swimming particle effect spawn particles over distance so could simply be attached to a transform, whereas splashes are one-shots. I suppose it's fairly trivial to tie them into a character controller.

I've seen several people turning the water into lava, the color fields are HDR enabled which does help there. But there's separate control over animation speed for almost all features

 

Well I went ahead and bought it. AMAZING asset. Beautiful waters. A lot lighter than lux water. And my FPS is higher now. I’m rapidly creating different waters. Really happy with it so far. Good job.

What other updates are you planning to roll out for this asset? Any time lines ?

 

Also how do I fix this planar reflection oddity/bug? Please see gif attached. It glitches out on certain camera movements.

 

To follow up with my below GIF where certain items disappear or deblur, here is another file showing the reflection of the building clipping into the inside of the building when moving the angle.

also On another water (a fountain on the opposite side of the level) I see the wrong reflection. I see my Bay’s reflection showing the buildings.

Are these reflection only sharing one camera? How can I fix these clipping and debluring issues?

 

Are you using occlusion culling, or impostor LODs by any chance? It appears some meshes are culling prematurely.

Only one reflection renderer is supported per camera, which explains why you're seeing the reflection of another water body.

Nice to see you've got the effect hooked up

 

Thanks. Yes I got it up and running so far very happy other than the reflection glitches. I don’t have occlusion culling set up. But it still shows. Could that be the only reason this happens?

 

If you still have two water bodies rendering reflection at the same time, you should disable either one of them, since these'll likely conflict with eachother

 

Stylized Water 2 is now out! Created a new thread for it here.

There's a free upgrade until 2021, after which a 20% discount is available.

Thanks for all the support so far, this was my first asset released in 2016, and happy to see it still being used! Will keep this up to date so it works in future Unity versions. But other than that I'll be focusing on Stylized Water 2 until I've checked all the boxes on my feature wishlist

 

I thought about trying that. I’ll give a shot later today.
How can I prioritize which reflection I want on which water? I need them on both lol

 

ok so I have two water bodies.
One is an ocean and One is a fountain.

They are both on opposite sides of each other.

So when my character is walking halfway from the ocean to the fountain (pretty far from each other), can I deactivate the planar reflections from the ocean and activate the planar reflection on the fountain and have the fountain’s reflection camera over there instead? And vice versa? So this way my fountain water doesn’t reflect the building by the ocean water. (Which is wrong).

In other words, does the reflection prioritize Its camera on the first body of water or a random body of water? I’m trying to find a way around to having these two reflect their appropriate reflections. So this “hack” could work? I guess I should try it lol.

Also does this asset work with wavemaker? I saw your post how wave maker works with SW2 but I’m hoping it works with this one too.

 

Any advise on my above post?
Also I have a problem returned.
How can I avoid this camera /reflection culling? Please image attached.

Right side is the culling and right side shows how far the water is from building. It wasn’t happening up until now and this is the only water with reflection. It only happens when I get the camera verrrrrry close to the water surface.

Why does this happen and how can I fix it/prevent it?

 

FIXED IT! so i was thinking maybe the "offset" slider on the planar reflections module controls the reflection camera and sure enough this fixed it. i set it to 0 (it was only at 0.15) and no more culling. freaking. awesome!

Also I think I found a bug. I notice if I use any "toon" type of shader (like wind waker or borderlands type) on my characters or objects that has outlines, it triggers these giants dark areas in the planar reflections. if i remove the "outlines" from these toon shaders, the issues disappear. just wanted to let you know. maybe the reflections are being triggered by these outlines?

Luckily this doesn't'T happen with your SC post effects asset (ironically). lol!
I use the "edges" effect to get that Borderlands look and it doesnt mess up the planar reflections.

 

The reflection is rendered when a water mesh with the Stylized Water component falls within the camera view. So if two water bodies have reflection enabled, but are never both visible at the same time individual reflection renders can work. If not, reflection is rendered for whichever object was last enabled. You could implement custom logic that disables the Stylized Water component for the object you definitely don't want reflections to render for.

As for Wavemaker, I haven't exactly tested it, but given the way it works, it'll work with this shader as well.

The inverted culling happens when the camera goes below the position of the water mesh, which makes up the reflection plane. Normally not a problem, since if the camera is below the water, the top of the water isn't visible anymore. The pivot point of the mesh should be at the same height as the mesh itself in this case. But the "Offset" value pushes the reflection plane up/down, which is why it influences this behavior.

It depends on the technique used for the outline effect. Some outline shaders draw the mesh again, behind the original mesh, but slightly larger and with inverted faces/culling. For planar reflections to work, the reflection is rendered with inverted culling, so it's likely that the outlines meshes are inverted and draw over the mesh, resulting in a black silhouette. That's unfortunately unavoidable with these two techniques combined.

 

I see. thanks for the explanation.

So as you saw on my above, later post, I fixed the culling issue setting the offset to 0 a opposed to any higher number. which is great! I went to sleep REALLY happy.

I'm gonna try to see if I can implement a system where I disable certain reflections from certain waters at a certain distant in order to have the reflections working on the other body of water of choice. basically only have one reflection working at a time. should be easy to implement, just hoping that it works lol not a huge deal but would be nice to get this working

I'll report back.

and I'll have to give wavemaker a try.

 

Love the water effect! Thank you for your work.

Is there a possibility to make it work on a XY mesh, like if the water is on a wall/quad?

 

Happy to hear you like it!

If the water appears to stretch when you rotate it on its side, you'll have to set the Tiling Method to "Mesh UV" under the Surface tab. The "World-aligned" method creates a UV projected on the XZ plane.

Though you can open up the shader file and replace every instance of "(ase_worldPos).xz" with "(ase_worldPos).xy"

 

Hey Staggart!

What tips to you recommend to get better framerate when using planar reflections? i have everything at lowest quality, Fresnel strength is low and visibly is low (subtle reflection on a big body of water). also If i only reflect one layer as oppose to all of them, i get better framerates, but still in the 20's. any advice?

Any more love coming to SW1? I see you are having a blast with SW2 as I have that as well and loving the updates. but this project I'm asking for is not URP.

Also,
what exactly does the depth buffer do? i get this error, despite it already being added to the main cameras. I click "fix " and it stays there. nothing happens. also it flickers in out sporadically quickly and randomly. is this a bug?

 

Bump for below?

 

Apologies, you post seemed to have been buried in my notifications.

The best way to determine why planar reflections is gobbling up performance is to check the Frame Debugger. To render the reflections, a second mirrored camera is used. So if rendering the scene normally takes a lot of draw calls, reflections will be expensive as well. Draw call optimization is quite a subject on its own, but definitely the most important when it comes to rendering optimization. Using the layer mask as you have, is already a good way to limit this. The material properties only control the visibilty of the reflections on the water, so these have no effect on performance. A reflection at 1% strength costs the same as 100% strength.

Anything I wanted to do with SW1, and had been on my backlog for at least a year, required an overhaul. Which is what sprouted SW2, so I'm honestly not planning to change or add any features, only viable bug fixes and keeping it working in newer Unity versions.

As for the warning, it may be that the camera is set to render a depth normals texture, which automatically includes a depth texture, so it's a false positive. I'll be able to correct this

The depth texture holds the depth value for every opaque pixel, and looks something like this:

It is used by the water to determine how far away something is below the water, so is required to be rendered. In Forward rendering, this has to be explicitly done for a camera, which is what the "EnableDepthBuffer" camera component takes care of. In Deferred rendering, this is done through other means, so isn't necessary.

 

I see. thanks for the detailed explanation. I also use the Asset "Mesh combiner MT" and it works wonders for this draw call issue I have. I just wanted to figure out what other tricks I can apply. thanks agian.

And honestly I'm not sure what else you can add to stylize water 1, I was just curious as too what else youy can add.

I'm doing some black voodoos magic with the SC post process and the caustic to get under water caustics.. I basically just turn it on once the camera is under water. lol

 

Hey Staggart,

Thanks for the great asset.

I was wondering if there was a way to make the water appear paused? I tried manually setting _Wavesspeed and _Foamspeed to 0, but that moves the offset when you do it, which doesn't look right.

 

Just wonder, if swim effect suppose to look like the white stylized ring (behind the ship)
or am I missing something?

 

Yes, but in comparison you're ship seems to have a scale of x0.01, so it looks huge

 

Thanks for the answer. Yes, it was just a quick scene made from your demo.

 

Hello, we are using your asset, and everything good, but we have a constant problem from one project to another, that water for some reason being not visible in the android build. So we had to downgrade the asset version to 2.0.4 where we were able to get water to work in the android build
Unity version 2019.4.10f

 

Mobile devices tend to have a lower precision depth texture, it may be that transparency sorting breaks and the water is inadvertently rendering underneath the terrain/geometry. Increasing the camera's near clip value, and decreasing the far clip value will shorten the camera's rendering range, and increase the precision of the depth texture. After which, the water should appear as it does in the editor.

 

Hello! @StaggartCreations ! I'm using your awesome shader but somehow it's not visible on android!
How can I fix that?

Unity 2019.4.26
Galaxy S5 Device

Build on macbook

 

I recommend checking the first item in the troubleshooting section. So far, in all cases, this happens when Unity strips the depth texture from a build.

 

This shader can work without depth buffer? Because it doubles the amount of vertecies in scene, which is very bad idea for mobile devices

 

Hey @StaggartCreations
I just wondered, is there any way to rotate the water plane on the Y axis?
If you rotate the water plane, the object itself is rotating, but the way the water looks always stays the same.
Might be a strange question, but I'd really need that for a project

 

To some extend, yes. The depth texture is used for the color gradient and edge fading, as well as the intersection foam effect. When using the mobile shader, a "Disable depth texture" option will be available under the "Advanced" tab.

These effects will then be lost, though the intersection foam can be added through vertex painting as an alternative.

Sure thing. By default the shader uses world-space coordinates, so that everything remains persistent when moving or scaling the water mesh.

Under the "Surface" tab, you can set the tiling mode to "Mesh UV". After which, everything will align will the mesh's UV's. You may need to readjust the tiling value for several effects when switching to this (or adjust the mesh's UVs instead)