top of page
alundrigan2
5 min read

Unreal water shader


After my interview with Lewis, I was pondering what sector of technical art to look into. We had briefly discussed one of Acerola's videos about the sum of sines which tackles concepts of realistic water simulation. "Great", I thought, "I'll start there!".


The video in question is Acerola's "Rendering With Sine Waves" (Acerola, 2023), something I was excited to learn more about and even potentially implement in my own work. At the start of video he discusses concepts that had been introduced to me in secondary school maths that seemed simple enough to me - wavelengths, sine waves and frequency.


However, things got really complex really quickly. Maths formulas were introduced that I'd never seen before, complex concepts calculated before my eyes that I could barely decipher. One part of me was fascinated by this but the other was dreading it - "How on earth am I going to learn this in time for this module?!" I asked myself. I'd love to go into depth on these subjects and teach myself this crazy maths, however I simply don't currently possess the level of maths knowledge required to even comprehend it.


Nevertheless, I want to convey to the reader that I did attempt to carry out research on this topic, despite it verging on the boundary of graphics programming rather than tech art. As a result, the documentation of my research has its roots in me seeking out a surface level understanding of graphics/rendering concepts that I can properly delve into later, since I am aware of the time constraints of this module. Therefore, to avoid merely regurgitating the video I've just watched, I will surmise the concepts I have taken from it and explain how they relate to water simulation.


  • Sum of sines is the sum of multiple sine waves, preferably with different amplitudes, frequencies and speed to output a fluid-like pattern.

  • The vertex shader is used to calculate this per vertex cheaply on the GPU.

  • The pixel shader is used to pass colour information.

  • Lambert diffuse method can be used to describe the brightness value of a surface point. This is calculated using Lambert's cosine rule.

  • Surface normal values for the above calculation are obtained through calculus using the cross product of binomial and tangent derivatives.

  • Specular reflections are calculated by taking the halfway vector between the light and view vectors and finding the dot product with the surface normal. An exponent is sued to control intensity; This is described as a Blinn Phong specular

  • This makes up the baseline of PBR.


Acerola then claims this is all an outdated way of calculating water simulation, so instead he decides to "take it into the 21st century".


  • Many variations of sine waves can be used to calculate this

  • Gerstner waves can be used but they are "finnicky" and can result in waves curling into themselves which is unrealistic.

  • Instead we can used a sine wave where the wave is the exponent on Euler's number which gives sharper waves

  • Fractional Brownian Motion can then be used to calculate somewhat random movement of waves, with each simulated wave having a smaller and smaller amplitude, giving us finer detail in the waves.

  • Domain warping can be used to make the waves appear like they're pushing against each other which looks more realistic

  • 3 options for reflection: Raytracing (expensive), screen-space reflections, image based reflections which are calculated with cubemap sampling

  • Schlick Fresnel applied to water to simulate realistic reflections

  • Tiling patterns are evident with this water sim method but in exchange the graphical expense is low


I learnt so much from this video. I had to rewatch it about 5 times to ensure I was absorbing as much of the information as possible and I'm still not sure I got it all due to the complexity of the matter! This gave me an insight to the ins and outs of water simulation, and how truly complex the process can be to calculate a realistic looking water simulation. It also uncovered plenty of areas of technical art/graphics programming that I had never heard of before, which would be fun to research further.


Just for the record, I have spent at least an hour attempting to understand Lambertian Diffusion and Brownian Motion but I can't surmise it in a way that would be useful to either myself or the reader. I've found it difficult to try and reword these huge, scary mathematical formulas so instead I trust that you trust I've understood them at a baseline level and put them on the backburner for my future self to pick up at a later time. I hope that's sufficient for this module otherwise this blog post would be a million words long and that's not beneficial for anyone.


After watching this video, a sense of dread hit me - am I going to have to simulate things with super complex equations to show my understanding of this concept...? I hoped not, because the visual payoff compared to something I could create in Unreal is arguably not worth it for the visual aspect of this module - which made me think, is there some way to 'spoof' this water effect?


And the answer is yes! There is!


The channel Stylized Station came in clutch with their video entitled 'your first water shader' (Stylized Station, 2022). The video emulates Genshin Impact-style water, using a rather simple method in comparison to the prior - scrolling UVs. Here is my Unreal material editor set-up for the water shader, which I explain below:



By changing the shading model to 'SingleLayerWater'. Water naturally absorbs red and green light, reflecting blue light giving it the appearance of being blue - thus the AbsorptionCoefficient is set to an orangey red. This is multiplied by a 'murkiness' parameter which is later used by the material instance to control the murkiness of the water.


The normal UVs are scaled using the TexCoord node, each scrolled in the U and V directions respectively and blended using the BlendAngleCorrectedNormals node. The wave size parameter controls the strength of the normal maps, therefore controlling the size of the waves.


A refraction parameter is added which is altered in the material instance to be around 1.02, which Stylized Station recommends in his video. He reinstates that the combination of the scrolling UVs and refraction really sells the look of realistic water.


To construct my scene, I imported a generic mountainscape from Sketchfab (solararchitect, 2021) to my scene and applied my adjusted material instance to a plane. Here are the values I ended up settling on for my water shader:



And here is what my final water shader looks like!




I'm really happy with the output, as it has that slight cartoonish Genshin Impact style whilst still looking realistic.


I would also like to note that in research for a water shader, I watched part of a video on the tech art of Sea of Thieves (iamarugin, 2023) which explained their process for generating their sea. Alike the Acerola video, these methods worked closer with the graphics programming side of things which I found fascinating but I couldn't comprehend the concepts: fast Fourier transform (Maklin, 2019) and Simulating Ocean Water by Tessendorf (Tessendorf, 2001). This also lead me down a rabbit hole of shallow water simulation, of which I pondered the Wikipedia page trying to make some sense of but it was not happening.


I hope you've enjoyed this tumultuous journey into the world of water simulation!




32 views

Comments

bottom of page