もんしょの巣穴blog

[SP] フローマップの作り方

今回はヘルプにも載っているフローマップの作り方です。
ヘルプは英語だからわからん!という人向け、と思っていただければ。

フローマップは名前のとおり、流れを作るためのテクスチャです。
最初に使われたゲームがどれなのかよくわかりませんが、自分の認識ではValve社の『Portal2』がフローマップを世に広めたゲームですね。
UE4で試した結果はこんな感じです。




昔は川の流れなどを作成する場合、テクスチャのUVスクロールによる処理が一般的でした。
この手法はピクセルシェーダが存在しないハードでも利用することが出来るという利点はあるものの、適切な流れを作成するために適切なポリゴン分割が必要だったりと面倒も多いです。
例えば川の中に岩があり、その岩の先で水が渦を巻くように流れている状態を作成するには、岩によって分割されるようにポリゴンを分け、それを岩の先で合流させ、その手前に渦を巻くような形でポリゴンを生成しなければならないわけです。
流石にそこまでやるとポリゴン数も増えてしまいますし、PS2時代にそこまで凝ったことをやっているゲームは自分は知らないです。
まあ、大抵は川の流れにそって幾つかにポリゴンを分割するだけだったと思います。

フローマップによって流れをピクセル単位で指定できるようになったのは大変良いことなのですが、どのように作成すればいいのかという問題が発生します。
幸い、今の世の中はフローマップを作成することが可能なツールは結構あるらしく、フリーのものもあるのかもしれません。
ですが、今回はSubstance Painterを使ってフローマップを作成する手法を紹介します。
まあ、私がSubstance推しなのでしかたないね!

さて、まず最初にSPで新規プロジェクトを作成します。
今回は普通のキューブにペイントします。
プロジェクト作成後にやるのはフローマップ用のチャンネルを増やすことです。
[TextureSet Settings]ペインでチャンネルを増やしましょう。追加するのは[Normal]チャンネルです。

sp088.jpg

追加すると警告が出ます。
SPではハイトマップから法線を生成するわけですが、それとは別に[Normal]チャンネルを生成するとどちらを考慮すればいいのかわからなくなります。
現在のSPでは[Normal]チャンネルは[Additional maps]で指定されている法線マップ(SP日本語版だと通常マップw)を上書きする形になるようです。
日本語版でも警告文は英語なんですよね…

sp089.jpg

また、選択肢が出てきますが、これは下を選びましょう。
上を選ぶと現在の[Additional maps]の法線マップを下敷きにしてしまいますが、フローマップ作成時は邪魔です。
作成時のボタンは[Just once]を選んでおいたほうがいいかと思います。
今回だけってことですね。常にフローマップしか作成しないのであれば[Always]でもいいですが。

これでフローマップのチャンネルが作成できましたので塗っていくわけですが、塗るのにもルールがあります。
まずは塗るためのテクスチャを作成しなければなりません。
これは別に難しくなくて、16x16サイズのテクスチャを(127, 0, 255)のカラーで埋めましょう。
これを適当にわかりやすいファイル名に保存し、シェルフの[テクスチャ]ペインにD&Dしましょう。

sp090.jpg

これをカラーとして塗っていきます。
ブラシはどれを選んでもいいですが、塗る場合の設定は以下のようになります。

sp091.jpg

大切なのは3ヶ所。
[Follow Path]のチェックをONにしましょう。これは塗っていく方向を考慮するためのオプションです。
フローマップは塗っていく方向に流れを作成するので、塗る際にも注意しましょう。
塗るチャンネルは[Normal]チャンネルのみを選択します。他は切っておいたほうが良いでしょう。
最後に単色カラーの代わりに先ほど読み込んだテクスチャを設定します。
どうせ単色なら単色カラーでもいいのでは?と思う方もおられるでしょうが、何故か単色カラーではフローマップは作成できません。あしからず。

残念ながら塗ってもフローマップとしては動いてくれません。なので確認しづらいのが難点といえます。
キーボードショートカットのCキーを押すことで各チャンネルを表示するように切り替えることが出来ますが、これで[Normal]チャンネルを見ながら塗り残しがないかチェックしていくことになると思います。

また、塗りつぶしレイヤーを作成し、[Normal]チャンネルだけチェックを入れておくことをオススメします。塗っていくのはこの上に置いたレイヤーで行うようにしましょう。
塗りつぶしレイヤーは法線真上の状態で塗りつぶしてくれるので、流れのある部分とない部分がわかりやすくなります。

sp092.jpg

塗るのはペンタブとか使ったほうがいいでしょう。マウスだとつらい。
あとは[Normal]チャンネルを出力します。
出力時の[Configuration]を作成する場合、フローマップは[Input maps]の[Normal]を選択しましょう。
通常の法線マップは[Converted maps]の[Normal OpenGL/DirectX]が対応しています。

以上、Substance Painterでフローマップを作成する方法でした。
髪の流れなんかもこれで作れます。
スポンサーサイト
  1. 2016/02/27(土) 11:47:43|
  2. Substance Painter
  3. | トラックバック:0
  4. | コメント:0

[SD] 節のある木の板を作る

Substance Designerで木の板を作ろうとした場合、比較的簡単なのは[Wood Fibers]のノイズを利用して適当に作ることです。
なんとなく木目を意識した形状に先のノイズをブレンドするだけでもそれっぽく出来ます。
ただ、節のある木の板になるとそういうわけにもいかず、少し工夫してやる必要があります。
今回はそんな節の部分を作る割と基本的(と思われる)手法を紹介します。
Youtubeなどから持ってきたネタです。

まず、木の節となる丸い形状を作成します。
これは複数配置されている必要があるので、手っ取り早く[Tile Generator]を使うことにします。

sd109.jpg

楕円は[Pattern Type]を放物面にし、[Interstis X]を少し入れてあげます。今回は0.34を入れました。
他には[Number X], [Number Y]を4、[Scale Variation]を0.24、[Free Rotation Random]を34.7にしています。
重要なのは配置で、[Offset Random], [Position Random]と各種マスクをうまく利用して、重ならないように配置します。
なんとなく納得できる配置ができたら次に進みましょう。

次はもう1つ[Tile Generator]を配置し、[Pattern Type]はデフォルトのレンガのまま、数はXYともに24、回転、オフセットなどのランダムを利用して紙吹雪のように適当に散らします。
[Luminance Variation]で明るさにも変化をつけましょう。
これを[指向性ブラー]に接続、[回転]を0.25(90度回転)、[強度]を2000程度にします。
すると縦方向の線のノイズのようなものが出来ます。これが木目の基本部分となります。

sd110.jpg

さて、ここから節の部分の木目の歪みを作成します。
[指向性ブラー]の結果を[ワープ]に接続し、最初の[Tile Generator]に[Blur HQ Grayscale]を接続してから[ワープ]の[グラデーション入力]に接続します。
[ワープ]の[強度]を調整してあげるとこのように節の部分で歪んでいる木目のように変化します。

sd111.jpg

木目部分はできたので、今度は節の部分を作成します。
まず、節の[Tile Generator]に[Gradient Map]を接続します。これはマスクとして使うので、グラデーションはこんな感じ。

sd112.jpg

次に[ブレンド]ノードを配置し、フォアグラウンドに節の[Tile Generator]を、バックグラウンドに[ワープ]の結果を、不透明度に先ほどのマスクを接続します。

sd113.jpg

蓮コラみたいで気持ち悪いですが、こいつを[Gradient Map]に接続します。
グラデーションは白と黒が交互に配置するだけです。ちょっと数は多いですが。

sd114.jpg

なんとなく木目っぽさが出てきましたが、まだまだ気持ち悪い何かです。
この結果は少し粗めなので、[Blur HQ Grayscale]で少しだけ柔らかくブラーを掛けます。[強度]1.0くらいで良いでしょう。
これを[ブレンド]のバックグラウンドに接続し、フォアグラウンドには[Wood Fibers 2]を接続しましょう。
[ブレンド モード]をDivideにすると一気に木目っぽくなります。

sd115.jpg

ここまでくればあとはここから法線とラフネスを生成するだけです。
もうちょっと全体的に歪ませたい人は[ワープ]ノードと[Perlin Noise Zoom]を利用して歪みを作ると良いでしょう。
また、このままラフネスに差し込むと高い部分が粗く、溝の部分が滑らかになってしまいますので[レベル]ノードで反転しつつ調整すると良いでしょう。
サンプルでは以降はこんな感じで作りました。

sd116.jpg

[レベル]ノードの結果がラフネスになります。
ベースカラー部分は割愛。この辺はけっこう適当なので。

今回作成したものの結果はこのようになっています。

sd117.jpg

全体的に、パッと見は悪くないですが、木の節の部分が板にくっつきすぎているというか、融合しすぎているように見えるのが気になりますね。
節の部分だけ少し凹ますとか、節らしくヒビを入れておくとかの工夫がまだまだ必要ですが、短時間でさくっと作ったものとしては悪くない出来だと思います。今回もサンプルをアップしてあるので、興味のある方は御覧ください。

https://dl.dropboxusercontent.com/u/39588440/Substance/Blog_Wood.sbs

また定番の作り方を覚えたら公開していこうと思います。
  1. 2016/02/21(日) 17:32:52|
  2. Substance Designer
  3. | トラックバック:0
  4. | コメント:0

[SD] 様々な形状を作ってみよう

『Forza Motorsports』というゲームシリーズをご存知でしょうか?
Xboxで発売されているレースゲームで、MS傘下のTurn10スタジオが制作しています。
リアルなドライビングを楽しめるゲームではありますが、日本のユーザには痛車を作れるゲームとしての方が有名かもしれませんね。

このゲームは様々な形状のステッカーを貼り付けて自分なりのペイントを車に施すことが出来ます。
本来であればレースなどで使用されるスポンサーのロゴを貼り付けたような車を作成することを目的としていたのでしょうが、どこかの馬鹿げた人たちが丸、三角といったようなプリミティブ形状を組合わせて素晴らしい絵を作成するようになりました。
アニメキャラや宅急便会社のロゴ、某豆腐店ロゴなどなど…

基本形状を組み合わせて別の形状を作成するというのはポリゴンモデルも一緒ではありますが、なかなか根気のいる作業です。
ですが、うまく作れるようになれば様々な形状を簡単に作ることも可能なはずです。
Substance Desingerはテクスチャを読み込むことが出来るのでわざわざ複雑な形状をプリミティブの集合体で作成する必要はないのですが、この場合は元のテクスチャの解像度に依存することになります。
この依存を排除するにはやはりプロシージャルに作成する必要があるでしょう。
今回は簡単な形状を作成することで、プロシージャルな形状作成に慣れていこうと思います。

まずよく使うノードの紹介をします。
プロシージャルな形状の作成には基本形状となる物が必要となります。
それに使用されるのは以下の3つのノードでしょう。
sd095.jpg

[Shape] は様々な形状を選択できるノードで、丸や四角などをプロパティで変更できます。
[Polygon 1]と[Polygon 2]は正多角形を作成するノードですが、1は真っ白な形状を、2はグラデーションのかかった形状を作成します。
基本はこれらの形状を[Blend]ノードでブレンドしまくって作成することになります。

これらのノードをそのまま重ねあわせてもうまくいかないので、移動や回転を行いたいと考えるでしょう。
その際に使用するのが [Transform 2D]ノードです。名前のとおり、2Dのトランスフォーム(回転、スケール、平行移動)を行うノードです。
通常は回転角度などを指定することになるのですが、プログラマであれば行列で指定する方がわかりやすいかもしれません。
パラメータの [行列] をクリックすると2x2の行列を数値直接で指定できます。

sd096.jpg 

また、このノードを選択中はマウスを使ってトランスフォームを変更することが可能です。

sd097.jpg 

赤い部分をドラッグすると平行移動、黄色はスケール、緑は回転を変更できます。
ただし、シアーは行列直接指定でなければ設定できません。

sd098.jpg

他にも使うノードはあるのですが、今回はこのくらいの説明にしましょう。

さて、今回作成するのはこのような形状です。

sd099.jpg

パッと見はどういう形状かわかりにくいかもしれませんが、三角形6つで六角形を作成し、これをタイル状に敷き詰めたパターンです。
各三角形は重心位置が飛び出ていて、外に向かうほど高さが下がっていきます。
これだけを見るとこの三角形1つは[Polygon 2]ノードを使えば済むように思えますが、よく見ると飛び出ている重心位置が三角形の底辺に近いことがわかります。
そこで、この三角形を作成するために3つの三角形をブレンドして作成することにします。

sd100.jpg

この図のように3つの三角形を組み合わせます。

まずはベースとなる三角形を用意します。これは[Polygon 1]で三角形を作成しましょう。
この三角形は横向きなので、縦に向けるために[Transform 2D]ノードで回転します。
このままの状態では三角形は真っ白で、重心が盛り上がるようにはなりませんので[Gradient Linear 1]と乗算の[Blend]を行います。
[Gradient Linear 1]は一応レベルでグラデーション調整できるようにしておきます。

sd101.jpg

次にこの三角形を[Transform 2D]で変形します。シアーも使うので行列をある程度直接指定する必要があります。

sd102.jpg

適当に縦に潰したあと、行列のY1の項目に0.5を入れればこんな形状になるはずです。

この三角形は同一形状の2つの三角形のうちの1つです。つまり、これと同じ形状がもう1つ入りますが、こちらはY軸に対して対称になります。
そこで、やはり[Transform 2D]を使って[水平方向にミラー]ボタンを1回押して対称となる形状を作ります。
この2つの三角形を[Blend]ノードを使って合わせます。ブレンド方法は[最大(明)]を使いましょう。

sd103.jpg

こうなったら上図の下側の[Transform 2D]を回転、平行移動して1辺がピタリと合うように調整します。ただ、完全にぴったり一致する必要はありません。
また、元のグラデーション付き三角形を別の[Transform 2D]ノードに繋いで、底辺部分の三角形を作り、やはり[最大(明)]で[Blend]します。
結果はこのようになりました。

sd104.jpg

これで目的の形状ができたように思われますが、2Dビューで最後のブレンドを拡大してみてください。
隙間ができていたりしないでしょうか?ちょっと飛び出てたりしないでしょうか?
これらを完全に塞ぐのは正直いって無理なので、[Blur HQ Grayscale]ノードを利用して軽くブラーを掛けてみましょう。

sd105.jpg

ブラー前は隙間がありますが、ブラー後には隙間がなくなりました。
ちょっとボケすぎのようにも見えますが、引いた絵を見ればそこまでボケていないことがわかるでしょう。
ちなみに、ブラー強度は1.0を指定しています。
このような微妙な隙間は法線マップ作成時に微妙に影響を与えたりするので、できるだけブラーを掛けて潰しておきましょう。

三角形は出来上がったので、今度はこれを6つ並べて六角形を作ります。
[Splatter Circular]ノードを使うことでこれを実現できますが、多分元の三角形は正三角形ではないのでうまく六角形にならないでしょう。
そこで、今回も[Transform 2D]ノードを挟んでスケールの調整をしつつ六角形を作成します。
[Splatter Circular]の設定としては、[Number]が6、[パターン]がInput Image、[Center Orientation]がTrue、[ブレンド モード]が最大の状態にしましょう。
あとは半径等をうまく調整し、[Transform 2D]と合わせて六角形になるようにします。
ここでも微妙な隙間などができているかもしれませんので、[Blur HQ Grayscale]ノードで軽くブラーを掛けます。

sd106.jpg

最後は[Tile Generator]を使って敷き詰めます。
設定としては[Number X]と[Number Y]を同じ数値にしておきます。今回は6を設定しました。
また、[オフセット]に0.5、[Pattern Type]にImage Input、[ブレンド モード]に最大を設定します。
これによって六角形が互い違いにはなりますが、隙間ができてしまっています。
この隙間を埋めるには[Interstice]という項目をいじります。
この項目は形状同士の隙間の大きさを設定するための数値で、大きくすると隙間が開きます。
今回は隙間を閉じたいので負の値を入れてやる必要があります。
負の値が入ってくるのが気持ち悪いという方は[Scale]で形状同士が重なるくらいまで大きくしてから[Interstice]をいじるようにしましょう。

隙間が埋まったら[法線]ノードに繋いで強度を設定して完了です。

sd107.jpg

今回は比較的シンプルな形状でしたのでノード数は少ないですが、複雑な形状を作成しようとするとより多くのノードを使います。
重くもなりやすいので注意してください。

ただ、複雑な形状でもやることはあまり変わりません。
複数形状を合成する場合にはピッタリ合わせる必要はなく、ある程度合わせて軽くブラーしてやればOKです。
変な隙間ができていないかはノードの途中で法線マップを生成してみると分かりやすかったりしますのでオススメです。

おまけ

sd108.jpg 

https://dl.dropboxusercontent.com/u/39588440/Substance/Blog_Shape.sbs
  1. 2016/02/11(木) 00:31:42|
  2. Substance Designer
  3. | トラックバック:0
  4. | コメント:0

プロフィール

monsho

Author:monsho
ゲームプログラマ?

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

カテゴリー

ブロとも申請フォーム

この人とブロともになる

ブログ内検索

RSSフィード

リンク

このブログをリンクに追加する