October 8, 2014

Photoshop Generated Flow Maps

By Jon Lindquist

Photoshop provides a great number of tools for texture editing and photo manipulation. Conveniently, those same tools can be used to generate flow maps. This blog post will show you how flow maps can be authored within Photoshop using a UV texture and an action that Epic provides. Please note that this action only works in Photoshop CS5 and above.

To use the flow map action simply open a UV texture and ensure that the texture is called background.

UV Texture Backgroun

The attached image can be used for tiling flow map textures or a custom uv texture can be rendered out of the application of your choice to generate flow maps for models. Details regarding the process used to capture UVs as a texture are laid out later in this post.

Then, press play on the “Create Flow Map” action button and it will guide you through the rest of the process. The action installation instructions are below.

Create Flow Map

After pressing play, the Liquify window will open. Smudge the surface around as much as you would like while avoiding the edges. The distortion added here will bake down into a flow map after pressing OK.

Distort Texture

The final flow map texture will reside on the top of your layer stack.

Final Flow Map

In the case of a tiling texture flow map, like the one above, the resulting offset information is independent of its location on the page - which means that it can be moved and duplicated. Just duplicate the final flow map layer and set its layer blend mode to overlay (the results will be correct in areas that do not overlap with other areas of distortion).

Offset Flow Map

Unreal tips

Import the texture with SRGB turned off and consider using vector displacement texture compression (uncompressed) in order to greatly reduce the images size via mip levels. With regards to flow maps, quality is more important than resolution.

Unreal Engine Tips

Within the material, bias and scale the texture to the -1 to 1 range by subtracting .5 and multiplying the result by 2 or a smaller number if you prefer. The texture can then be used with the new “FlowMaps” material function or in other ways.

A sample material using the flow maps material function can be found here: Material'/Engine/Functions/Engine_MaterialFunctions02/ExampleContent/FlowMaps.FlowMaps'

The following example shows how one texture can be distorted over time using flow maps:

One Texture Gets Distorted over Time

Bluprint of Flow Map

Action Installation

The attached action (download) can be copied into your Actions palette by clicking on “Load Actions” from within the Actions options dropdown. Copy the file into the folder that appears, select it, and click Load. A new action group will appear.

Action Install

Load Action

Advanced action options:

If you would like to take more control over the flow map generation process you can do the following:

Open the Actions palette and uncheck the first 3 actions.

Advanced Options

Duplicate your UV layer and call it “FlowMap”. Alter it as much as desired by shifting the pixel positions, then press play on the Create Flow Map action again.

Duplicate UV Layer

You can now make flow maps that aren’t limited by the liquify tool.

Tips for Rendering UV Images from 3D Studio Max Models

Create a new material for your model. Add a vertex color map to the diffuse input. Click on it and set its map to the UV channel that you would like to render. Press “0” or open the render to texture dialog from the “Rendering” drop down from the main toolbar.

Under the Output dropdown, select add and choose diffuse map. Press render and you will have a UV texture to use.

Tips for Rendering UV images from 3D Studio Max Models

Have fun making flow maps!