Under water / above water split view, is this possible?

[som3on3]

@duke22

To expand on what some3one3 said, grab your water plane, rotate it 180 degrees so it faces down, assign an opaque material, tell it to write to a custom stencil, give it id 1. Add a flipped face “bucket” that contains your water, give it id 1 as well. Tell both of these objects not to render in the main pass, then mask your post effects in a material by stencil! This way it includes any displacement on your water plane.

Exactly
But i still didn’t find a way to add that cool line effect like in GDC
Anyone have code/ideea for that?

[Alessiana]

Hi Everyone, i’m trying to achieve the water line as well, and i’m almost there (i think) but i have a big problem.

I’m using this method, but the noises of the two materials don’t match.

@som3on3

This are my materials which works with Ryan’s method. (PostProcess + Translucent)

This is my situation:

Any suggestion to get these lines aligned?
Thanks!

[som3on3]

@Alessiana

Hi Everyone, i’m trying to achieve the water line as well, and i’m almost there (i think) but i have a big problem.

I’m using this method, but the noises of the two materials don’t match.

Any suggestion to get these lines aligned?
Thanks!

I said above, using custom depth with stencil was best method i could find at that time, tho i am testing different methods now to see if i get better results

[som3on3]

Seems that there is a major bug with ScreenPosToWorld (in MacOS at least, haven’t tested under Windows)
if you open a Material Instance, that function will return wrong values and the line separation will no longer work.
Tho, if you open a standard material, function will work as wanted. Maybe @ or someone else can look into this issue.

[ixicalibur]

@som3on3

Seems that there is a major bug with ScreenPosToWorld (in MacOS at least, haven’t tested under Windows)
if you open a Material Instance, that function will return wrong values and the line separation will no longer work.
Tho, if you open a standard material, function will work as wanted. Maybe @ or someone else can look into this issue.

working fine on windows for me, currently using it with above water hlsl sharpening, underwater hlsl fog hlsl Gaussian blur and screen distortion as well as the waterline.

Edit: forgot to mention im using material instances for all of them.
Edit2: i just played around with it in another project, and had offset problems so i checked the near clip plane and for reasons unknown to me it was set to 3 and not 10, though i have never had reason to change it.

[som3on3]

Can anyone confirm if this method still works with UE 4.20.3 ?
For some reason, stopped working for me, bad positions

[RyanB]

That method indeed stopped working after the addition of dynamic resolution and temporal upscaling to the engine. I ran into this for FNBR and I tried to get the old approach working, but was having issues getting something that worked on all platforms.

Due to time constraints, I ended up using the simpler method of just looking up WorldPosition (which in the post process material is calculated correctly for you), and then doing masking based on Z. Now obviously this only works for either:

1. A flat water plane
2. A water plane where you render either an opaque underside material to get the worldposition value solved directly for you or
3. You can use a custom depth render plane that includes your displacements, but then you have to calculate the worldposition of the custom depth in your material manually.

It is on my list to figure out how to get proper screen position world coordinates on all platforms but I am not sure when I will get it it.

[ImaginaryBlend]

Hello,

I have found two solutions one for PC and the second for mobile.
https://preview.ibb.co/crgdTe/nearplane.jpg
It is not very elegant but works for me so maybe it will help somehow to figure out something better

I’m using this solution in my Aquatic Surface:
https://www.unrealengine.com/marketp…quatic-surface

https://preview.ibb.co/kfFmgz/Screen_43.jpg

[AhoyGame (Ahoy)]

Ahh interesting! What’s the Nearplane node?

[ImaginaryBlend]

Just “View.NearPlane” , known as magic constant = 10

You can find more shader parameters here: https://api.unrealengine.com/INT/API…ers/index.html

[RyanB]

That looks pretty good! For the PC one, the divide by vector length could just be simplified the a normalize, but its basically the same thing.

Also for the next version of the engine, doing that bias scale on the screen position should not be necessary on mobile anymore since that was unified in code finally.

[Deathrey (DeathreyCG)]

I am actually having severe complications with underwater splitscreen. Normally I would render water surface stencil with front faces only. Logic becomes simple. If stencil matches, the pixel is above water, underwater otherwise. There is a small inconvenience that stock engine does not allow separate IDs for front and back faces and not allowing to write front faces only into stencil from a two-sided material. But in my case the approach is not suitable for seeing backface does no guarantee being underwater due to overlapping waves.

Comparing fragment world position Z at near plane vs displacement Z is complicated by XY displacements, namely the fact those are several orders of magnitude larger than view frustum section at near clip plane and approximating intersection does not yield enough precision at sane number of steps. Needless to say that sampling displacements per pixel at full screen several times is not something I’d ever would like to do.

What maneuvers do I have remaining, before calling it not feasible?

[ImaginaryBlend]

That looks pretty good! For the PC one, the divide by vector length could just be simplified the a normalize, but its basically the same thing.

Yes, that is true. This normalization only had a sense during my testing/debugging the mobile. This fragment can be even replaced by CameraVector that is already normalized.

Also for the next version of the engine, doing that bias scale on the screen position should not be necessary on mobile anymore since that was unified in code finally.

The screen position in the WebGL version will be unified too? In the current version I’m using a custom node for flipping Y:

#if WEBGL
return float2(UV.x,1.0 - UV.y);
#else
return UV;
#endif

I am actually having severe complications with underwater splitscreen. Normally I would render water surface stencil with front faces only. Logic becomes simple. If stencil matches, the pixel is above water, underwater otherwise. There is a small inconvenience that stock engine does not allow separate IDs for front and back faces and not allowing to write front faces only into stencil from a two-sided material. But in my case the approach is not suitable for seeing backface does no guarantee being underwater due to overlapping waves.

You should consider splitting into two materials. It will probably work faster anyway because you will be able to optimize it for custom conditions.

Comparing fragment world position Z at near plane vs displacement Z is complicated by XY displacements, namely the fact those are several orders of magnitude larger than view frustum section at near clip plane and approximating intersection does not yield enough precision at sane number of steps. Needless to say that sampling displacements per pixel at full screen several times is not something I’d ever would like to do.

Maybe just render the screen waterline into small texture and use the results in the z comparison?

[Deathrey (DeathreyCG)]

@ImaginaryBlend

You should consider splitting into two materials. It will probably work faster anyway because you will be able to optimize it for custom conditions.

That is counter-performant and does not address waves folding on themselves.

@ImaginaryBlend

Maybe just render the screen waterline into small texture and use the results in the z comparison?

Yes, as an option. I’ve considered it. It is a tradeoff. Lowering resolution increases the region, that will have have to be no-see through to account for error and adds additional overhead of setting the rendering.

[ChesherZ]

Hi everyone! I’ve been working on a quick and easy method to achieve this effect for some time now - my approach is very similar to Ryan’s original method, with a couple of small modifications for windowed view.
Here are my results so far:

There are currently some slight limitations ie. if the wave frequency is extremely high on screen, but all in all it’s been pretty stable.
With my limited experience it took me several months to get it running so I decided to make an asset pack to save others a ton of time:
https://www.unrealengine.com/marketp…slug/waterline

First time posting so any feedback and comments are super welcome

[WixZ]

@ChesherZ

Hi everyone! I’ve been working on a quick and easy method to achieve this effect for some time now - my approach is very similar to Ryan’s original method, with a couple of small modifications for windowed view.
Here are my results so far:

There are currently some slight limitations ie. if the wave frequency is extremely high on screen, but all in all it’s been pretty stable.
With my limited experience it took me several months to get it running so I decided to make an asset pack to save others a ton of time:
https://www.unrealengine.com/marketp…slug/waterline

First time posting so any feedback and comments are super welcome

That looks really nice! Would this work with my own displaced water material that uses gertsner waves?

[ChesherZ]

@WixZ

That looks really nice! Would this work with my own displaced water material that uses gertsner waves?

The current version - probably not. I haven’t done much tests with gertsner waves - the focus with this was more on sea/lake water as opposed to an ocean.
I do suspect that with some additional work you might be able to get it to work with some changes to the shaders, but generally assume that they are not supported for now

[anonymous_user_2d94c6071 (anonymous_user_2d94c607)]

@ImaginaryBlend
The truth is very good, a long time ago we got a very similar method, but unfortunately it does not work with displacement, we have used a classic method but with displacement, waves in
storm state etc.

[MostHost_LA]

Just set up a post process material and make the water with a custom stencil - then you can mask above and below the stencil using the stencil itself as the separation.
this way it doesn’t matter what kind of deformation the water takes.

alternatively, you can try to make the same gerstner math inside the PP, it’s more accurate, but costs more processing wise as you will now have likely 3 sets of math functions that are identical or nearly identical.
all solving for the same time, and similar locations…

[Haoris]

@MostHost_LA

Just set up a post process material and make the water with a custom stencil - then you can mask above and below the stencil using the stencil itself as the separation.
this way it doesn’t matter what kind of deformation the water takes.

alternatively, you can try to make the same gerstner math inside the PP, it’s more accurate, but costs more processing wise as you will now have likely 3 sets of math functions that are identical or nearly identical.
all solving for the same time, and similar locations…

What does “make the water with a custom stencil” means please?