0
Water Flow in


     Alex Vlachos, Valve
        July 28, 2010
Outline
• Goals & Technical Constraints

• How Artists Create Flow Maps

• Flowing Normal Maps in Left 4 Dead 2

• Flowing...
Left 4 Dead 2
Goals
• Visual
   – Solve repeating texture artifacts
   – Flow around obstacles
   – Vary water speed and bump strength
•...
Gameplay
• Early Left 4 Dead 2 playtests showed players were confused and
  got lost often in the swamps
   – Soft non-dir...
Technical Constraints
• Already at perf limits on the Xbox 360 & low-end PC

• Already at memory limits on the Xbox 360

•...
Algorithm Overview
• Pixel shader flow, not geometric flow
• Continue to use a normal map for water
  ripples
• Artists au...
Flow Texture Mapped onto Surface
Covers entire water surface

                                   Flow Texture
Normal Map Mapped onto Surface
Tiled over the water surface

                                 Normal Map
Artists Author Flow Maps
• Flow map provides a unique 2D vector for every point on
  the water surface
• Relatively low re...
Houdini – Importing Level Geometry
Houdini – “Combing” Vector Field
Houdini – Procedural Masks
Houdini – Applying Masks
Houdini – Water Normal Maps

                              Normal Map
Left 4 Dead 2
• Wanted to replace our scrolling normal maps with
  flowing normal maps

• Keep the rest of the water shade...
Related Work
• Nelson Max and Barry Becker 1995. Flow visualization
  using moving textures. In Proceedings of the
  ICASW...
Flow Visualization
• Inputs: flow field & noise texture

• Distort a noise texture to visualize a flow field

• The UV is ...
Flow Visualization Textures
    Noise Texture
                        Flow Texture
Flow Visualization Experiment

                                Flow Texture
Max & Becker’s Observation
• The beginning of the distortion looks convincing

• Only distort a small amount

• In general...
Smoothly Interpolating Layers
• Blend the short animated segment in two layers
• Each layer is offset half a phase so we c...
Smoothly Repeating Flow

                          Flow Texture
A Great Start
• We now have a method to flow a normal map

• We want to apply this to a larger surface

• But applying thi...
Portal 2 Test Map
Portal 2 Test Map (Programmer Art)
Flow Vectors on Water Surface
                                Flow Texture
Single Layer Normal Distortion

                                 Flow Vectors
Double Layer Normal Distortion

                                 Flow Vectors
Two Major Problems
• Repetition – The same normals will flow
  through the same point on the mesh

• Pulsing – The surface...
Repetition Visualization Single Layer

                                        Flow Vectors




                          ...
Double Layer

               Flow Vectors




               Normal Map
Double Layer With Offset

                           Flow Vectors




                           Normal Map
Repetition Solved by Offset

                              Flow Vectors
Pulsing Solved by Noise
                          Noise Texture
Pulsing Solved by Noise

                          Flow Vectors




                          Noise Texture
Water Speed Affects Normals
We scale down the strength of the normal in tangent space by the
  flow speed (Flow speed is t...
Performance
Compared to scrolling two normal maps:
• Additional texture fetches: 2 - flow & noise
• Additional arithmetic ...
Water Flow in Portal 2
• Wanted to also flow debris in dirty water

• Needed to modify our algorithm to support flowing a
...
Debris Flow Example

                      Flow Vectors
Debris Flow Example
                      Flow Texture
Debris Normal (Same as before)

                                 Flow Vectors
Flowing Debris Using Same Algorithm
Flowing Normals
• Flowing normals would repeat
  an interval from zero to some
  fraction with the peak (center)
  of the ...
Flowing Debris
• Flowing colors works better by
  offsetting the interval from –
  fraction to +fraction so the
  peak of ...
Flowing Debris Using Offset

                              Flow Vectors
Debris Flow

              Flow Vectors
Portal 2 Test Map
Left 4 Dead 2
Future Work
• Flow height maps and use tessellation hardware
• Multiple frequencies of normal maps
• Render dynamic flow v...
Summary
•   Use an artist-authored flow map
•   Flow the normals in two layers and combine
•   Use noise to reduce pulsing...
Thank You!

Water textures created by Alireza Razmpoosh

            Alex Vlachos, Valve
         alex@valvesoftware.com
SIGGRAPH 2010 Water Flow in Portal 2
SIGGRAPH 2010 Water Flow in Portal 2
Upcoming SlideShare
Loading in...5
×

SIGGRAPH 2010 Water Flow in Portal 2

8,501

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,501
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
97
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "SIGGRAPH 2010 Water Flow in Portal 2"

  1. 1. Water Flow in Alex Vlachos, Valve July 28, 2010
  2. 2. Outline • Goals & Technical Constraints • How Artists Create Flow Maps • Flowing Normal Maps in Left 4 Dead 2 • Flowing Color Maps in Portal 2
  3. 3. Left 4 Dead 2
  4. 4. Goals • Visual – Solve repeating texture artifacts – Flow around obstacles – Vary water speed and bump strength • Technical – Work with existing reflective surfaces – Min hardware ps2.0b (6-year-old hardware) & Xbox 360 • Gameplay…
  5. 5. Gameplay • Early Left 4 Dead 2 playtests showed players were confused and got lost often in the swamps – Soft non-directional lighting – Trees provided too much cover • My theory was that water flow would improve gameplay by highlighting the correct path • We tested this theory through playtesting • In practice, we found testers took 17% fewer wrong turns and decreased the time it took to traverse the level!
  6. 6. Technical Constraints • Already at perf limits on the Xbox 360 & low-end PC • Already at memory limits on the Xbox 360 • Our water shader had limited instructions left for our low end hardware ps2.0b
  7. 7. Algorithm Overview • Pixel shader flow, not geometric flow • Continue to use a normal map for water ripples • Artists author a flow map (a texture containing 2D flow vectors) • Use this flow map in a pixel shader to distort the normal map in the direction of flow
  8. 8. Flow Texture Mapped onto Surface Covers entire water surface Flow Texture
  9. 9. Normal Map Mapped onto Surface Tiled over the water surface Normal Map
  10. 10. Artists Author Flow Maps • Flow map provides a unique 2D vector for every point on the water surface • Relatively low resolution: ~4 texels/meter • Impractical to paint directly • We use Houdini to create vector flow maps
  11. 11. Houdini – Importing Level Geometry
  12. 12. Houdini – “Combing” Vector Field
  13. 13. Houdini – Procedural Masks
  14. 14. Houdini – Applying Masks
  15. 15. Houdini – Water Normal Maps Normal Map
  16. 16. Left 4 Dead 2 • Wanted to replace our scrolling normal maps with flowing normal maps • Keep the rest of the water shader the same • This algorithm ultimately provides a new per-pixel normal generated from the normal map and flow map
  17. 17. Related Work • Nelson Max and Barry Becker 1995. Flow visualization using moving textures. In Proceedings of the ICASW/LaRC Symposium on Visualizing Time-Varying Data, 77–87. • Building on aspects of their algorithm and applying their approach to flowing normal maps
  18. 18. Flow Visualization • Inputs: flow field & noise texture • Distort a noise texture to visualize a flow field • The UV is offset by the 2D flow vector scaled by time
  19. 19. Flow Visualization Textures Noise Texture Flow Texture
  20. 20. Flow Visualization Experiment Flow Texture
  21. 21. Max & Becker’s Observation • The beginning of the distortion looks convincing • Only distort a small amount • In general, distortion looks reasonable for the first 1/3 of uv space
  22. 22. Smoothly Interpolating Layers • Blend the short animated segment in two layers • Each layer is offset half a phase so we can hide the restart for each layer
  23. 23. Smoothly Repeating Flow Flow Texture
  24. 24. A Great Start • We now have a method to flow a normal map • We want to apply this to a larger surface • But applying this to a large surface means tiling our normal map which will cause artifacts…
  25. 25. Portal 2 Test Map
  26. 26. Portal 2 Test Map (Programmer Art)
  27. 27. Flow Vectors on Water Surface Flow Texture
  28. 28. Single Layer Normal Distortion Flow Vectors
  29. 29. Double Layer Normal Distortion Flow Vectors
  30. 30. Two Major Problems • Repetition – The same normals will flow through the same point on the mesh • Pulsing – The surface appears to pulse in a repeating pattern
  31. 31. Repetition Visualization Single Layer Flow Vectors Normal Map
  32. 32. Double Layer Flow Vectors Normal Map
  33. 33. Double Layer With Offset Flow Vectors Normal Map
  34. 34. Repetition Solved by Offset Flow Vectors
  35. 35. Pulsing Solved by Noise Noise Texture
  36. 36. Pulsing Solved by Noise Flow Vectors Noise Texture
  37. 37. Water Speed Affects Normals We scale down the strength of the normal in tangent space by the flow speed (Flow speed is the length of the 2D flow vector)
  38. 38. Performance Compared to scrolling two normal maps: • Additional texture fetches: 2 - flow & noise • Additional arithmetic pixel shader instructions: 21
  39. 39. Water Flow in Portal 2 • Wanted to also flow debris in dirty water • Needed to modify our algorithm to support flowing a color map
  40. 40. Debris Flow Example Flow Vectors
  41. 41. Debris Flow Example Flow Texture
  42. 42. Debris Normal (Same as before) Flow Vectors
  43. 43. Flowing Debris Using Same Algorithm
  44. 44. Flowing Normals • Flowing normals would repeat an interval from zero to some fraction with the peak (center) of the interval at half distortion
  45. 45. Flowing Debris • Flowing colors works better by offsetting the interval from – fraction to +fraction so the peak of the interval is at zero (the at-rest position)
  46. 46. Flowing Debris Using Offset Flow Vectors
  47. 47. Debris Flow Flow Vectors
  48. 48. Portal 2 Test Map
  49. 49. Left 4 Dead 2
  50. 50. Future Work • Flow height maps and use tessellation hardware • Multiple frequencies of normal maps • Render dynamic flow vectors per-frame so animated objects cause flow changes • Use flow map with our physics simulation to have objects flow on the water surface using the same data
  51. 51. Summary • Use an artist-authored flow map • Flow the normals in two layers and combine • Use noise to reduce pulsing artifact • Offset each phase of animation to reduce repetition • Flowing debris uses an offset distortion range that favors less distortion than the normal flow
  52. 52. Thank You! Water textures created by Alireza Razmpoosh Alex Vlachos, Valve alex@valvesoftware.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×