Final Water Polish
When I first created the Gerstner Wave I left it in a separate material in which I didn't intend to integrate it into the water system until after I had finished adding other features. This was because I was being a bit cautious. I didn't want it to break like the Render target fluid simulation broke. Now that I have added the Gerstner Wave it has opened a few doors to changing the aesthetics and functionality of the Water system. So this is a bit of a crazy update on the water system.
Gerstner Wave
Gerstner waves are supposed to be stacked on top of each other otherwise it just looks like a sine animation. I remembered this from the tutorial by Dokipen where he stacked 4 Gerstner Waves on top of each other. Another Example is in Ryan Brucks's Distance field water shader where he mentions he stacked 8 Gerstner waves in the description of his video. I saw a really cool water system in a tweet about the water in Blazing Sails and I wanted to reach out to the developers to ask if they are using Gerstner Waves for their water system. Luckily they are active on Discord so I joined and asked if they were using Gerstner Wave and if so, how many. They replied and said they had 40 Gerstner waves! 😲. When I was looking at Stencil tutorial by Nilson Fernandes de Lima I noticed that he and a few other members of the UE4 Forums: https://forums.unrealengine.com/community/work-in-progress/1519072-community-project-free-ocean-water-shader were working on Community FREE Ocean Project. Once I downloaded his project I learned that this project also had 40 Gerstner waves! It produces brilliant results, especially for stormy weather condition. However, It impacts on the performance.
I added in the option to add Gerstner waves in powers of 2 between 8-16 instead of having 40 Gerstner waves. This way, it can be customised based on preferences and less heavy on the performance. you wouldn't want 64 Gerstner waves on a calm lake, its a waste of performance. Why Powers of 2? It's just a habit I picked up on and its generally good practice.
Custom Depth Buffer (Translucency sorting order fix)
As soon as I added in the Gerstner Wave I had an issue with the translucency sorting order. I did some further research on how I can fix this and I found an 80.lv article by Adam Homoki: https://80.lv/articles/cartoon-water-shader-in-ue4/ where his water used the custom depth Stencil to fix the translucency sorting problem by adding another plane with Gerstner Wave World position offset/displacement underneath and not rendering in the main pass (similar process to how you would use when setting up stencils). It's a neat trick he used and it certainly fixed my issue.
Subsurface information
I was going to add in subsurface information like in this Gerstner wave article: https://80.lv/articles/tutorial-ocean-shader-with-gerstner-waves/ where there is subsurface colour based on the height of the waves. However, in the same article earlier by Adam Homoki, he uses the same technique except he adds another colour on the trough of the wave which is really neat.
Foam
I used the stuff I have learned from Subsurface scattering and I added foam based on the height of the water waves with a floor. I really liked the Wind Waker style textures they have added in the water from Blazing Sails and decided to add it in as well. The water in Blazing sails is pretty!
Gerstner Wave for the Rivers and Lake.
I wasn't thinking of adding Gerstner waves to the rivers and lake but the article by Adam Homoki mentioned he added Gerstner waves to them and it gives nice extra water information. Besides water on rivers in the lake isn't always flat as there is always some kind of subtle wind. Since Models for the ocean is the same as a lake I didn't make many changes to the material. However, I will need to make an instance to make the lake. I also intend to convert the Waterfall into River so I decided to add 8 Gerstner Waves to the waterfall. Adding more than 8 Gerstner wave is pointless since it's only going to be subtle.
Final Thoughts
That's the water system complete. I will need to do some setting up into the final scene though and there are still a few things I may need to add in outside the material like putting the water onto a spline to make a river.
Gerstner Wave
Gerstner waves are supposed to be stacked on top of each other otherwise it just looks like a sine animation. I remembered this from the tutorial by Dokipen where he stacked 4 Gerstner Waves on top of each other. Another Example is in Ryan Brucks's Distance field water shader where he mentions he stacked 8 Gerstner waves in the description of his video. I saw a really cool water system in a tweet about the water in Blazing Sails and I wanted to reach out to the developers to ask if they are using Gerstner Waves for their water system. Luckily they are active on Discord so I joined and asked if they were using Gerstner Wave and if so, how many. They replied and said they had 40 Gerstner waves! 😲. When I was looking at Stencil tutorial by Nilson Fernandes de Lima I noticed that he and a few other members of the UE4 Forums: https://forums.unrealengine.com/community/work-in-progress/1519072-community-project-free-ocean-water-shader were working on Community FREE Ocean Project. Once I downloaded his project I learned that this project also had 40 Gerstner waves! It produces brilliant results, especially for stormy weather condition. However, It impacts on the performance.
I added in the option to add Gerstner waves in powers of 2 between 8-16 instead of having 40 Gerstner waves. This way, it can be customised based on preferences and less heavy on the performance. you wouldn't want 64 Gerstner waves on a calm lake, its a waste of performance. Why Powers of 2? It's just a habit I picked up on and its generally good practice.
 |
| Gerstner Wave with switch parameters to control the number of Gerstner waves in powers of 2 ranging from 8 -64 |
Custom Depth Buffer (Translucency sorting order fix)
As soon as I added in the Gerstner Wave I had an issue with the translucency sorting order. I did some further research on how I can fix this and I found an 80.lv article by Adam Homoki: https://80.lv/articles/cartoon-water-shader-in-ue4/ where his water used the custom depth Stencil to fix the translucency sorting problem by adding another plane with Gerstner Wave World position offset/displacement underneath and not rendering in the main pass (similar process to how you would use when setting up stencils). It's a neat trick he used and it certainly fixed my issue.
 |
| You will see some overlapping waves because the engine does not know which translucent area it should render first. Normally you would fix this by changing the priority of the translucency order of the model but in this case, there is only one model and is overlapping itself. |
 |
| Water wave with the custom depth buffer trick. As you can see there is no overlapping effect from other waves. It's not perfect at the peaks of the Gerstner waves but it fixes most of the issues. |
I was going to add in subsurface information like in this Gerstner wave article: https://80.lv/articles/tutorial-ocean-shader-with-gerstner-waves/ where there is subsurface colour based on the height of the waves. However, in the same article earlier by Adam Homoki, he uses the same technique except he adds another colour on the trough of the wave which is really neat.
 |
| Subsurface colour based on the height of the water and is masked tso that the the colour shows up when you face the direction of the sun/moon light. |
Foam
I used the stuff I have learned from Subsurface scattering and I added foam based on the height of the water waves with a floor. I really liked the Wind Waker style textures they have added in the water from Blazing Sails and decided to add it in as well. The water in Blazing sails is pretty!
The stage for many battles to come in our upcoming game, Blazing Sails. #blazingsails #getupgames #gaming #battleroyale #pirate #gamedev #indiedev #animation #gameart #gamer #videogames #games #gamers #pcgaming #nerd #geek #videogame #pirates pic.twitter.com/sclJUIlDv9— Get Up Games | Blazing Sails (@get_up_games) November 16, 2018
 |
| Final Water with Foam |
I wasn't thinking of adding Gerstner waves to the rivers and lake but the article by Adam Homoki mentioned he added Gerstner waves to them and it gives nice extra water information. Besides water on rivers in the lake isn't always flat as there is always some kind of subtle wind. Since Models for the ocean is the same as a lake I didn't make many changes to the material. However, I will need to make an instance to make the lake. I also intend to convert the Waterfall into River so I decided to add 8 Gerstner Waves to the waterfall. Adding more than 8 Gerstner wave is pointless since it's only going to be subtle.
That's the water system complete. I will need to do some setting up into the final scene though and there are still a few things I may need to add in outside the material like putting the water onto a spline to make a river.
Comments
Post a Comment