Water Flow in Portal 2
2010 Vlachos 54 pp.

Water Flow in Portal 2

SIGGRAPH 2010 logo featuring a stylized blue and red 'G' with a sphere.

The SIGGRAPH 2010 logo, featuring a stylized blue and red 'G' with a sphere in the center, set against a light blue background.

SIGGRAPH 2010 logo featuring a stylized blue and red 'G' with a sphere.

1. Water Flow in PORTAL 2

Two square icons: the left one shows a stick figure jumping over a wavy line representing water, and the right one shows a stick figure inside a circle with a diagonal line through it, indicating a restriction or warning.

Two square icons side-by-side. The left icon shows a stick figure jumping over a wavy line representing water. The right icon shows a stick figure inside a circle with a diagonal line through it, indicating a restriction or warning.

Two square icons: the left one shows a stick figure jumping over a wavy line representing water, and the right one shows a stick figure inside a circle with a diagonal line through it, indicating a restriction or warning.

Alex Vlachos, Valve

July 28, 2010

SIGGRAPH logo

The SIGGRAPH logo, featuring a stylized 'G' with red and blue curved lines, set against a glowing blue sphere.

SIGGRAPH logo

1.1. Outline

  • • Goals & Technical Constraints
  • • How Artists Create Flow Maps
  • • Flowing Normal Maps in Left 4 Dead 2
  • • Flowing Color Maps in Portal 2
A small wooden cabin in a flooded forest.

A small, dark wooden cabin with a gabled roof is partially submerged in murky, brown floodwater. The cabin is situated in a dense forest of tall, slender trees, many of which have thick, gnarled trunks. The water reflects the light, creating a shimmering effect. The scene is misty and atmospheric, with a cool color palette dominated by blues, greys, and browns. The cabin has several windows, some of which appear to be boarded up or broken. The overall mood is somber and mysterious.

A small wooden cabin in a flooded forest.
A screenshot from the video game Left 4 Dead 2 showing a swampy environment with large trees and murky water. A body is floating in the water, and a large axe is visible in the foreground. The game's HUD is visible at the bottom, showing the health and status of the four survivors: Rochelle, Coach, Ellis, and a fourth character with +100 points.
A screenshot from the video game Left 4 Dead 2 showing a swampy environment with large trees and murky water. A body is floating in the water, and a large axe is visible in the foreground. The game's HUD is visible at the bottom, showing the health and status of the four survivors: Rochelle, Coach, Ellis, and a fourth character with +100 points.
A small icon of a pickaxe, indicating the current weapon.
A small icon of a pickaxe, indicating the current weapon.
A small icon of a first aid kit, indicating the current medical supply.
A small icon of a first aid kit, indicating the current medical supply.
A small icon of a first aid kit, indicating the current medical supply.
A small icon of a first aid kit, indicating the current medical supply.
A small icon of a first aid kit, indicating the current medical supply.
A small icon of a first aid kit, indicating the current medical supply.
Portrait of Rochelle, a survivor.
Portrait of Rochelle, a survivor.
A small icon of a first aid kit, indicating the current medical supply.
A small icon of a first aid kit, indicating the current medical supply.

Rochelle

Portrait of Coach, a survivor.
Portrait of Coach, a survivor.
A small icon of a first aid kit, indicating the current medical supply.
A small icon of a first aid kit, indicating the current medical supply.

Coach

Portrait of Ellis, a survivor.
Portrait of Ellis, a survivor.
A small icon of a first aid kit, indicating the current medical supply.
A small icon of a first aid kit, indicating the current medical supply.

Ellis

Portrait of a survivor with +100 points.
Portrait of a survivor with +100 points.

+100

A close-up view of a concrete structure with a large, dense patch of green algae or moss growing on its surface, partially submerged in dark water.

A close-up photograph showing a concrete structure, possibly a dam or bridge pier, partially submerged in dark water. A large, dense patch of green algae or moss covers a significant portion of the concrete surface. The water is dark and reflects the surrounding environment, including the sky and the concrete structure. The algae patch is textured and appears to be growing in a crevice or on a flat surface. The concrete structure has a rough, weathered appearance with some visible lines and textures. The overall scene suggests a natural, somewhat neglected environment.

A close-up view of a concrete structure with a large, dense patch of green algae or moss growing on its surface, partially submerged in dark water.
SIGGRAPH 2010 logo featuring a stylized red and blue 'G' with a glowing blue base.

The logo for SIGGRAPH 2010, featuring a stylized, three-dimensional 'G' in red and blue, with a glowing blue base that resembles a planet or a lens flare.

SIGGRAPH 2010 logo featuring a stylized red and blue 'G' with a glowing blue base.

1.2. 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...
A stylized logo featuring a red and blue swirling design, resembling a stylized 'G' or a planet with rings, set against a light blue background with a subtle glow.
A stylized logo featuring a red and blue swirling design, resembling a stylized 'G' or a planet with rings, set against a light blue background with a subtle glow.

1.3. 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!
SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue rings.

The logo for SIGGRAPH 2010, featuring a stylized 'G' composed of red and blue rings, with a blue sphere at the center, all set against a light blue background.

SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue rings.

1.4. 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
SIGGRAPH 2010 logo featuring a stylized red and blue 'G' with a white ring.

The logo for SIGGRAPH 2010, featuring a stylized 'G' in red and blue with a white ring, set against a light blue background.

SIGGRAPH 2010 logo featuring a stylized red and blue 'G' with a white ring.

1.5. 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
A square texture showing a blue and purple wavy pattern, representing a normal map for water ripples.

A square texture showing a blue and purple wavy pattern, representing a normal map for water ripples.

A square texture showing a blue and purple wavy pattern, representing a normal map for water ripples.
A square texture showing a green and yellow pattern with red and orange accents, representing a flow map containing 2D flow vectors.

A square texture showing a green and yellow pattern with red and orange accents, representing a flow map containing 2D flow vectors.

A square texture showing a green and yellow pattern with red and orange accents, representing a flow map containing 2D flow vectors.

1.6. Flow Texture Mapped onto Surface

SIGGRAPH 2010 logo

The logo for SIGGRAPH 2010, featuring a stylized, glowing blue and red sphere with a white ring around it, set against a dark background.

SIGGRAPH 2010 logo

Covers entire water surface

A 3D rendered scene showing a forest floor with a small wooden cabin and a large tree trunk in the foreground. The ground is covered in a vibrant, glowing green and yellow texture, representing the flow texture mapped onto the surface.

A 3D rendered scene from a video game. In the foreground, a large, dark tree trunk stands on a ground covered in a vibrant, glowing green and yellow texture. In the background, a small wooden cabin with a dark roof and a glowing window is visible. The scene is set in a forest with other trees and foliage in the distance.

A 3D rendered scene showing a forest floor with a small wooden cabin and a large tree trunk in the foreground. The ground is covered in a vibrant, glowing green and yellow texture, representing the flow texture mapped onto the surface.

Flow Texture

A close-up view of the flow texture, showing a complex, abstract pattern of green, yellow, and red colors, resembling a fluid or smoke simulation.

A close-up view of the flow texture. It shows a complex, abstract pattern of green, yellow, and red colors, resembling a fluid or smoke simulation. The texture is highly detailed and appears to be a result of a procedural generation process.

A close-up view of the flow texture, showing a complex, abstract pattern of green, yellow, and red colors, resembling a fluid or smoke simulation.
SIGGRAPH 2010 logo

The logo for SIGGRAPH 2010, featuring a stylized, glowing sphere with red and blue curved lines representing orbits or data paths.

SIGGRAPH 2010 logo

1.6.1. Normal Map Mapped onto Surface

Tiled over the water surface

3D scene showing a normal map tiled over a water surface in a forest.

A 3D rendered scene of a forest. The ground is covered in a blue and purple wavy normal map texture, which is tiled across the surface. Red lines are overlaid on the texture, forming a grid pattern. In the background, there are dark, silhouetted trees and a small wooden structure.

3D scene showing a normal map tiled over a water surface in a forest.

Normal Map

Close-up of the normal map texture.

A close-up view of the normal map texture, showing a dense, wavy pattern of blue and purple colors.

Close-up of the normal map texture.
A stylized logo featuring a red and blue swirling shape, resembling a stylized 'G' or a sphere with a ring, set against a light blue background with a subtle glow.
A stylized logo featuring a red and blue swirling shape, resembling a stylized 'G' or a sphere with a ring, set against a light blue background with a subtle glow.

1.6.2. Artists Author Flow Maps

  • • Flow map provides a unique 2D vector for every point on the water surface
  • • Relatively low resolution: \sim 4 texels/meter
  • • Impractical to paint directly
  • • We use Houdini to create vector flow maps

1.6.3. Houdini – Importing Level Geometry

Houdini logo

The Houdini logo, featuring a stylized red and blue 'G' shape with a glowing effect.

Houdini logo
Houdini software interface showing a 3D scene and a node graph.

The image shows the Houdini software interface. On the left is a 3D viewport displaying a complex level geometry with a large, flat, light-colored surface and a raised platform. The surface is covered with numerous small, dark, textured objects, possibly representing grass or debris. The platform has a similar texture. On the right is the Houdini node editor. The 'Tree View' tab is active, showing a hierarchy of nodes. The 'Obstacles' node is selected. Below it, the 'merge2' node is visible, followed by the 'acet1' node. The 'redirect' node is also present. The 'merge4' node is highlighted, and the 'Write_Read_BGEO' node is visible below it. The 'Stamp Name' field is set to 'FORVALUE', the 'Group Mask' is 'swamp_grass*', and the 'Attribute' is 'class'. The 'Tolerance' is set to '0.001'.

Houdini software interface showing a 3D scene and a node graph.

1.6.4. Houdini – Procedural Masks

SIGGRAPH 2010 logo

The SIGGRAPH 2010 logo, featuring a stylized red and blue sphere with a white ring, set against a white background.

SIGGRAPH 2010 logo
Houdini procedural mask workflow

A screenshot of the Houdini software interface showing a procedural mask workflow. The left pane displays a 3D view of a dark scene with red, glowing, circular patterns and a white wireframe grid. The right pane shows the Houdini node editor with a network of nodes including 'attribcreate1', 'smooth2', 'subdivide1', 'transfer_Color1', 'smooth4', 'set_NY_ZERO', 'merge1', 'peak1', 'transfer_Color2', and 'ar_redir'. The 'transfer_Color2' node is highlighted with a blue circle. The top toolbar shows the 'Group' menu with 'Brush', 'Symmetry', and 'Stroke' options. The 'Operation' dropdown is set to 'Comb Normals' with a 'Comb Lift' value of 0.15 and 'Keep Normal Length' checked. The 'Tree View' tab is active, showing a hierarchy of objects including 'Water'.

Houdini procedural mask workflow

1.6.5. Houdini – Applying Masks

SIGGRAPH 2010 logo

The SIGGRAPH 2010 logo, featuring a stylized red and blue sphere with a white ring, set against a light blue background.

SIGGRAPH 2010 logo
Houdini interface showing a mesh with red and blue lines and a node network.

A screenshot of the Houdini software interface. The main viewport on the left displays a 3D mesh with red and blue lines, representing a complex surface. The right panel shows the 'Node Network' editor. The 'Group' dropdown is set to 'Stroke'. The 'Operation' dropdown is set to 'Comb Normals'. The 'Comb Lift' slider is set to 0.15. The 'Keep Normal Length' checkbox is checked. The 'Tree View' tab is active, showing a hierarchy of nodes: 'smooth5', 'facet4', 'ar_mixAttr1', 'take_newColours', 'ar_mixAttr3', 'READWRITE', 'set_NORMAL_TC', 'Scale_Unit', 'FinalRotations', and 'RENDER'. The 'READWRITE' node is highlighted with a green circle.

Houdini interface showing a mesh with red and blue lines and a node network.

1.6.6. Houdini – Water Normal Maps

SIGGRAPH 2010 logo

The SIGGRAPH 2010 logo, featuring a stylized red and blue sphere with a white ring around it, set against a light blue background.

SIGGRAPH 2010 logo
Houdini interface showing a 3D water surface and a node network.

A screenshot of the Houdini software interface. On the left, a 3D viewport shows a blue, wavy water surface. On the right, the node network is visible, showing a sequence of nodes: 'BaseGrid', 'Translation_and_Scale_to_desired_Height', 'CreateWaves' (containing 'Low_Frequency_Waves' and 'High_Frequency_Waves'), 'ProcessNormals', 'putNormalToColour', and 'Point_geoNormals_to_Camera_for_Render'. The 'ProcessNormals' node is highlighted with a green border.

Houdini interface showing a 3D water surface and a node network.

Normal Map

A square image showing a blue and purple wavy pattern, representing a normal map.

A square image showing a blue and purple wavy pattern, representing a normal map. The pattern consists of small, irregular waves and ripples, typical of a water surface normal map.

A square image showing a blue and purple wavy pattern, representing a normal map.
Valve logo

The Valve logo, featuring a stylized 'V' with red and blue curved lines, set against a blue and white background.

Valve logo

1.6.7. 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
SIGGRAPH logo featuring a stylized red and blue 'G' with a glowing blue base.

The SIGGRAPH logo consists of a stylized, three-dimensional 'G' shape. The 'G' is formed by two interlocking loops, one colored red and the other blue. Below the 'G' is a glowing blue circular base that emits a soft light.

SIGGRAPH logo featuring a stylized red and blue 'G' with a glowing blue base.

1.7. 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
SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue rings.

The logo for SIGGRAPH 2010, featuring a stylized 'G' composed of red and blue rings, with a glowing blue base.

SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue rings.

1.8. 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
SIGGRAPH 2010 logo featuring a stylized blue and red sphere with a white ring.

The logo for SIGGRAPH 2010, featuring a stylized blue and red sphere with a white ring, set against a light blue background.

SIGGRAPH 2010 logo featuring a stylized blue and red sphere with a white ring.

1.8.1. Flow Visualization Textures

Noise Texture

A square image showing a dense, grayscale noise texture.

A square image showing a dense, grayscale noise texture, commonly used in computer graphics for procedural generation.

A square image showing a dense, grayscale noise texture.

Flow Texture

A square image showing a flow texture with a color gradient from dark green to orange to light green, overlaid with white arrows indicating flow direction.

A square image showing a flow texture. The texture has a color gradient from dark green on the left to orange in the center to light green on the right. Overlaid on the texture are several white arrows indicating flow direction: a short arrow pointing down on the far left, a long arrow pointing down in the dark green region, a short arrow pointing down in the orange region, a short arrow pointing up in the orange region, a short arrow pointing down in the light green region, and a long arrow pointing down on the far right.

A square image showing a flow texture with a color gradient from dark green to orange to light green, overlaid with white arrows indicating flow direction.

1.8.2. Flow Visualization Experiment

SIGGRAPH logo

The SIGGRAPH logo, featuring a stylized 'G' composed of red and blue curved lines, with a blue sphere at the bottom.

SIGGRAPH logo

Flow Texture

Flow Texture color map

A color map for the flow texture, showing a gradient from dark green on the left to dark green on the right, with a bright orange-red center.

Flow Texture color map
SIGGRAPH 2010 logo featuring a stylized red and blue 'G' with a glowing blue base.

The logo for SIGGRAPH 2010, featuring a stylized, three-dimensional 'G' in red and blue, with a glowing blue base and a red ring around it.

SIGGRAPH 2010 logo featuring a stylized red and blue 'G' with a glowing blue base.

1.8.2.1. 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
SIGGRAPH 2010 logo featuring a stylized red and blue 'G' with a blue ring around it.
SIGGRAPH 2010 logo featuring a stylized red and blue 'G' with a blue ring around it.

1.8.2.2. 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
A graph showing the opacity of two layers over time. The x-axis is labeled 'Time' and ranges from 0.0 to 3.0. The y-axis is labeled 'Opacity' and ranges from 0.0 to 1.0. Layer 1 (red line) starts at (0.0, 0.0), peaks at (0.5, 1.0), and returns to 0.0 at (1.0, 0.0). Layer 2 (blue line) starts at (0.0, 1.0), returns to 0.0 at (0.5, 0.0), and peaks at (1.0, 1.0). This pattern repeats every 1.0 unit of time, with Layer 1 peaking at 0.5, 1.5, 2.5 and Layer 2 peaking at 1.0, 2.0, 3.0.

The graph illustrates the opacity of two layers over time. The x-axis represents Time (0.0 to 3.0) and the y-axis represents Opacity (0.0 to 1.0). Layer 1 (red line) and Layer 2 (blue line) are shown. Layer 1 starts at 0.0 opacity at time 0.0, reaches 1.0 opacity at time 0.5, and returns to 0.0 at time 1.0. Layer 2 starts at 1.0 opacity at time 0.0, returns to 0.0 at time 0.5, and reaches 1.0 opacity at time 1.0. This pattern repeats every 1.0 unit of time, with Layer 1 peaking at 0.5, 1.5, 2.5 and Layer 2 peaking at 1.0, 2.0, 3.0.

TimeLayer 1 OpacityLayer 2 Opacity
0.00.01.0
0.51.00.0
1.00.01.0
1.51.00.0
2.00.01.0
2.51.00.0
3.00.01.0
A graph showing the opacity of two layers over time. The x-axis is labeled 'Time' and ranges from 0.0 to 3.0. The y-axis is labeled 'Opacity' and ranges from 0.0 to 1.0. Layer 1 (red line) starts at (0.0, 0.0), peaks at (0.5, 1.0), and returns to 0.0 at (1.0, 0.0). Layer 2 (blue line) starts at (0.0, 1.0), returns to 0.0 at (0.5, 0.0), and peaks at (1.0, 1.0). This pattern repeats every 1.0 unit of time, with Layer 1 peaking at 0.5, 1.5, 2.5 and Layer 2 peaking at 1.0, 2.0, 3.0.

1.8.2.3. Smoothly Repeating Flow

SIGGRAPH logo

The SIGGRAPH logo, featuring a stylized 'G' with red and blue curved lines and a blue base.

SIGGRAPH logo

Flow Texture

Flow Texture color gradient

A horizontal color gradient bar showing a smooth transition from dark green on the left, through orange and red in the center, to dark green on the right.

Flow Texture color gradient
SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue rings.

The logo for SIGGRAPH 2010, featuring a stylized 'G' composed of red and blue rings, with a blue glow effect at the bottom.

SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue rings.

1.9. 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...

1.10. Portal 2 Test Map

SIGGRAPH2010

SIGGRAPH 2010 logo

The logo for SIGGRAPH 2010, featuring a stylized, glowing blue and red 'G' shape with a circular motion blur effect around it.

SIGGRAPH 2010 logo
Portal 2 Test Map screenshot

A screenshot from the Portal 2 Test Map. The scene is a dark, industrial-looking room with walls made of large, square tiles. The floor is covered in a dark, reflective liquid. In the foreground, there is a small, dark platform with a glowing blue light and a small, glowing blue cube. In the background, there is a bright, glowing light source, possibly a portal or a large window, and a small, dark, rectangular object on the floor.

Portal 2 Test Map screenshot

VALVE®

1.10.1. Portal 2 Test Map (Programmer Art)

Stylized logo featuring a red and blue swirl or 'G' shape, possibly representing a portal or a stylized letter.

A stylized logo consisting of a red and blue swirl or 'G' shape, possibly representing a portal or a stylized letter. It has a glowing blue base.

Stylized logo featuring a red and blue swirl or 'G' shape, possibly representing a portal or a stylized letter.
A screenshot from the game Portal 2 showing a test chamber. The chamber is filled with dark water. In the center, there is a small, dark, rectangular object floating. To the left, a large, dark, rectangular structure is partially submerged. The walls are made of grey, corrugated metal panels. The floor is dark and reflective.

A screenshot from the game Portal 2 showing a test chamber. The chamber is filled with dark water. In the center, there is a small, dark, rectangular object floating. To the left, a large, dark, rectangular structure is partially submerged. The walls are made of grey, corrugated metal panels. The floor is dark and reflective.

A screenshot from the game Portal 2 showing a test chamber. The chamber is filled with dark water. In the center, there is a small, dark, rectangular object floating. To the left, a large, dark, rectangular structure is partially submerged. The walls are made of grey, corrugated metal panels. The floor is dark and reflective.

1.11. Flow Vectors on Water Surface

SIGGRAPH logo

The SIGGRAPH logo, featuring a stylized red and blue sphere with a white ring, set against a blue background.

SIGGRAPH logo
3D visualization of flow vectors on a water surface

A 3D visualization of flow vectors on a water surface. The water surface is colored with a gradient from red (high velocity) to green (low velocity). The flow is directed towards a central structure, which is a dark, rectangular block. The surrounding area is a light gray, suggesting a tiled floor or wall. The flow vectors are represented by small arrows on the water surface, indicating the direction and magnitude of the flow.

3D visualization of flow vectors on a water surface

Flow Texture

2D visualization of flow texture

A 2D visualization of flow texture. The image shows a color-coded map of the flow field, with red indicating high velocity and green indicating low velocity. The flow is directed towards a central structure, which is a dark, rectangular block. The surrounding area is a light gray, suggesting a tiled floor or wall. The flow texture is represented by a color gradient, indicating the direction and magnitude of the flow.

2D visualization of flow texture

1.11.1. Single Layer Normal Distortion

SIGGRAPH logo

The SIGGRAPH logo, featuring a stylized, colorful sphere with red, blue, and white segments, surrounded by a glowing blue ring.

SIGGRAPH logo

Flow Vectors

Flow Vectors visualization

A small inset image showing a 3D visualization of flow vectors. The scene is a simplified version of the main image, with a blue floor and a black cube. The floor is covered with a color gradient from red to green, representing the magnitude of the flow vectors. The black cube is positioned in the center of the floor.

Flow Vectors visualization

1.11.2. Double Layer Normal Distortion

SIGGRAPH logo

The SIGGRAPH logo, featuring a stylized red and blue sphere with a white ring, set against a blue and white background.

SIGGRAPH logo

Flow Vectors

Flow Vectors visualization

A small inset image showing a 3D visualization of flow vectors. The scene includes a blue cube and a larger black structure on a blue surface. The flow vectors are represented by a color gradient from red to green, indicating the direction and magnitude of the flow.

Flow Vectors visualization
Valve logo

The Valve logo, featuring a stylized 'V' with red and blue curved lines and a blue glow at the bottom.

Valve logo

1.11.3. 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

1.11.4. Repetition Visualization Single Layer

SIGGRAPH 2010 logo

The SIGGRAPH 2010 logo, featuring a stylized globe with red, white, and blue curved lines representing the Earth's latitude and longitude, set against a light blue background.

SIGGRAPH 2010 logo

Flow Vectors

Flow Vectors visualization

A small 3D visualization showing flow vectors on a surface. The surface is colored with a gradient from red to green, and a small black cube is placed on it. The flow vectors are represented by small red arrows pointing in various directions.

Flow Vectors visualization

Normal Map

Normal Map visualization

A small 3D visualization showing a normal map. The surface is colored with a gradient from red to green, and a small black cube is placed on it. The normal map is represented by a small red dot on the surface.

Normal Map visualization
Valve logo

The Valve logo, consisting of the word "VALVE" in a bold, sans-serif font, with a registered trademark symbol (®) to the right.

Valve logo
Main 3D visualization

A large 3D visualization showing a single layer of repetition. The surface is covered in a dense, repeating pattern of red and blue dots. A small black cube is placed on the surface. The background shows a dark, textured wall and a dark floor.

Main 3D visualization

1.11.4.1. Double Layer

SIGGRAPH logo

The SIGGRAPH logo, featuring a stylized red and blue sphere with a white ring around it, set against a white background.

SIGGRAPH logo

Flow Vectors

Flow Vectors visualization

A 3D visualization of flow vectors on a blue surface. The surface is covered with a dense field of small, red, arrow-like shapes representing the direction and magnitude of the flow. The flow appears to be moving away from a central point towards the edges of the surface.

Flow Vectors visualization

Normal Map

Normal Map visualization

A 2D visualization of a normal map. The map shows a blue surface with a single, prominent red dot in the center, indicating a point of high normal magnitude or a specific feature.

Normal Map visualization
VALVE logo

The VALVE logo, consisting of the word "VALVE" in a bold, sans-serif font, enclosed in a black rectangular border.

VALVE logo
Double Layer visualization

A large 3D visualization of a "Double Layer" simulation. The main area is a blue, textured surface with a dense field of red, arrow-like shapes representing flow vectors. The surface is surrounded by a dark, grid-like structure, possibly representing a container or a boundary. The overall scene is rendered in a high-quality, realistic style.

Double Layer visualization

1.11.4.2. Double Layer With Offset

SIGGRAPH logo

The SIGGRAPH logo, featuring a stylized red and blue sphere with a white ring, set against a light blue background.

SIGGRAPH logo

Flow Vectors

Flow Vectors visualization

A visualization of flow vectors on a 2D plane. The plane is colored with a gradient from red to green. A small black cube is positioned on the plane. The flow vectors are represented by small red arrows pointing outwards from the cube.

Flow Vectors visualization

Normal Map

Normal Map visualization

A visualization of a normal map. The plane is colored with a gradient from blue to red. A small red circle is positioned on the plane, representing the normal vector at that point.

Normal Map visualization

1.11.4.3. Repetition Solved by Offset

SIGGRAPH logo

The SIGGRAPH logo, featuring a stylized, colorful sphere with red, blue, and white segments, surrounded by a glowing blue ring.

SIGGRAPH logo

Flow Vectors

Flow Vectors visualization

A small inset image showing a 3D visualization of flow vectors. The scene is a simplified version of the main image, with a blue floor and a small black cube. The floor is covered with a dense field of small, colorful arrows (vectors) pointing in various directions, indicating the flow of a fluid or gas. The colors range from red to green.

Flow Vectors visualization
SIGGRAPH 2010 logo featuring a stylized red and blue sphere with a white ring.

The logo for SIGGRAPH 2010, featuring a stylized sphere with red and blue curved lines and a white ring, set against a blue and white background.

SIGGRAPH 2010 logo featuring a stylized red and blue sphere with a white ring.

1.11.5. Pulsing Solved by Noise

A 3D rendering of a dark, industrial interior space with a large, dark, rectangular object in the center and a smaller, dark, rectangular object in the foreground. The floor is covered in a dense, noisy texture.

A 3D rendering of a dark, industrial interior space. In the center, there is a large, dark, rectangular object with some glowing elements on top. In the foreground, there is a smaller, dark, rectangular object. The floor is covered in a dense, noisy texture. The walls are made of dark, rectangular panels.

A 3D rendering of a dark, industrial interior space with a large, dark, rectangular object in the center and a smaller, dark, rectangular object in the foreground. The floor is covered in a dense, noisy texture.

Noise Texture

A close-up view of a noisy texture, showing a dense, granular pattern of black and white pixels.

A close-up view of a noisy texture, showing a dense, granular pattern of black and white pixels.

A close-up view of a noisy texture, showing a dense, granular pattern of black and white pixels.

1.11.6. Pulsing Solved by Noise

SIGGRAPH2010

SIGGRAPH 2010 logo

The SIGGRAPH 2010 logo, featuring a stylized red and blue sphere with a white ring, set against a blue and white background.

SIGGRAPH 2010 logo

Flow Vectors

Flow Vectors visualization

A visualization of flow vectors in a pool, showing a color gradient from red to green. The red area is near the source of the flow, and the green area is further away. The flow vectors are represented by small arrows pointing in the direction of the flow.

Flow Vectors visualization

Noise Texture

Noise Texture visualization

A visualization of a noise texture in a pool, showing a grayscale gradient. The texture is applied to the water surface, creating a realistic, rippling effect. The texture is represented by a small, dark, rectangular area.

Noise Texture visualization
VALVE logo

The VALVE logo, featuring the word "VALVE" in a bold, sans-serif font, with a registered trademark symbol (®) to the right.

VALVE logo
SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue swirls.
SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue swirls.

1.12. 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)

Diagram illustrating the scaling of normals based on flow speed. A semi-circle represents the tangent space. A vertical black arrow is labeled 'Flat Normal'. A blue arrow is labeled 'Normal'. A black arrow pointing towards the arc is labeled 'Strong Normal'.
Diagram illustrating the scaling of normals based on flow speed. A semi-circle represents the tangent space. A vertical black arrow is labeled 'Flat Normal'. A blue arrow is labeled 'Normal'. A black arrow pointing towards the arc is labeled 'Strong Normal'.
Three square panels showing the visual effect of normal scaling. The left panel is a solid blue color. The middle panel shows a noisy blue texture. The right panel shows a highly detailed, noisy blue texture with many small, colorful variations.
Three square panels showing the visual effect of normal scaling. The left panel is a solid blue color. The middle panel shows a noisy blue texture. The right panel shows a highly detailed, noisy blue texture with many small, colorful variations.
A stylized logo featuring a red and blue swirling design, resembling a stylized 'G' or a sphere with a ring, set against a light blue background with a subtle glow.
A stylized logo featuring a red and blue swirling design, resembling a stylized 'G' or a sphere with a ring, set against a light blue background with a subtle glow.

1.13. Performance

Compared to scrolling two normal maps:

  • • Additional texture fetches: 2 - flow & noise
  • • Additional arithmetic pixel shader instructions: 21
SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue rings.

The logo for SIGGRAPH 2010, featuring a stylized 'G' composed of red and blue rings, with a blue glow effect.

SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue rings.

1.14. Water Flow in Portal 2

  • • Wanted to also flow debris in dirty water
  • • Needed to modify our algorithm to support flowing a color map

1.15. Debris Flow Example

SIGGRAPH logo

The SIGGRAPH logo, featuring a stylized 'G' with red and blue curved lines and a blue base.

SIGGRAPH logo

Flow Vectors

Flow Vectors visualization

A visualization of flow vectors, showing a color-coded map of flow direction and magnitude. The colors range from green (low magnitude) to red (high magnitude), with arrows indicating the flow direction.

Flow Vectors visualization
SIGGRAPH 2010 logo

The logo for SIGGRAPH 2010, featuring a stylized, glowing blue and red sphere with a white ring around it, set against a dark background.

SIGGRAPH 2010 logo

1.15.1. Debris Flow Example

Debris flow visualization

A large, abstract visualization of a debris flow. The image shows a turbulent, swirling mass of material in shades of green, yellow, and orange, suggesting a complex, chaotic flow pattern. The top left corner shows a dark, textured surface, possibly a wall or floor, with a grid pattern.

Debris flow visualization

Flow Texture

Flow texture visualization

A smaller, square visualization showing a dense, granular texture of the flow. It features a complex, swirling pattern of green, yellow, and orange, with many small, dark, circular features scattered throughout, representing individual particles or debris within the flow.

Flow texture visualization

1.15.2. Debris Normal (Same as before)

Stylized logo featuring a red and blue swirl or ribbon shape, possibly representing a planet or a stylized letter 'G'.
Stylized logo featuring a red and blue swirl or ribbon shape, possibly representing a planet or a stylized letter 'G'.

Flow Vectors

A small inset image showing a color-coded visualization of flow vectors, likely representing a fluid flow field. The colors range from green to red, indicating different magnitudes or directions of the flow.
A small inset image showing a color-coded visualization of flow vectors, likely representing a fluid flow field. The colors range from green to red, indicating different magnitudes or directions of the flow.

1.15.2.1. Flowing Debris Using Same Algorithm

SIGGRAPH logo

The SIGGRAPH logo, featuring a stylized 'G' with red and blue curved lines and a blue base.

SIGGRAPH logo
Flowing debris simulation

A large, textured, greenish-brown surface, possibly representing a planet or a large body of water, showing swirling patterns and debris. The surface is covered in a dense layer of small, light-colored particles or debris. In the top left corner, a portion of a metallic, reflective structure is visible.

Flowing debris simulation

1.15.2.2. Flowing Normals

  • Flowing normals would repeat an interval from zero to some fraction with the peak (center) of the interval at half distortion
Two graphs illustrating the concept of flowing normals over time.

The figure consists of two vertically stacked graphs sharing a common x-axis labeled 'Time' ranging from 0.0 to 3.0.

The top graph plots 'Opacity' (y-axis, 0.0 to 1.0) against 'Time'. It shows two periodic triangular waves. 'Layer 1' (red line) starts at (0,0), peaks at (0.5, 1.0), and returns to 0 at (1.0, 0). 'Layer 2' (blue line) starts at (0, 1.0), reaches 0 at (0.5, 0), and returns to 1.0 at (1.0, 1.0). This pattern repeats. Green circles mark the peaks of the waves at time intervals of 0.5.

The bottom graph plots 'Distortion' (y-axis, 0.0 to 1.0) against 'Time'. It shows two periodic sawtooth waves. 'Layer 1' (red line) starts at (0,0), increases linearly to (1.0, 1.0), and then resets to 0. 'Layer 2' (blue line) starts at (0, 1.0), decreases linearly to (1.0, 0), and then resets to 1.0. This pattern repeats. Green circles mark the points where the distortion is 0.5, occurring at time intervals of 0.5.

Two graphs illustrating the concept of flowing normals over time.

1.15.2.3. 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)
Two graphs illustrating the 'Flowing Debris' effect. The top graph shows Opacity vs. Time for two layers, Layer 1 (red) and Layer 2 (blue), with peaks at zero. The bottom graph shows Distortion vs. Time for the same layers, with linear ramps intersecting at zero.

The figure consists of two vertically stacked graphs sharing a common x-axis labeled 'Time' ranging from 0.0 to 3.0.

Top Graph: Opacity vs. Time

The y-axis is labeled 'Opacity' and ranges from 0.0 to 1.0. Two sawtooth waves are shown:

  • Layer 1 (Red): Peaks at x = 0.5, 1.5, 2.5 with an opacity of 1.0. Troughs are at x = 0.0, 1.0, 2.0, 3.0 with an opacity of 0.0.
  • Layer 2 (Blue): Peaks at x = 1.0, 2.0 with an opacity of 1.0. Troughs are at x = 0.0, 0.5, 1.5, 2.5, 3.0 with an opacity of 0.0.

Green circles mark the peaks of both layers at x = 0.5, 1.0, 1.5, 2.0, 2.5.

Bottom Graph: Distortion vs. Time

The y-axis is labeled 'Distortion' and ranges from -1.0 to 1.0. Two sets of parallel lines are shown:

  • Layer 1 (Red): Consists of five parallel lines with a positive slope. Each line has a y-intercept of -0.5 and a y-value of 0.5 at x = 1.0, 2.0, 3.0 respectively.
  • Layer 2 (Blue): Consists of five parallel lines with a positive slope. Each line has a y-intercept of 0.0 and a y-value of 0.5 at x = 0.5, 1.5, 2.5 respectively.

Green circles mark the intersections of the lines at y = 0.0 at x = 0.5, 1.0, 1.5, 2.0, 2.5.

Two graphs illustrating the 'Flowing Debris' effect. The top graph shows Opacity vs. Time for two layers, Layer 1 (red) and Layer 2 (blue), with peaks at zero. The bottom graph shows Distortion vs. Time for the same layers, with linear ramps intersecting at zero.

1.15.2.4. Flowing Debris Using Offset

SIGGRAPH logo

The SIGGRAPH logo, featuring a stylized 'G' with red and blue curved lines and a blue base.

SIGGRAPH logo

Flow Vectors

Flow Vectors visualization

A small rectangular visualization showing a color-coded map of flow vectors. The colors range from green to red, indicating different flow directions or magnitudes. The map shows a complex pattern of flow lines.

Flow Vectors visualization

1.15.3. Debris Flow

SIGGRAPH logo

The SIGGRAPH logo, featuring a stylized 'G' with red and blue curved lines and a blue base.

SIGGRAPH logo

Flow Vectors

Flow Vectors visualization

A visualization of flow vectors, showing a color-coded map of flow direction and magnitude. The colors range from green (low magnitude) to red (high magnitude), with arrows indicating the flow direction.

Flow Vectors visualization
A dark, flooded room with tiled walls and floor, featuring a long wooden table with a glowing orb and a bright light source in the distance.

A dark, atmospheric scene of a flooded room. The walls are covered in large, square tiles, some of which are dark and others light, creating a checkered pattern. The floor is also tiled and is partially submerged in dark, rippling water. In the foreground, a long, dark wooden table sits on the floor. On the table, there is a glowing white orb, a small white box with a black symbol, and a small white box with a black symbol. In the background, a bright light source, possibly a window or a doorway, illuminates the scene, casting a strong beam of light across the water and the walls. A small, dark, rectangular object is visible on the wall near the light source. The overall mood is mysterious and eerie.

A dark, flooded room with tiled walls and floor, featuring a long wooden table with a glowing orb and a bright light source in the distance.
A small wooden cabin in a flooded forest.

A small, dark wooden cabin with a gabled roof is partially submerged in murky, brown floodwater. The cabin is situated in a dense forest of tall, slender trees. Several large, thick tree trunks are visible in the foreground, their lower portions underwater. The water surface is rippled, reflecting the overcast sky. The overall atmosphere is somber and desolate, suggesting a scene of environmental devastation or a remote, isolated settlement.

A small wooden cabin in a flooded forest.
SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue swirls.

The logo for SIGGRAPH 2010, featuring a stylized 'G' composed of red and blue curved lines, with a glowing blue base.

SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue swirls.

1.16. 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
SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue rings.

The logo for SIGGRAPH 2010, featuring a stylized 'G' composed of red and blue rings, with a blue base and a red ring.

SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue rings.

1.17. 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
SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue rings.

The logo for SIGGRAPH 2010, featuring a stylized 'G' composed of red and blue rings, with a blue glow effect at the bottom.

SIGGRAPH 2010 logo featuring a stylized 'G' with red and blue rings.

Thank You!

Water textures created by Alireza Razmpoosh

Alex Vlachos, Valve