1. Maths and Technologies for Games Water Rendering
CO3303
Week 21

2. Today’s Lecture
Reflection
Refraction
Attenuation
Waves
Detailing

3. Visual Aspects of Water
Reflection
Including self-reflection
Refraction
Fresnel Effect
Blending of reflection/refraction at different angles
Light Extinction
Light attenuation in water, cloudiness, water colour
Surface Deformation
Or in complex cases water flowing, breaking up - full liquid physics
Only considering relatively static water in this lecture
Waves, ripples, and the effect on reflection/refraction
Foam / Spray / Caustics
Viewer going underwater

4. Reflection Water behaves, to some degree, like a mirror
But see Fresnel effect later
At any point on the surface, the normal at that point determines what light is reflected to the viewer
Perfectly still water presents a perfect reflection
Can just reflect the camera in the water plane
Surface deformation presents practical difficulties as the normals vary

5. Reflection - Practicalities
The reflection can be dynamic:
Movement in the scene is reflected
Or static:
Just a fixed skybox reflected
Static case:
Cube mapping works effectively
Reflect ray from camera off the surface normal and project into a cube – sample a cube texture at that point
Hardware / HLSL support for cube-mapping makes this simple
Works without difficulty with varying normals

6. Reflection - Practicalities
Dynamic reflections:
Cube mapping is not effective since it assumes the cube is infinitely far away – OK for distant objects, no good for nearby scene
Usual approach:
Reflect the camera in the plane of the water
Render the scene from this relected camera into a texture
Draw the water surface mapped with this reflection texture
Varying normal can be simulated by offsetting which part of the reflection texture is sampled (like wiggling effects seen already)
However, this is not a fully robust solution:
Reflections might come from parts of the scene that were not rendered in the reflection texture
This approach only works perfectly for completely flat water
Alternative approach is to use ray-tracing or similar
Won’t consider that here

7. Self-Reflection
If the water surface is choppy enough it may reflect other parts of the water.
Reflection & refraction require multi-pass approaches to do properly
Ray tracing approaches again
However, don’t need to do it properly in most cases:
Static cube mapping:
Lower half of cube map not really needed, so draw the upper half reflected and darkened to simulate secondary reflections
Dynamic reflected camera
Render the water in the reflection texture using static cube mapping

8. Refraction
Where light crosses the interface between two different materials, it bends – this is called refraction
The amount of bend is given by Snell’s Law
Depends on:
Angle of incidence
Refractive indexes of materials
Vacuum has a refractive index of 1
So does air (approximately)
Clean water is 1.33
𝑛 1 sin⁡( 𝜃 1 )= 𝑛 2 sin⁡( 𝜃 2 )

9. Refraction in Water
When looking into water, light coming from under the water is bent and the scene at the water surface appears shifted and distorted
Although appears more normal underwater
The amount of shift/distortion depends on:
The angle at which we view the surface
And variations in the surface shape (waves, ripples)
Both of these vary per-pixel

10. Refraction - Practicalities
Refraction is typically rendered in the manner of a post-processing effect
Similar to the distorted glass effects we saw earlier
Process:
The underwater parts of the scene are rendered to a texture
Then the water surface is rendered and this texture applied
As with reflection a distortion is applied to the UVs in the pixel shader to simulate the refraction at each point
As with the dynamic reflection approach, this is not physically accurate since the refracted light may come from an off-screen or hidden point, not rendered in the texture
Again, a fully robust solution would be very complex

11. Combining Reflection and Refraction
Both processes involve rendering the scene to a texture, then rendering the water surface mapped with that texture
In practice:
Create two textures and render the above water scene (reflected) to one, and the below water scene to the other
Clip each of these scenes at the water surface
i.e. We do not render any underwater objects in the reflection and vice versa
We do not expect to see underwater objects in the reflection, nor above water objects refracted from underwater
The clipping can be to a flat plane for simplicity, but if the water surface moves and there are objects close the to surface this will cause visual problems
Use height map or depth-buffer to determine precisely what is above and below
Now render the water surface, blending the reflection and refraction textures
But how much to blend?
It turns out that this depends on the viewing angle…

12. Fresnel Effect How much to blend?
It depends on the viewing angle
Looking straight down, clear water has almost no reflection and almost all light is refracted to the viewer
Looking at a glancing angle, water becomes almost a perfect mirror
This is called the Fresnel (freh-nell) effect
The effect depends on the materials involved
In particular, cloudy water behaves differently to clear water

13. Calculating the Fresnel Effect
The full Fresnel formula is fairly complex, but there is a good approximation for real-time applications:
𝐹= 𝐹 0 + 1− 𝐹 0 (1−𝐍⋅𝐂) 5
where 𝐹 0 = ( 𝑛 1 − 𝑛 2 𝑛 1 + 𝑛 2 ) 2
𝑛1,𝑛2 are the refractive indexes of the materials,
N is the surface normal, 𝐂 is the normal to the camera
F gives the proportion of reflected light coming from the surface, the remainder comes from refraction
E.g. if F = 0.3 at a point on a surface, then that point emits 30% reflected light and 70% refracted light
We calculate Fresnel in the pixel shader to give us the blending ratio to use for reflection & refraction

14. Light Extinction We saw attenuation of light in air
Light attenuates in water, but the effect is much stronger due to higher density and greater level of particulates
Different wavelengths of light attenuate differently
Red light is quickly diffused away, blue light much less so
Which gives water its distinct blue colour
A fair approximation:
Red light will reach 30m, green 75m and blue 300m in clear water
Cloudy water need these factors adjusted

15. Light Extinction - Practicalities
Light extinction affects the refracted light only
We need to know how far the light has travelled to determine how much to attenuate
There are several approaches, often relying on using depth from the refraction rendering, for example:
Render the water surface only to a texture, but store only its world space distance from the camera
When rendering the refraction texture, subtract the distance of each underwater pixel from the water surface distance at the same point
This gives the distance the light travels through water to the surface
Linearly blend the RGB components based on this distance and the extinction distances given on the last slide
The water surface distance texture created in the 1st step can also be used to do the above/below water clipping mentioned earlier

16. Surface Normals / Deformation
We typically want some ripples or waves on water
There are several approaches of increasing complexity:
Moving or animated normal maps to simulate bumpiness on flat geometry
Using a grid for the water geometry and moving the vertices around based on animated/moving height & normal maps
Using tessellation to do the above
Using cellular automata to spread geometry ripples around
Doing a physics simulation of the water surface, and moving the vertices based on that
Perform a physics simulation of water as a collection of particles, then use a post-processing technique called splatting to merge the particles into contiguous liquid
Which to select depends on your quality requirements, games variously do all of the above

17. Examples of Water Surfaces in Games

18. Normal Maps for Waves + =
Most of the water effects depend on the surface normal
So varying the normal is the most important requirement to give the impression of a moving surface
All we need for distant water
Applying a normal map can give wave-like bumps
However, just moving the normal map is not sufficient to give the impression of waves
We could use animated normal maps, but in practice these use a lot of memory. + =

19. Normal Maps for Waves + + +
Most common solution is to blend several normal maps
Each moving in a very slightly different direction and speed
Use a combination of maps covering large areas and small areas so the water looks good up close and at distance
To blend normal maps, average the normals and renormalise + + +

20. Height Maps for Waves
The logical extension is to use combined normal/height maps, as with parallax mapping and tessellation
This gives a properly moving surface geometry
The normals are applied per-pixel
The height map used to move the vertices of the geometry
Blending several maps as described on the last slide
Use a grid for the water so there are enough vertices to animate
Or use tessellation for better balance of vertex detail, near and far
Or use screen-space techniques and draw the water as a post- process (no geometry required, but some complexities)

21. Detailing Foam Caustics Spray Water’s edge
Use the water depth to detect shallow water, also detect wave peaks
Blend a foam texture here to get foam at the crests and in shallows
Caustics
Can be calculated correctly at some expense, so rarely done this way
Usual to blend a texture with the underwater scene, animated UVs
Spray
Detect wave crest edges in the geometry shader
Use a technique similar to the silhouette geometry shader example
Add additional polygons stretching out from the edge in the wind direction
Map with a moving spray texture
Water’s edge
Use the negative depth of the water to determine where the water has been and apply effects. E.g. darken sand, increase specular on rocks

22. Underwater You may wish to render differently underwater
Typically, the view is distorted with a wavy effect
Not exactly correct. Since there are no material transitions underwater this kind of “refraction” is somewhat artificial
However, varying temperature in the water will bend the light, so some of this will happen
Refractions come through the water surface
Determining when the viewer is underwater causes some issues when the surface is moving
Might need to render a scene where some underwater objects are refracted through the surface and some are not, in the same image
Can be done by rendering the refraction texture in the visual style that it uses when viewed when underwater. Tricky though.