[UE4][Tips] UV Distortion

今回は UnrealEngine4 のマテリアルのTipsを共有します。

UV Distortion について。
UV Distortion とは簡単にいうとUVの値を変化させてテクスチャを歪める手法のこと。
炎などエフェクト表現で使われる機会が多い技術ですね。

早速つくってみる

どういう仕組でこうなるのかの解説の前にまず作ってみましょう。
上のサンプル動画よりもう少し簡単なものを例に作成手順を解説します。

まず以下のような「歪ませたい画像」と「適当なノイズの画像」を準備します。
※下の画像はそれぞれ画像上で右メニューからダウンロードできます。

・歪ませたい画像


・ノイズ画像



これらをUnrealに読み込みます。
ノイズの画像、アセットをダブルクリックして開いたウィンドウでsRGBのチェックをオフにしてください。


このsRGBのチェックボックスは「色」として扱う用途ではないテクスチャ、例えばマスク用画像などの場合にオフにします。
こうすると例えばレッド0.5の色はそのままの0.5の数値としても扱うことができるようになります。

マテリアルの設定

次にマテリアルを作っていきます。

コンテンツブラウザの [Add New] から新規マテリアルを作成。



歪ませたい画像とTextureCoodinate を下図の用に接続。つまりモデルのUVに素直にテクスチャを貼ります。




この TextureCoodinate からTexture画像につながっている UV情報に手を加えることで UV Distortiom 実現します。
どのように手を加えるのかというと TextureCoordinate の出力にノイズ画像を加算します。
[Add]を作成して下図のように接続。


するとテクスチャが図のように変化します。
元画像と全然違う絵になってしまいますが、これは歪みが大きくて元の形状の跡形がない状態。


歪みを小さくするにはノイズ画像を暗くすると小さくなります。

ノイズ画像を暗くするためには、ノイズテクスチャに1以下の数値を乗算すれば良いので、とりあえず0.2のスカラーパラメータをMultiplyをつかって図のように接続します。

テクスチャが確認できる程度の歪みになります。

この数値を変化させると歪み具合の変化が確認できます。

このマテリアルをマテリアルインスタンスにしちゃえば、数値調整しながらリアルタイムにテクスチャの変化を見られるようになります。

マテリアルインスタンス化の手順は基本操作なので今回は説明しませんが、参考までに手順を動画にしました↓

ちなみに、このノイズをUVスクロールさせるとこの記事はじめのアニメーションが実現できます。

簡単な仕組みの解説

ではどうしてこんな事が起こるのか・・？
細かい説明は次回にしますが、簡単にいうとUV位置を移動（オフセット）させてるだけです。
よくテクスチャをタイリングするときにTexture Coordinate に数値を掛け算しますがあれと原理は一緒です。

次回、もう少し詳しく仕組みを解説してみようとおもいます！

[Houdini]ポリゴンカーブよ、お前は何者？

今回は、最近Houdiniのカーブをさわってて、ん？？と思って調べたことを共有したいと思います。
「Polygon Curve」についてです。

Houdiniのカーブの種類

「Curve」SOPで作成するカーブには種類があり「NURBS Curve」「Bezier Curve」「Polygon Curve」の中から1つを選択してカーブを作成していくことになります。

それらの違いとしては「Polygon Curve」がポリポリしたカーブでそれ以外が滑らかなカーブといった認識だったのだけど、それ自体は間違いではないのだけどどうもそれだけじゃないことを最近知ったわけです。

どうも「Polygon Curve」はカーブでもありポリゴンでもあるのです。

ポリゴンと言ったらいわゆる「面」のこと。

つまりポリゴンカーブは線でもあり面でもあるんです。

「な、何を言っているのかわからねーと思うが　おれも何をされたのかわからなかった。」
というのは言いすぎですがまぁそんな感じ（？）です。

この辺Houdiniをずっと触きた方々には当たり前の概念なのかもなんだけれど、新入りの自分にはなかなか驚きの発見だったのです。

ポリゴンカーブのコンポーネント構成は？

では実際に確かめてみます。

まずシンプルな四角形のポリゴンを「Grid」SOPで作成。

次にその隣に「Curve」SOPで「Polygon Curve」を、図のように4つのポイントを打って作成します。

この状態で「Close Curve」をオンにして閉じたカーブにします。
今までこの閉じたカーブのことを、単にカーブの始点と終点が繋がったカーブであり「カーブが閉じると中が塗りつぶされるんだな」程度に考えてたわけです。

見た目が同じこの２つのデータの情報を見てみます。


それぞれのノードにカーソルあわせてマウス中押しで開いたウィンドウの内容を見てみます。

２つともコンポーネントの構成は同じです。
（それにしても、Primitve はポリゴンのことなはずなのだけど、「Primitives」と「Polygons」がわざわざそれぞれ記載されている意味は何なのだろう…？）

ポリゴンカーブの挙動を見てみる

ではこれらの挙動を調べてみます。

カーブの始点と終点を切り離す「Ends」SOPを繋ぎ「Close U」を「Open」にして開いたカーブに変更します。
（「merge1」は2つの結果を同時に見るためのもの）

するとグリッドから作成したポリゴンがカーブと同じ挙動を始めます。

ではポリゴンを押し出す「Poly Extrude」SOPを繋いで適当に押し出してみます。
（先ほどの「Ends」SOPは削除しときます）

今度はカーブがポリゴンと同じように押し出されるのがわかります。

この２つは確認したデータも同じなら挙動も同じ。

つまりカーブはそのままシームレスにポリゴンになっているといえます。

この辺の概念を覚えておくと、ポリゴンカーブに対してポリゴン用SOPを使えたり、ポリゴン（primitive）に対してカーブ用SOPを使ったりと、よりコンポーネントをコントロールできるようになるんじゃないでしょうか。
他のツールからHoudiniに移行してかつモデリングもしようと考えてる人には覚えておくと良さそうなHoudiniならではの部分かとおもいます。

最後にこの２つをくっつけて「Fuse」SOPでつなげてみます。

これをいじってみるともうすかっりポリゴンです。

間違いなどありましたらご指摘ください。

[Houdini] 鎖の作成

どうも。こんばんは。
今回は前回作成した鎖のリングをつなげて鎖自体を作成してみたいとおもいます。

前回のリングを作成した記事は「こちら」

全体の流れ

鎖作成の手順は、カーブを作成してそのカーブにそって部品のリングを並べていくという流れ。
完成のノードグラフはこちら。

RingをSubnetに

では前回の続きから開始。
まずグラフをすっきりさせるためリングを構成するノードを1つのノードにまとめます。
ノードをすべて選択した状態でネットワークビュー上部の箱のアイコンをクリック。


単一のノードになるので名前を「Ring」に変更。


このノードは「Subnet」といって複数のノードをひとまとめにしたもの。
これにより複数のノードによる一連の処理を1つのノードとして扱うことができるようになります。
ダブルクリックすることで中に入りそのまとめたノードを確認、編集することが可能。
他にもデジタルアセットとしてどのシーンからも呼び出せるようにできたりします。
この辺の解説はまた別の機会にでも。

カーブの作成

では先程のノードグラフの番号にそってすすめていきます。

①まず部品を並べるカーブを作成します。
SOP階層に「curve」SOP を追加。


そのままビューポート左の「Show Handle」アイコン（下図オレンジ矢印）を押してからビューポートをクリックすることでカーブがビューポートに作成されます。
「Curve」ノードを選択しているのにビューにカーブを描けないということを初心者の僕はよくやるのだけれどそんなときはこの「Show Handle」がオンになっているかチェックするとよいです。
ちなみにその下の磁石アイコン（白矢印）はグリッドへの吸着設定で、オンにしておくと作成されるカーブポイントがグリット上に制限される。

カーブの種類を「NURBS」にして滑らかなカーブに変更。










②次に「Resample」SOP を作成

カーブが細分化されます。

これでリングを配置カーブの準備ができました。

リングの配置と調整

③細分化でできたこのカーブ上のポイントにリングを配置していくわけだけど、この時「Copy to Point」SOPを使ってもいいのだけど「Sweep」SOP を使うと向きの設定が簡単なのでそちらを使用します。
図のように「Ring」を左のインプットに、カーブ（「resample1」）を右のインプットに接続。
カーブの各ポイントにリングが配置されます。

「resample1」の「Length」を調整すると細分化してポイントの間隔を調整することでリングの位置を調整。

そして「sweep1」の「Twist」パラメータを調整してリング同士の角度を調整すれば完成。




最後の２つのパラメータ「Length」と「Twist」等にエクスプレッションを設定することでリングサイズや鎖の長さに合わせたより正確なコントロールもできますが今回は簡単に済ませました。

プロシージャル

これで鎖は完成ですがHoudiniのプロシージャルの凄さを見てみましょう。
カーブを再編集してみても鎖のつながりがしっかり維持されるあたり、完成までの手順の簡単さも相まってなかなかインパクトがあります。

カーブに続けて「Carve」(Curveじゃないよ) SOP をつなぐとこんなことも可能。

他のCGツールではカーブはあまり使わないのだけどHoudiniのカーブはなにかと便利で出番が多いです。

というわけで今回はここまで

[Houdini] 鎖のリングのモデリング

ゲーム分野のCG技術の共有を主な目的としてブログを始めます。
主に Unreal Engine 4, Substance Designer, Houdini 等の情報を共有していきますので、どうぞよろしくおねがいします。

第一回目の話題はHoudini。
今回は簡単なモデルを作成しながらHoudiniでのモデリングのオペレーションを共有したいと思います。

Houdiniのモデリングの特徴

Houdiniではノードをつなぐことでモデル形状を作成していくというモデリングの仕方をします。

このノードのことを「オペレータ」と呼びそれぞれいろんな機能をもっています。それらをつなげて処理を行っていき、その処理の履歴をすべて残していくことで以前行った工程に戻って再編集したりといったノンリニアなワークフローが可能になります。

これによる恩恵は様々ですが、大きな利点として、修正の早さ、データの再利用のしやすさなどをよく耳にします。

修正が早いというのは設計図だけでは完結できないゲーム開発において非常に大きなメリットになります。

モデリングを行うSOPという作業階層

Houdiniでのモデリングは、SOPレベルという作業階層で行います。

新規シーンを開くとobj階層というワークスペースからシーンはスタートしますが、ここではモデリングは行いません。

モデリングを行うにはobj階層で何かしらモデルを作成し、そのモデルをダブルクリックすることでSOPレベルに入る必要があります。

そのSOP階層がいわゆる「モデラー」になります。

今回のモデリングのながれ

では簡単なモデリングを行いながら Houdini での Modeling を紹介します。

例として鎖を構成する１つのリングを作成します。

完成までのノードグラフはこちら。

完成までの流れとしては、リング状のカーブ(下図A)を作成しそのカーブに沿って円(下図B)を押し出すというものになります。


では開始

①まず新規シーンを開く。
ここに円オブジェクトを配置する。
画面上部の「Create」タブから「Circle」アイコンをクリック。

そのままマウスカーソルをビューポートに移動しEnterキーを押す。

これでシーンの原点に円オブジェクトが現れる。

このときワークスペースは自動的にobj階層からSOP階層に移る。

ノードネットワークパネルに「Geometry」という記載があるのがSOP階層にいる目印。
ここが、先程話したモデリングする場所になる。

まず作成した「circle1」のパラメータを以下のとおりに設定。

すると円オブジェクトが半円のラインに変わる。

②次に「mirror」SOP を作成し「circle1」と接続。

「mirror1」のプロパティで「Direction」欄を以下のように設定。3つ目のボックスに1を入力することで反転方向をZに設定している。

さっき作成した半円が「mirror」SOP で反転コピーされる。
このように上から下への処理の流れがHoudiniのモデリングの基本になる。

反転コピーされた状態↓。次の工程でこの２つの半円を連結させます。

③「join」SOP を作成＆接続しプロパティの「Blend」をオフに。

これで２つの半円が連結する。

④さらに「ends」SOP を接続し図の通り設定。

これでリング状のカーブが完成する。

⑤このリングに通す円は今までの処理の流れとは別に作成。
「Circle」SOP を作成しパラメータを設定。

小さな円ができる。

⑥次に「Sweep」SOP を作成し「circle2」を左側のインプットに接続。また「ends1」を真ん中のインプットに接続。

「Sweep」SOPの「Output」タブの Skin Output を Skin with Auto Closure に設定すると出来上がり。

以上、シンプルな形状のモデリング例でした。

ちなみに「circle1」や「circle2」のパラメータを変えることでプロシージャルの一端を見ることができる。


このように後から形状をかえるといったことがより複雑な形状でも可能になるようなのでなかなかHoudiniは興味深い。
自分は目下Houdini勉強中なので勉強しながらその情報を共有していきたいと思います。
どうぞよろしくお願いします。

次回はこのリングをつなげて鎖を作ります。