2014年10月8日

Photoshopでフローマップの生成

作成 Jon Lindquist

「Photoshop」はテクスチャ編集と写真加工を行う数多くのツールを提供してくれるソフトウェアです。同時にこれらツールは、フローマップの生成にも使用する事が可能です。こちらのブログポストでは、UV テクスチャとエピックの提供するアクションを使う事で、Photoshop でフローマップを作成する方法をお見せいたします。尚、このアクションは Photoshop CS5 以上でのみ使用できます。ご注意ください。

フローマップ アクションの使用するには、まず UV テクスチャを開いて、そのテクスチャが Background (背景) と名付けられている事を確認します。

UV Texture Backgroun

こちらの画像はフローマップ テクスチャの垂直方向での回転 (tilt) に使用したり、カスタム UV テクスチャを好きなアプリケーションでレンダリングする事でモデル用のフローマップを生成する事ができます。UV をテクスチャとしてキャプチャする手順については、本記事に後述いたします。

次に「Create Flow Map」(フローマップ作成) アクションの再生ボタンを押すことで、残り作業の進め方を教えてくれます。アクションのインストール手順については以下の通りです。

Create Flow Map

再生を押すと、「Liquify」ウィンドウが開きます。端を避けつつ、好きなだけ表面をにじませましょう。ここで加えられたディストーションは、[OK] を押した後にフローマップにベイクされます。

Distort Texture

最終的なフローマップ テクスチャはレイヤー スタックの一番上に配置されます。

Final Flow Map

以上のような回転したテクスチャ フローマップの場合、生成されるオフセット情報は、ページ上の位置とは独立して作り出されるため、移動させたり複製したりする事が可能です。最終的なフローマップ レイヤーを複製して、レイヤーのブレンドモード (描画モード) をオーバーレイに設定します。 (他の歪曲箇所とは重ならない部分が正しく生成されます)

Offset Flow Map

Unreal のヒント

テクスチャのインポート時には SRGB をオフにした状態で行い、またミップレベル経由で画像サイズを大幅に低下させるためにベクトル偏位テクスチャ圧縮 (非圧縮) を使用しても良いかもしれません。フローマップについては解像度よりも画質を優先します。

Unreal Engine Tips

マテリアルにおいては、テクスチャのバイアスとスケーリングを行い、.5 を差し引いた結果に 2 (もしくは必要に応じてそれ以下の数字) を掛けて、-1 から 1 までの範囲内に収めます。これによって、このテクスチャを新しい「フローマップ」マテリアル機能、およびその他の方法で使用する事できます。

フローマップ マテリアル機能を使って作成したサンプル マテリアルはこちら: Material'/Engine/Functions/Engine_MaterialFunctions02/ExampleContent/FlowMaps.FlowMaps'

以下の例では、フローマップを使って、とあるテクスチャを時間経過で歪ませる方法を示しています。

One Texture Gets Distorted over Time

Bluprint of Flow Map

アクションのインストール方法

こちらに添付されたアクション (ダウンロードはこちら) を「アクション」パレットに追加するには、「アクション」オプションのドロップダウンリストから [アクションの読み込み] をクリックします。次に開かれるフォルダにファイルをコピーし、これを選択して [読み込む] をクリックします。すると新しいアクション グループが表示されます。

Action Install

Load Action

アクションの高度なオプション:

フローマップ生成手順をさらに細かく調整したい場合は、次の手順を実施する事で行えます。

「アクション」パレットを開いて、最初の 3 つのオプションのチェックを外します。

Advanced Options

UV レイヤーを複製し、これの名前を「FlowMap」に変更します。ピクセル位置を移動させる事で望む形に変更し、再び「Create Flow Map」アクションの再生ボタンを押します。

Duplicate UV Layer

これによって Liquify ツールに制限されていないフローマップを作成する事ができるようになります。

3D Studio Max モデルの UV 画像のレンダリングに関するヒント

モデル用に新しいマテリアルを作成します。次にディフューズ入力に頂点カラーマップを追加します。これをクリックし、マップをレンダリングしたい UV チャンネルに設定します。「0」を押すか、メイン ツールバーの「レンダリング」ドロップダウンリストから「Render to Texture (テクスチャをレンダリング)」ダイアログを開きます。

「Output (出力)」ドロップダウンリストから「Add and Choose Diffuse Map」(ディフューズマップの追加と選択) を選択します。[Render] (レンダリング) を押せば、使用可能な UV テクスチャが生成されます。

Tips for Rendering UV images from 3D Studio Max Models

フローマップが楽しく作れますように!