OpenGL Water Tutorial 8: Soft Edges (FINAL)

Final episode of the tutorial series about programming 3D water using OpenGL!

Smoothing up those hard water edges this week!

DuDv Map and Normal Map:

Conversion Code:

Conversion Explanations:

gl_FragCoord:

One thing I didn't mention: if you want to make deeper water look murky then you can add something like this into the fragment shader:
refractColour = mix(refractColour, murkyWaterColour, clamp(waterDepth/60.0, 0.0, 1.0));

Common Problems:

-If the edges of the water quad look a bit glitchy and jagged (especially when you zoom out with the camera) then you may have a problem with the precision of the depth buffer. This can be fixed by increasing the NEAR_PLANE value of your projection matrix in the MasterRenderer, or by changing "new PixelFormat()" to "new PixelFormat().withDepthBits(24)" when creating the display.

Series Overview:

1. Introduction
2. Rendering to textures
3. Clipping planes
4. Projective texturing
5. Du Dv Maps
6. Fresnel Effect
7. Lighting
8. Depth Effects

End of video music- Kai Engel, "Waking Stars":

[ThinMatrix]

If you're getting black artifacts on the water after adding the normal into the fresnel calculation then try adding the following line after the 3 fresnel calculation lines:
refractiveFactor = clamp(refractiveFactor, 0.0, 1.0);

[CodeParticles]

@ThinMatrix, my god. I apologize so much for being almost 7 years too late but you sir are a GENIUS. It took me about 2 weeks to fully digest your entire water texture series and it's finally coming along beautifully. I can't thank you enough on how terrific your tutorials are and I watch every video from years back until your recent dev blogs. Cheers~ 👍👍

[brandonbrownlee]

Great tutorial! I've enjoyed your videos. I found a neat thing we can do with your current water setup to quickly obtain two-sided water. I don't think this was mentioned in the water series but I could be mistaken.

If the viewer is originally on the top side of the water then we grab the refractive and reflective textures with the clipping planes clipping everything above and everything below the plane respectively.
Well the opposite is true if you're under water. Use opposite clipping planes, ie clip everything below the water for the refractive texture and above the water for the reflective texture (if you want underwater reflection which IMO is kind of too much).
Then the simplest thing to do in the fragment shader is to test if gl_FrontFacing is false, in which case we're looking at the back side of the water plane, and in that case set the output color to the refractive color and then you will be able to see everything above the water, from the bottom side of the water plane, through all the calculated distortions.
Also make sure to glDisable(GL_CULL_FACE) during the rendering of the water plane.
I'm sure there are other neato things that can be considered/flipped when the viewer is underwater. I'm considering doing some sort of extra scene distortion or perhaps fog to get the underwater feel for the surrounding environment. Not sure what yet but I thought I'd pop in and share this with everyone. Thanks again!

[KaletheQuick]

I'm going to take a vacation, sit down, and follow your code in this tutorial. It's wonderful. I learn so much when I follow along at home :D

[spooderman]

Have a fantastic week as well and good luck with the kick starter!

[VectorIV]

Big thanks, mate! I couldn't have done it without your tutorials. They're super helpful and easy to understand.

[mitchyouker]

Just got done adding to my engine! I must say the water looks rather awesome! I can't wait for the kickstarter!

[TheSchoolDestructer]

Thank you a lot for making these tutorials. You really have a talent for explaining this stuff and your dedication is admirable! I've played with pretty much all the parameters in my implementation of your water tutorial and noticed some interesting stuff. Like you I had terrain in the scene. My rig has integrated Intel and dedicated nVidia GPU. IDE always runs it on Intel one, and though I was satisfied with it for a time, I decided to give nVidia a test run. On it I got a horrendous tearing of my terrain mesh. It looked like someone ripped a piece of paper apart, and the gap was small in the distance but would get bigger as you closed in (this was not just perspective). Anyway, it turned out that if you're using clip planes, you need to redeclare a certain interface block in your vertex shader (it contains gl_Position and clip planes array). Failing to do so yields undefined behaviour. Redeclaring removed the problem. If glFragCoord is used it needs to be redeclared too. Specification is really useful for hunting down weird glitches like this.

Also, on nVidia I couldn't unglitch the edges completely. I suspected all kinds of stuff, but I've understood this tutorial very well, so I started rendering the water depth gray-scale instead of water textures and saw white edges. Outside the edges, depth texture has maximum depth value. Now, because of filtering, those neighbouring white pixels influence edge depth pixels and we get big water depth values where we shouldn't, defeating the purpose of all those water depth based edge softening coefficients. I solved this issue by raising the refraction clip plane relatively a lot. The thing is, we really need our water depth to be computed properly, and if I understood correctly, we really only pick between seeing occasional incorrect refraction/reflection or a glitchy pixel, and the former is far less obvious. Intuitively, I think it's way less likely to get a refraction that shouldn't be there than a reflection, so you can be more generous with raising the refraction clip plane, especially as it's so important for soft edges. Also I had problem with dark pixels on Fresnel effect, but I figured out why that was and clamped the dot product. It's crazy how many glitches I got on nVidia and on Intel everything looked perfect.

Anyway, bottom line is that I strongly advise trying and testing your renders on different GPUs from different vendors and steering clear of undefined behaviour. Especially as you're so close to releasing your game. I do hope you will be able to get back to Socuwan somewhere in the future, it's too good to be forgotten. Wish you luck in all your projects and I hope these remarks help some guys out there.

[AstroTibs]

11:34 wow. I added that in as a bandage solution a few episodes back, and then removed it when you started promising to softened the water edges. Now here I am putting it back in again.

[donkas]

The water depth factor can also be used as the mix factor of refraction color and green blu water color, to let deep water seems more blue and shallow water more transparent.

[Vinke]

Thanks for this tutorial ! It allowed me to code a small library in C++ which allows to add water surfaces with incredible realism !! With sand textures it really gives a beach effect, it's really very pretty !

[mvl]

Great tutorial, thank you!
This is an example of high quality content on yt.

[tonksonk]

The water looks extremely real to be honest(at least to the extent of a computer), not gonna lie this tutorial series is starting to get pretty good :)

[ImSoNotSleepy]

Are we going to get tutorials on animations? I really would like to know how to implement those :D

[Kahitar]

Very nice series on water. Was a lot of fun to follow along, thank you :)

[ryklin]

You had me at tutorial 7. These additional concepts are simply over the top! The only difficulty I experienced is discriminating between all the subtle differences made by slight code tweaks. In part that is due to the dynamic nature of the scene, and then also because of my untrained eye. For example, I can't see how adding clamp(waterDepth/20.0, 0.0, 1.0) to the totalDistortion makes a difference. However, I'm sure in time I will learn to appreciate it.

[TheMaginor]

For true diffraction you also need the rendering of the diffraction map to use a slightly different projection (to mimic the pysical phenomenon called diffraction).

[xDevelinful]

Thin Matrix Great as always, it would be great if you can make a culling tutorial somewhere in the near future. Using quad/oc trees because it is a rather important topic.

[GieneqAD]

I came across one pretty cute effect - using flow map in varying speed and direction of waves :) Method is very simple and gives similar effect to curve-based procedural river flow seen in new Unreal ;)

[plokki]

If your water is still pixelated on edges after this tutorial, be sure that your refraction texture has the same resolution than your display ! The reflection texture size doesn't matter, you can reduce it.