Maths and Technologies for GamesWater Rendering

Maths and Technologies for GamesWater Rendering

CO3303

Week 22

Today’s LectureToday’s Lecture

1. Reflection

2. Refraction

3. Attenuation

4. Waves

5. Detailing

Visual Aspects of WaterVisual Aspects of Water

• Reflection– Including self-reflection

• Refraction• Fresnel Effect

– Blending of reflection/refractionat 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

ReflectionReflection

• 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

Reflection - PracticalitiesReflection - 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

Reflection - PracticalitiesReflection - 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

Self-ReflectionSelf-Reflection

• If the water surface is choppyenough it may reflect otherparts of the water.

• Reflection & refraction requiremulti-pass approaches to doproperly– Ray tracing approaches again

• However, don’t need to doit 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

RefractionRefraction

• 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

=

Refraction in WaterRefraction 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

Refraction - PracticalitiesRefraction - 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

Combining Reflection and RefractionCombining 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…

Fresnel EffectFresnel 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

Calculating the Fresnel EffectCalculating the Fresnel Effect

• The full Fresnel formula is fairly complex, but there is a good approximation for real-time applications:

where N

• 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

Light ExtinctionLight Extinction

• We saw attenuation oflight in air

• Light attenuates in water,but the effect is muchstronger due to higherdensity and greater levelof 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

Light Extinction - PracticalitiesLight 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

Surface Normals / DeformationSurface 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

Examples of Water Surfaces in GamesExamples of Water Surfaces in Games

Normal Maps for WavesNormal 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.

+

=

Normal Maps for WavesNormal 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

+ +

+

Height Maps for WavesHeight 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)

DetailingDetailing

• 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

UnderwaterUnderwater

• 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.