Flow

By Mark Paddon, for Zoe Wood's CPE 572, Spring 2012

Overview

Flow attempts to simulate realistic looking flowing water on mobile hardware. The general technique is based on a recent Valve presentation intended for mainstream console games. The goal of this project was to see if this gpu heavy technique was replicable on mobile hardware, and to create a system to handle dynamic flow input, which remained static at the time of the paper. The surface fluid is interactive as touch input will change the flow direction as the user drags a finger across the screen. Additionally the phones gyroscope sensor will alter the flow direction based on the phone's orientation. Gradually the touch input deformation will dissipate back into the global flow direction.

Essentially we distort the normal direction based on a time offset and a flow map, a texture representing 2D directional vectors. After a certain period of time this will distort the normals too much and create stretching artifacts. So after a certain period of time the normals will be reset to its original position. To solve the problem of a lurching reset we bring in a second normal map into the process. As one normal map is about to reset it fades out into the other normal map. This completed process gives the illusion of continual flow. Lastly a noise texture (looks like white tv static) was included into the normal offset calculation to prevent pulsing.

In order to accommodate dynamic input a shader was written to manage a separate frame buffer representing the 2D flow texture. When a user swipes the screen input points in UV space are sent to shader, along with a directional vector based off the previous input point. The touched area is then colored into the frame buffer where the red and green pixels represent the direction of the 2D vector. A blue pixel values alerts the main flow shader how to color the swiped flow a different color. Overtime a gaussian blur is applied to the flow texture that blurs it back into the global color. Because of the low floating point precision allowed on the mobile hardware this turned out to be the only viable possibility to achieve the desired effect.

Gallery


The flow application at rest.


Flow immediately after swiped input.


A visualization of the flow map after some touch input. The older input is fading into the background. The colors represent the direction of the flow normals.


The surface normals bring altered by flow map.

Resources