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

2. Today’s Lecture 1.Reflection 2.Refraction 3.Attenuation 4.Waves 5.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

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

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 differentl y –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 1 st 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 –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.