Some background on how I'm rendering the water line, because it's almost arcane 🪄 #unity3d

The key goal is figuring out if a certain pixel on the screen is above, or below water. This in turn can be used to apply effects to a specific part of the screen. Image
I've tried a bunch of different things, none worked reliably, or were prohibitively expensive. Witcher 3 has this, so technically was possible! What ended up working flawlessly is rendering a subdivided plane directly on the camera's plane, then animating it.
Finding the point where it intersects with the water took the most effort, since it needs to account for any kind of camera rotation, aspect ratio and FoV. The green debug line represents this point. Started with a script here, easier to debug, then translated the math to HLSL.
With the intersection point (in world-space) known, the water shader's wave function is used with identical settings, so returns the exact same wave height. Position goes in, wave position comes out.

The waterline/meniscus does the same thing, and it drawn on top of it all.
The animated mesh is rendered into a 1/4th resolution texture, which can then be reused by any post-processing effect and shader. Teeny tiny gradient at the very top, as to remove any aliasing.
The underwater shading itself is garden-variety depth-based fog. It doesn't affect the water surface itself, instead the same shading functionality is incorporated into the water shader directly. So it ends up matching seamlessly.
But in order to prevent fog from affecting anything actually above the water, all the water meshes in view are rendered into a custom depth texture. This way it's possible to compare depth values between the water and environment, and exclude anything "behind" the water.
Final important visual factor turned out to be lighting. The fog/water color is lit by the directional light and ambient color, so it ends up looking mostly correct under different lighting conditions. Image
So, plenty of technobabble and nitty gritty details skimmed over, but that's the gist of my implementation! Proudest piece of programming so far, and it's 98% ready for the asset store 🥳

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Staggart Creations

Staggart Creations Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(