Water drop 4a – Reflecting wet world

Version : 1.0 – Living blog – First version was 08 September 2013

This is the fourth post of a series about simulating rain and its effect on the world in game. But it could be read without reading the previous post. The subject is “the reflection”.  The post is split in two parts A and B:

Water drop 1 – Observe rainy world
Water drop 2a – Dynamic rain and its effects
Water drop 2b – Dynamic rain and its effects
Water drop 3a – Physically based wet surfaces
Water drop 3b – Physically based wet surfaces
Water drop 4a – Reflecting wet world
Water drop 4b – Reflecting wet world

When a world scene is totally wet, the most striking visual cue is the reflected environment. Of course all surfaces permanently reflect their surrounding but this is more visible under rainy day. The topic of this post is “reflection”. The reflections as we see it in real world includes all the surrounding lighting. When we talk about reflection in game, too often we restrict this to water or smooth surfaces reflection. But “reflection” is just a convenient word to designate the normal lighting process. In game we separate lighting as direct, indirect and emissive. If you handle direct and indirect lighting on any kind of surfaces from smooth to rough, you have your reflections. There is no need of a particular process for it.
For Remember Me we decided to go this way. To get a good rainy mood, we were looking for having reflection everywhere on every surface. For example, we use the same process to get reflection on rocks as well as in puddles.

Reflection – Theory

The observation post already presents many pictures illustrating reflection. But I will present some others here to highlights some characteristic of reflections.

Reflection with smooth surfaces

Let’s consider à perfectly smooth surface. Most people think that the reflection of a scene in surface like calm water or mirror is the scene itself upside down.

CalmWaterReflection

But this is a really wrong assumption. The reflection depends on the distance from reflected objects and the viewer’s position.

CalmWaterReflection2

The differences become smaller, the closer we bring our eyes to the reflecting surfaces and the farther away the objects are. On the pictures below, see how Mickey Mouse is hidden by the blue cow until you reach a glazing angle with the mirror.

ReflectionMickey0ReflectionMickey1ReflectionMickey2

Stretched reflection with rough surfaces

Let’s now consider another case. The glitter path. A glitter path is the reflection of a light source, often the sun, off a water surface covered by small waves and ripples.

P1010481

Let’s go more in-depth in this phenomen. Starting from a flat surface, only one reflection hits the eyes of the observer (Left). In order to receive light from other points of a plane there must be a suitable inclination so that the angle of incidence equals the angle of reflection. Glints occur on the water where the local slope provides a direct specular reflection of the sun (Right).

Explanation

Source [2]

An ensemble of a large number of glints coming from different waves and different parts of the waves results in glitter.

From the distance, the surface of an object may seem to have a certain shape (its ideal form), but the microstructure making up the surface of the object actually has a very different shape. This is name roughness. Roughness measures the vertical deviation of a surface compared to its ideal form. When these deviations are large the surface is said to be rough. Wavy water can be considered as a rough surface.

MicroWave

This rough characteristic of wavy water is directly link to the shape of the glitter path. In more details [3]:

Glitter patterns are roughly elliptical, with an aspect ratio that depends on the source elevation angle. For example, the sun produces a circular glitter pattern when it is directly overhead (90 elevation angle) and produces an elongated elliptical pattern near sunset or sunrise (small elevation angle). This all assumes a uniformly rough surface; quite often, however, wind gusts increase the roughness or surface slicks reduce the roughness in a localized region. These kinds of effects are evident in the glitter path picture, especially close to the near shore where the glitter pattern is much wider than elsewhere (perhaps partly because of the wind generated by the passing train).

For a high light source, the angular length of a glitter pattern is equal to four times the angle of the maximum wave slope (figure below). Waves inclined both toward and away from the observer create glints, resulting in a factor of two times the maximum wave slope; the additional factor of two is a result of angular doubling on reflection. The ratio of the glitter-pattern width to its length is given by the sine of the source elevation angle. If the light source is at the same elevation as the observer, the glitter pattern dimensions are half as large as with an infinitely high source, but the width-to-length ratio is the same. As the sun or moon drops lower in the sky, the glitter pattern gets progressively narrower until the width-to-length ratio reaches a minimum when the source elevation angle is twice the maximum wave slope. Beyond this angle, as the sun or moon approaches the horizon, the glitter pattern becomes shorter because of shadowing and eventually disappears.

glitter03

Source [3]

There is still one more peculiarity in perspective connected with the glitter path. Each glitter path is unique therein it “belongs” to the observer. As we see, only those points of the rippled surface appear lit by the light source which had an appropriate slope, so the location of the path depends crucially on the observer’s position. The glitter path always lies in the vertical plane through the eye and the light sources (We will see exception later). On the next picture, all light sources have a glitter path like the sun on the ocean resulting in stretched reflection.

DSCF9996

But too often people restrict the stretching to bright lights. In reality all the objects are subjects to it.

IMG_0542

On the following day picture, see how no-emissive objects are elongtated in a similar way. Other than the large balls, we can recognize people wear color in the reflection; the white panel on the left is also identifiable.

IMG_2803

Moreover, the glitter path is not restricted to wavy water surface. Let’s make a simple experiment with a mirror and some transparent liquid. I put a lamp at a random height and I recreate sort of waves with the liquid.

TestReflection4TestReflection3

And now, see this nice moon glitter path at home :)

TestReflection2

This experiment highlight that any slightly irregularly rippled surface behave the same as the wavy water. Mean any rough surface behave in a similar way as our wavy water. On a rainy day, the streetlights, the head and backlights of cars produce similar result on the street, for exactly the same reasons.

DSCF0281

IMG_0707

Even large wave can stretch the reflection. Here is a picture taken with a down curved floor. The curvature is really light but on a large area and this causes a stretching as well.

StrechReflectionFloor

And another example, floor which looks flat could not be in reality.

IMG_2075I won’t describe all the different shape the glitter path of the sun can have because it is not the subject here, but an interesting edge case is that sometime glitter path show distinct asymmetry. So it breaks the rules of always having reflection stretched toward the viewer.

BentGlitter

From time to time, however, the glitter appears “bent”, with part of it offset from the vertical.  Such features are the result of waves whose transverse profiles (left-right relative to vertical) are asymmetric.

One possible way is to have a field of short wavelength glitter-producing waves overtaken by a long wavelength wave. This causes the short-wavelength waves to be tilted one way or the other on average. As a result, the wave slope distribution is shifted in one direction, thereby shifting the glitter sideways. This is the case at left where the long bow wave of a ship moves into a field of glitter.

Another way to produce asymmetric wave slopes is with wind action. Wind blowing across water will produce all wavelengths of waves, starting with short waves (capillary waves—“cat’s paws”) and building up to longer wavelengths as time goes on.

Source [4]

Taking our little experiment with the mirror, we can reproduce this bent by turning obliquely the mirror.

TestReflectionThe glitter path is now deviated. This bent effect could also be seen in other place. The next picture shows a curve street. See how the stretched green light reflection in the center is curved (click to get full-size image, this will be more visible).

IMG_2816

Reflection blurriness with roughness and distance

As it is well know. Roughness of a surface can be seen as the strength of the reflection blurriness. When a surface is perfectly smooth, its reflection is sharp (mirror-like). When the surface is rough, reflected light rays are deviating from the ideal mirror direction and the reflections start to appear blurry. The distribution of the deviated rays which are important for the reflection can be represented by a cone around the ideal mirror direction. The rougher the surface, the larger the cone.

ReflectionStrenght

The website ScratchAPixel [1] provides an illustration showing the impact of the roughness on the reflection.

In figure 10, we have rendered a series of images to show the result of the reflection as the roughness of the surface increases. On the first frame of the animation, the surface is perfectly smooth thus the reflected image is perfectly sharp. Note how the brightness of the reflected spheres seems to dimmer as the roughness increases. If tens rays hit the surface with a similar incoming direction at about the same point of incidence, on a perfectly smooth surface they should all be reflected in a similar direction. If the eye happens to be on the same direction as the reflected rays, it will catch all ten rays. However if the surface is rough, only fewer rays will be reflected in the eye direction thus less light reaches the eyes (and the reflection seems dimmer).

l014-roughness3

Source [1]

The distance of objects from reflecting surfaces have also an impact on the blurriness of the reflection. With a smooth surface, the reflection won’t change too much with the distance between the reflector and the subjects. Think of the reflection in a mirror. But with a rough surface, thing behave differently.

RoughReflectionAs we can see the closest a subject is from a reflector the sharpen its reflection is. The following schema from the Guerrila game presentation [5] perfectly illustrate what happen here. Roughness is represented by cone. When looking at a rough surface at different location, it results in different area of the cone intersecting the environment. Thus the pC0 will appear blurrier than pC1 because it covers a larger area.

DistanceRoughness

Source [5]

This means that reflection could have a complex shape even if the reflecting surface is uniformly rough. Thing are even more complicated with anisotropic surface. Here is a picture illustrating the varying reflection blurriness with distance on a very slightly rough anisotropic material (brushed metal).

ProgressiveReflection

You can see that the red part is sharp, the blue part is blurring and the black part is horizontally blurred.

Fresnel and polarized reflection

I will not explain the Fresnel effect here as it has been well covered before and is well know. But of course reflection is subject to Fresnel effects. And good scientific explanation of it including polarization is given in [9].

The reflection of tree and shrubs in small ponds or puddles at the roadside sometimes have more pronounced clarity, sharpness, and warmth of color than the objects themselves. Clouds are never as beautiful as when they are reflected in a mirror [6]. See on the next picture how cloud are visible in the puddle reflection but not in the sky (click for full-res).

DSCF9993One of the causes of this is that the reflection is polarized, so that it may attenuate the luster of certain objects and saturate color. Wikipedia has a well explanation:

Light reflected from a non-metallic surface becomes polarized; this effect is maximum at Brewster’s angle, about 56° from the vertical (light reflected from metal is not polarized, due to the electromagnetic nature of light). A polarizer rotated to pass only light polarized in the direction perpendicular to the reflected light will absorb much of it. This absorption allows glare reflected from, for example, a body of water or a road to be much reduced. Reflections from shiny surfaces (e.g. vegetation, sweaty skin, water surfaces, glass) are also reduced. This allows the natural colour and detail of what is beneath to come through. Reflections from a window into a dark interior can be much reduced, allowing it to be seen through.

We have also already talked about the increase saturation of wet surfaces in the previous posts.

Practical Reflection

The part B will discuss algorithm and code use in game to deals with reflection…

Reference

[1] Scratchapixel, “Material Appearance”, http://www.scratchapixel.com/lessons/3d-basic-lessons/lesson-14-interaction-light-matter/material-appearance/
[2] Joachim Schlichting, “The Glitter Path”, http://www.uni-muenster.de/imperia/md/content/fachbereich_physik/didaktik_physik/publikationen/glitter_path.pdf
[3] Shaw, “Glittering Light on Water”, http://www.esrl.noaa.gov/psd/outreach/education/science/glitter/
[4]  Lynch, Dearborn, Lock, “Glitter and glints on water”, http://engagedscholarship.csuohio.edu/cgi/viewcontent.cgi?article=1103&context=sciphysics_facpub
[5] Drobot, “Lighting of Killzone: Shadow Fall”, http://www.guerrilla-games.com/publications/
[6] Minnaert, “Light and Color in the Outdoors”, book
[7] Lynch, Livingston, “Color and Light in Nature”, book
[8]  Wikipedia, “Polarizing filter”,  http://en.wikipedia.org/wiki/Polarizing_filter_%28photography%29
[9] Physics Fundamentals, http://www.stmarysacademy.mb.ca/resource/File/Physics_Fundamentals/Physics_Fundamentals_-_Chapter_26.pdf, page 20

About these ads

4 Responses to Water drop 4a – Reflecting wet world

  1. James says:

    PART B!, AGHHHHHHHHHH. STOP TEASING ME! (Nice post but the code is what im looking for, Also could you think about using OpenGL for examples, And an opengl PBR shader wouldnt hurt as not a single Opengl available anywhere on the net). Cheers Bruda. J

    • seblagarde says:

      Hi,

      Haha, don’t expected too much from the code. It won’t solve the effect I mention here :). This still an area of research for real time. I like to provide real world example because too often graphic programmer refer to cg result which are already an approximation.

      For the code I have no plan for OpenGL. Example code I provide are often copie/paste from the game engine not supporting OpenGL.

      Cheers

  2. It’s fun to see the example pictures from Cologne (I assume those were taken during GDC Europe). Good memories. I would’ve loved to attend your session, but I think I was working during that time.

  3. Marc Ourens says:

    Scratchapixel is such as useful website! Thanks for posting the link

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: