Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in...
-
Upload
truongphuc -
Category
Documents
-
view
215 -
download
1
Transcript of Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in...
![Page 1: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/1.jpg)
Water Flow in
Alex Vlachos, Valve
July 28, 2010
![Page 2: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/2.jpg)
Outline• Goals & Technical Constraints
• How Artists Create Flow Maps
• Flowing Normal Maps in Left 4 Dead 2
• Flowing Color Maps in Portal 2
![Page 3: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/3.jpg)
Left 4 Dead 2
![Page 4: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/4.jpg)
![Page 5: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/5.jpg)
![Page 6: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/6.jpg)
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…
![Page 7: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/7.jpg)
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!
![Page 8: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/8.jpg)
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
![Page 9: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/9.jpg)
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
![Page 10: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/10.jpg)
Flow Texture Mapped onto Surface
Covers entire water surface
Flow Texture
![Page 11: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/11.jpg)
Normal Map Mapped onto Surface
Tiled over the water surface
Normal Map
![Page 12: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/12.jpg)
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
![Page 13: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/13.jpg)
Houdini – Importing Level Geometry
![Page 14: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/14.jpg)
Houdini – “Combing” Vector Field
![Page 15: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/15.jpg)
Houdini – Procedural Masks
![Page 16: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/16.jpg)
Houdini – Applying Masks
![Page 17: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/17.jpg)
Houdini – Water Normal Maps
Normal Map
![Page 18: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/18.jpg)
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
![Page 19: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/19.jpg)
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
![Page 20: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/20.jpg)
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
![Page 21: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/21.jpg)
Flow Visualization Textures
Flow Texture
Noise Texture
![Page 22: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/22.jpg)
Flow Visualization Experiment
Flow Texture
![Page 23: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/23.jpg)
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
![Page 24: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/24.jpg)
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
![Page 25: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/25.jpg)
Smoothly Repeating Flow
Flow Texture
![Page 26: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/26.jpg)
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…
![Page 27: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/27.jpg)
Portal 2 Test Map
![Page 28: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/28.jpg)
Portal 2 Test Map (Programmer Art)
![Page 29: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/29.jpg)
Flow Vectors on Water Surface
Flow Texture
![Page 30: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/30.jpg)
Single Layer Normal Distortion
Flow Vectors
![Page 31: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/31.jpg)
Double Layer Normal Distortion
Flow Vectors
![Page 32: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/32.jpg)
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
![Page 33: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/33.jpg)
Repetition Visualization Single Layer
Flow Vectors
Normal Map
![Page 34: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/34.jpg)
Double Layer
Flow Vectors
Normal Map
![Page 35: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/35.jpg)
Double Layer With Offset
Flow Vectors
Normal Map
![Page 36: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/36.jpg)
Repetition Solved by Offset
Flow Vectors
![Page 37: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/37.jpg)
Pulsing Solved by Noise
Noise Texture
![Page 38: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/38.jpg)
Pulsing Solved by Noise
Flow Vectors
Noise Texture
![Page 39: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/39.jpg)
Water Speed Affects NormalsWe scale down the strength of the normal in tangent space by the
flow speed (Flow speed is the length of the 2D flow vector)
![Page 40: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/40.jpg)
PerformanceCompared to scrolling two normal maps:
• Additional texture fetches: 2 - flow & noise
• Additional arithmetic pixel shader instructions: 21
![Page 41: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/41.jpg)
Water Flow in Portal 2• Wanted to also flow debris in dirty water
• Needed to modify our algorithm to support flowing a color map
![Page 42: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/42.jpg)
Debris Flow Example
Flow Vectors
![Page 43: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/43.jpg)
Debris Flow Example
Flow Texture
![Page 44: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/44.jpg)
Debris Normal (Same as before)
Flow Vectors
![Page 45: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/45.jpg)
Flowing Debris Using Same Algorithm
![Page 46: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/46.jpg)
Flowing Normals• Flowing normals would repeat
an interval from zero to some fraction with the peak (center) of the interval at half distortion
![Page 47: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/47.jpg)
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)
![Page 48: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/48.jpg)
Flowing Debris Using Offset
Flow Vectors
![Page 49: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/49.jpg)
Debris Flow
Flow Vectors
![Page 50: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/50.jpg)
Portal 2 Test Map
![Page 51: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/51.jpg)
Left 4 Dead 2
![Page 52: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/52.jpg)
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
![Page 53: Water Flow in - Valve · PDF file•Inputs: flow field & noise texture ... Water Flow in Portal 2 •Wanted to also flow debris in dirty water •Needed to modify our algorithm to](https://reader031.fdocuments.us/reader031/viewer/2022022421/5a80d14f7f8b9a0c748caab7/html5/thumbnails/53.jpg)
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