Water drop 1 – Observe rainy world

Version : 1.2 – Living blog – First version was 10 December 2012

This post is the first of a series about simulating dynamic rain and its effect on the world. All in the context of games:

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

In several games today there are dynamic weather effects. The most popular weather effect is rain. Rain has sadly often no effect on the gameplay but it has on the visual. Rain in real life has a lot of impact on the appearance of the world. The goal of this series is to describe technique, both technical and artistic, to be able to render a world rainy mood. By wet world, I mean not only world under rain, but also world after it stop raining. Let’s begin this series by an observation of the real-life wet world. As always, any feedbacks or comments are welcome.

Real wet world

The first thing I have done when I started to study this topic for my game “Remember Me” is to make a lot of references. All pictures are programmer’s photography with low camera :). I should advice that’s I focus on moderate rain in urban environment not rain forest or other heavy rain. Let’s share some result (click for high res version).

The first thing everybody notice when it’s raining in the night is the long stretched highlight reflection of the bright light sources:

But this is not restricted to the night (and even not restricted to wet surface, it is only more visible with wet surfaces):

BrightStreak

Highlight reflection vary with the roughness of the underlying surface:

The highlights get dimmer when the surface is rougher (This is energy conservation):

HighlighRoughness

Highlights size depends on view angle. The anisotropic reflection seems to follow a Blinn-Phong behavior (Also Blinn-Phong model don’t allow to strech so much):


Anisotropicreflection

However, when the surface is smooth we have a perfect reflection (left), whatever the distance, following a Phong behavior (Note: Blinn-Phong have the same behavior for perfectly smooth surface). The right image show how the perturb water surface make the green light appear twice:

PerfectReflection

The reflection fuzziness depends on view angle, light angle, index of refraction (i.e specular),  roughness of the surface and distance from the light source (but only in the case of rough surface, for smooth surface fuzziness not change):

FuzzyReflection

Not only bright light sources are reflected but everything is and the reflection is colored even in the night (often the dark avoid to see a colored reflection because there is not enough reflected light):

DayNightwetSurface2

Water accumulates in low depth level first (hole, crack or base on the curvature of the surface…):

WaterInHole copy

WaterInHole2

When there is enough water accumulated, we can see that a thin layer of water or a deep puddle exhibit a double layer behavior. We can see a water layer and an underlying surface layer:

DoubleLayer

The reflection of the water layer follows the Fresnel law. This mean that’s you have full reflection at grazing angle (0°) and low reflection when looking perpendicular to the surface (90°) (In fact every surfaces have Fresnel reflection wet or not but this is more obvious with water):

FresnelEffect

FresnelEffec2t

Looking at the last pictures of this two series (perpendicular to the surface), you can see my body “not reflecting”. With an index of refraction of 1.33, water reflects 2% of incoming light for 90° angle. Depends on the brightness of the incoming lighting and the albedo of the underlying surface, the reflection can appear faint or may even be totally swamped by the other light sources. In the left case below I am not bright enough to see my reflection, but the light coming from the sky are strong and can be seen as a very light white tint in the water (overcast sky). In the right case, we can distinguish color appearance of the reflected building because the sky light bounces on it whereas my body facing the ground does not bounce enough light.

FresnelEffect_shape copy

When underlying surface have dark albedo and you have a clear sky, the water surface behave almost like a mirror:

I gather a lot of rain effects in a video : Rain effects video on youtube.

Rain cause ripple (begin of the video) only where there is sufficient accumulated water. Ripples are concentric circle interacting together and the number depends on rain intensity. There is rain splashes everywhere and the rain drops are almost invisible for light rain (1:20). Wind has influence on water puddle (1:34) and on rain drops direction too  (not in the video).  Water stream can be generated base on ground inclination (1:55). Droplets from misc object (2:00) and falling drops from rooftop with some strong splash on the ground.

Following pictures show ripples (But this is hard to see on a picture):

Wet surface are diffusively darker and specularly brighter:

But not all materials are subject to a darkening of the diffuse term, either plastic or metal:

NoPoreousMaterial copy

Drying is irregular (can depend on curvature) and can take long time depends on the weather (overcast, warm, clear):

Water in small hole/Cracks/gap “disappear” quicker than puddle. Puddle can still there a long time even with a perfect dry ground around:

DryPuddle

When drying, specular strength disappears faster than the darkening of the diffuse:

Surfaces don’t dry at the same speed (Left is totally wet, right is dry, middle in-between):

DryingStreet

Objects parallel to rain like walls are almost not affected by it. Objects with a complex orientation like a tree are affected but not everywhere (right tree is wet, left tree is the opposite dry side):

WetTree

With enough water accumulated on top of objects there can be some of the water sliding on the side depends on object shape (But as you can see half of the side still dry). The water sliding is slow:

WetWall

Lighting has a lot of influence on the rain, particularly during the night. Rain drop are often difficult to see but are highly visible when reflecting light. In the previous video, there is example of light influence: Rain effects video on youtube. Lit ripple in the night (2:25).  Lit rain splashes in the night (2:31) which are more visible than in the day because of the back lighting. Lit raindrops (2:37). The rain drops are perceived as streak particles but in fact the long streak is cause by motion blurring of the camera or our eye. The drop itself has a changing not necessarily spherical shape. The rain drops falling is not always perpendicular to the ground because of wind:

RainLighting

Under strong rain, there is atmospheric scattering modification (Fog) and light through rain produce a misty glow effect:

RainFog

Under strong rain, some objects have a small misty rain halo on top of them:

(No picture for now).

Good reference can also be found at [1] with some explanation of the anisotropic reflection.

We see many things here and others are not showing like the raindrop movement on glass surfaces, the windshield effect etc… This series aim to talk about several of the thing observe:

Dynamic rain and its effects: The second water drop deal with how to render the raindrop, the raindrop splash, the ripple, the puddle… Some basic water influence on material and drying process will be discussed as well as fog. It will not discuss the glow or droplet of water on windows.

Physically based wet surfaces : All material change due to water influence will be discuss in details in the third water drop, this include Fresnel effect, double layer,  the diffuse and specular change and the drying. It will not discuss about material becoming transparent when wet.

Shiny illuminated wet world: All the lighting, reflection and the stretched highlight will be detailed in the fourth water drop post. It will be based on environment map and specific lighting model.

This series will not discuss any ocean water/lake/mid-knee water or effect like caustics or water volume. Hope you will enjoy it.

Reference

[1] Neil Blevins, “Anisotropic Reflections”, http://www.neilblevins.com/cg_education/aniso_ref/aniso_ref.htm

About these ads

18 Responses to Water drop 1 – Observe rainy world

  1. Pingback: Observations of water | UMBC Games, Animation and Interactive Media

  2. Spencer Luebbert says:

    This will be very exciting!

    Something else I’ve been curious about, that you might have already investigated. Unperturbed reflections (like a still puddle) have non-distorted mirror like reflection, while bumpy reflections have a more blinn-phong like stretched reflection.

    I am not a graphics engineer (I’m a tech artist), but have a decent understanding of current rendering tech and research (really like your blog by the way!). I know many engines have moved to a blinn-phong model for their dynamic lighting (because it looks more correct for light reflecting of bumpy surfaces at glancing angles), but seems like you might actually want to use blinn-phong for rougher/lower gloss surface, and phong for the rest. Unless blinn-phong handles this well already, in which case, I’ll pull the “Hey, I’m just a tech artists” card :)

  3. seblagarde says:

    Hey, thank you for this interesting question :).
    Here is my thoughts on the subject, feel free to correct me if you find something wrong.

    Just to sum-up taking the sample of a red light in the night:
    If you are far from it you get the famous stretched anisotropic reflection on the ground. When you get closer, the stretched reflection become smaller due to the change in viewing angle. This looks like a “Blinn-Phong” behavior.
    If there is a large puddle on the ground, this time the reflection is perfect and not stretched whatever the angle. This looks like a “Phong” behavior.

    As you said, the difference between these behaviors come from roughness of the surface. With a rough material, the light is reflect in a larger cone which is the reason for the non uniform shape. I want to add that’s even if you don’t see it. The stretched highlight of the red light is present even in a dry day, just not visible because ground not reflect enough light.

    So coming back to your question, how is this represented in graphics ?
    A flat water or a mirror are perfectly smooth. Modeling a perfectly smooth surface with Phong or Binn-Phong mean that’s we have a very large specular power. Well above 100 000, we can even say this is an infinite value. With such a value, the reflection of the light is only possible when dot(R, V) = 1 or when dot (N, H) = 1. Any value other than 1 like 0.99999 power infinite is 0. If you think about it in both case, L, V and N have the same configuration. For such large specular power value Binn-Phong or Phong are equivalent and reflect only one point. This is your perfect reflection.
    Blinn-Phong is a valid model you only require to feed it with the right parameter.

    Now in our game context where we deal with punctual light source (infinitesimal) and finite value, this require some arrangement. In fact the punctual light source with such specular power will not reflect at all (or if you are lucky one pixel will be on). If we were dealing with area light this will work but this is not the case (for now). And we don’t want to store infinite value.
    Any visual trick is welcome and interpolating between Phong and Blinn-Phong based on the roughness could do the work. This is only one way. We chose to fake it in another way and this is the subject of Water drop 4 :).

    Note that’s Binn-Phong anisotropic reflection is not enough. The real stretch highlight are much longer than what Blinn-Phong give you. The BRDF world lack a “wet” BRDF.

  4. seblagarde says:

    I add some missing photo about the stretch reflection to illustrate the previous comment

  5. seblagarde says:

    Few photo added (fog and half wet wall)

  6. Computron says:

    Bear with me since I am not a programmer, and only have aspiration of tech artistry, but for whatever reason, I get confused by the stretched/anisotropic reflection of car headlights on wet roads.

    Whenever I am driving at night and observe these reflections, they seem to stretch downward, vertically, toward me, at the same length/intensity, regardless of the direction or orientation of the road relative to the headlight. Even as I pass a car and look perpendicularly to the road at the headlight’s reflection, it still still stretches vertically downward toward me(from my point of view). This would imply that this seemingly anisotropic reflection is stretching down toward the viewer, no matter from what angle you look at the reflection with respect to the road, which seems to me to be, by definition, isotropic, no?

    I read the Neal Blevins write-up of anisotropic reflections and looked at the door stopper example that illustrates the surface structure of things that reflect anisotropically and I can’t imagine road/asphalt as having this thin, parallel, strand-like structure. I can’t make any sense of it. It seems that if this is true, the road reflections should instead just be rough reflection which blurs in all directions diffusely (Like those you see with a typical isotropic shader with a low specular-exponent/glossiness value), but clearly this is not the case, as anyone can see that the reflections are stretched. What gives?

    • seblagarde says:

      > Even as I pass a car and look perpendicularly to the road at the headlight’s reflection, it still still stretches vertically downward toward me(from my point of view).

      I am not sure I understand you on this point. Can you provide material ? When I look at headlight’s of car in a wet day, I can see how the highlight stretch with different view angle, near perpendicular, there is a lot of noise but the strech is clearly reduce. This also depends on the curvature of the ground and the type of ground you are looking at.

      Take a look at this picture: http://seblagarde.files.wordpress.com/2012/12/normalizedblinn-phong_rough.png

      This is a plane (isotropic) with a point light and a normalized blinn microfacet lighting model. The point light aim to simulate the highlights of a car. See how the stretch (and the intensity) behave with the view angle. When view is almost perpendicular to the ground, the highlight is close to a sphere. The last shot show specular highlight only. In real world, what I see most of the time is pretty close to this.

      That’s said, It all depends on the ground material. Asphalt concrete is an anisotropic material for example (http://accessengineeringlibrary.com/browse/mechanics-of-asphalt-microstructure-and-micromechanics/p2001bd2c9970393001).

      Hope it help.

      • Computron says:

        > Even as I pass a car and look perpendicularly to the road at the headlight’s reflection, it still still stretches vertically downward toward me(from my point of view).

        What I mean by this is I pass a car and look to my left/right side, perpendicular to the path of the road, at the reflection of the car’s headlight in the lane next to me and the reflection is still seemingly just as stretched toward me by the same amount as it would be If I were to look at a headlight’s reflection parrallel to the road, like from a car farther down the road in the oncoming lanes .

        Here is your picture with my note: http://i.imgur.com/vmDIB.png

        I think you understood my car example as a rotation about the axis drawn in red, when I mean a rotation about the axis drawn in green. Assuming the asphalt is anisotropic and has this thin strand structure that go along the path of the road, wouldn’t looking at a reflection perpendicular to the road have less of a stretch than a reflection parrallel to it?

  7. seblagarde says:

    Ok, I misunderstand the description. Can you confirm we talk about this effect ?

    It all depends on the view angle between the headlight and the viewer + the ground material properties (roughness and anisotropy).

    I don’t think asphalt have thin parallel stand-like structure but I never study it :). There is different shape of anisotropy possible for materials.

    • Computron says:

      :-) Yes, that is what I am referring to. Although the headlight’s reflection in this new example of yours fades out very quickly as you rotate about the car, (probably because it’s daytime, and I usually think of my example during night) the car’s reflection is still blurred/stetched downward, even as your view becomes more perpendicular to the car/road. That’s what I find confusing, since the Niel Blevins explanation of patterned/parallel strands or grooves doesn’t seem to adequately explain this phenomena, at least, I can’t quite make sense of it.

      So, what kind of physical structure do you think would cause this to be the case? How would you make a road material that accurately mimics this? Also, can you elaborate on the anisotropy shapes?

      BTW, In Crysis 2’s rainy levels, they have this effect approximated somewhat properly, (Although in screenspace) so that may be of interest to you for reference.

      Cheers!

      • seblagarde says:

        Here is a shot by night :) : http://seblagarde.files.wordpress.com/2012/12/nightheadlight.png

        By anistropic shapes I was refering to groove orientation like in Neal description. But let anisotropy material for now, I don’t think this is involve in your problem and I think it confuse with the blinn-phong highlight stretching.

        I am sorry but I still don’t get where you have a problem. The strech downward is oriented to you even when rotating around the light sources. This is the expected behavior like on the pictures and like you can see when putting a point light in a scene with a Blinn-Phong lighting model. What’s is wrong for you with this ?

  8. Pingback: Martin Codes – Cool Link Stash, January 2013

  9. Fantastic post, so much information that it’s mind blowing!

  10. Mark Wayland says:

    One additional observation is that the (maximum) concentric ring radius seems proportional to the depth of the water where the drop hits. Thanks for the awesome info!

  11. jeevan says:

    thanks

  12. jestesrwilde says:

    Reblogged this on Corey Wolff and commented:
    This is wonderfully in depth look into water, reflection and refraction. Well worth the read.

  13. Pingback: Visual Design | Annotary

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: