MotoGP: road reflections

Originally posted to Shawn Hargreaves Blog on MSDN, Friday, April 17, 2009

My final task on the quest for wet weather was figuring out what to do with the road surface. When roads get wet, they become reflective. It was particularly important to reflect the bikes, because we disabled shadows during wet races. Without either shadows or reflections, there would be nothing to tie the bikes to the ground, which can create a disturbing illusion where things appear to be floating in the air. But we also wanted to reflect the sky and surrounding scenery such as trees, buildings, and bridges.

Reflections are easy to implement. Mirror your geometry through the ground plane, then draw everything a second time, upside down.

Hang on a moment...

"Draw everything a second time"?  You're kidding, right?  :-) 

No way could I afford to draw the environment twice, even using simplified lower detail models. I had enough GPU juice to reflect the bikes and riders, but not enough for other scenery.

I was on the verge of giving up when I took a final look through our wet road reference photos, and had a crazy idea. I saw a tree, plus an upside down reflection of that same tree. If I had to recreate this in Photoshop, I'd just duplicate the tree image onto a second layer, then vertically flip it.

Surely not... That's way too simple and fundamentally mathematically wrong to have any chance of working in a 3D game...

I tested my theory in Photoshop by taking a photo of a sunny race, selecting the trees and buildings, and mirroring them onto a second layer.

Wow, that works surprisingly well! Not perfect, but promising. Let's see if I can cover up the flaws well enough to make this technique usable in practice...

Creating reflections by mirroring in 2D is only correct if the perspective vanishing point is the same as the ground plane:

  1. The ground must be flat
  2. The camera must be sitting on the ground
  3. The camera must be facing parallel to the ground

These things were not true in MotoGP, but they were close to being true:

  1. The ground was roughly flat, at least most of the time
  2. Cameras were rarely more than head height above the ground
  3. Cameras tended to face roughly forward

For the rare cases where this approximation went badly wrong, I wrote code to detect and fix the situation:

  1. If you were anywhere near a hill, I faded out the reflections (I told myself this was a feature, not a bug, because water flows downhill, so hills would naturally be less wet and therefore less shiny :-)
  2. If the camera was too high above the ground, I faded out the reflections
  3. If the camera was not parallel to the ground, I faded out the reflections (again not a bug! one could argue this was a crude approximation of Fresnel reflection)

Yee haw! Things are starting to look pretty darn good. But still not good enough...

Reflections of distant objects looked great, but the closer something was to the road surface, the more obvious the errors became. If an object was touching the road, it would look terrible if its reflection was even slightly wrong (for instance if the reflection of a bike wheel did not exactly join up with the original wheel).

Solution? Draw proper upside down bike reflections, to make sure they are in exactly the right place. Use the 2D vertical flip approximation for distant trees and buildings. Ask the artists to mark any pieces of scenery that are too close for this approximation to look good, and just leave those objects out of the reflection. For instance these trees are reflected in the road, but the blue and white crash barrier is not:

 image

Final algorithm:

By stubbornly ignoring the fact that this technique was fundamentally bogus and incorrect, we achieved detailed reflections of sky and scenery, without having to sacrifice framerate and render everything twice:

image

Final problem: it looked too smooth and glassy, more like a mirror than a racetrack. So the artists drew a mottled pattern in the alpha channel of the road texture, and I changed the pixel shader to make this alpha data vary the amount of reflection for each pixel. This created the illusion of puddles, rivulets, etc, so the entire road surface was no longer equally shiny. By varying the alpha pattern, we could add variety and make the reflections look different from one track to another.

And that's all I have to say about wet weather effects. Putting it all together, here is the combined result of fog, spray+wakes, raindrops, and reflections:

image

Of course, technology has moved on since 2002. I highly recommend this paper by Natalya Tatarchuk, which applies 2006 era hardware to a similar set of problems.

Blog index   -   Back to my homepage