茶ポーン

ゲーム作りめも。VR幻想郷いきたい。

UE4+LeapmotionのImage情報をマテリアルで使うまで

時間と体力と社会の荒波の間をフヨフヨしてて、試してから少し時間開いてしまったのですが、..('_'=
LepamotionからのImage情報を使って少し遊んでみた感じのメモになります。




f:id:toorsoo:20141221224813p:plain
トレース…オン!
こういうのも何のコードも一切かかずに出来ちゃいます。すごい時代だ…(困惑)


というわけで、Image情報使う時の参考になれば幸いであります。



UE4でLeapmotionを使うにあたって、引き続きこちらのプラグインを使用させて頂いてます!感謝!
[Plugin] Leap Motion - Event Driven

使用したバージョンはそれぞれ
UE4: UE4.6.1
Plugin: Latest - 0.8.2 (UE4.6, Leap SDK 2.2)
になります。

LeapmotionからImage情報を取得する

まずはImageの取得方法です!
LeapControllerコンポーネントからTexture情報を取得したいと思います。


手順はこんな感じです。
Image情報を有効にするノードを呼び出す。
LeapControllerコンポーネントからTexture情報を引っ張ってくる

具体的な処理はこちらのブループリントをどうぞ!↓

Image情報を有効にするノードを呼び出す。

f:id:toorsoo:20141221224453p:plain

EnableImageSupport ノードでImage情報の使用を有効にします。
CostructionScript、BeginEventアクションなど、
任意のタイミングでこちらのノードを呼び出します。

LeapControllerコンポーネントからTexture情報を引っ張ってくる

f:id:toorsoo:20141221222646p:plain
LeapControllerからTexture情報取得までの流れ

LeapController -> Frame -> Images -> Image -> Texture で取得できます。

何度かImage情報の取得失敗?(存在しないインデックスの配列参照)で落ちる事があったので、
NULLチェックはあった方がいいかもしれないです!
f:id:toorsoo:20141222002006p:plain



f:id:toorsoo:20141221233536p:plain:w200
これでこういったモノクロのImage情報が取得できます。
ここまで綺麗なモノクロTexture…、マテリアルで色々遊べちゃいそうですね。
なのでマテリアルに渡してみたいと思います!

LeapのImage情報Textureをマテリアルに渡す

マテリアルインスタンスを使ってTexture情報をマテリアルに投げるまでの流れになります。
ざっくりな手順としては

  1. Leapmotionのイメージを反映させるマテリアルを作成
  2. 動的にTextureを更新するためのマテリアルインスタンスを作成
  3. マテリアルインスタンスにLeapからのTextureを反映

といった感じになります。

まずはマテリアルの作成からやってみます!

Leapmotionのイメージを反映させるマテリアルを作成

まずはこういった↓手だけを抽出したようなものを作ってみます。
f:id:toorsoo:20141221234958p:plain

手の抽出にはMaterialのBlendMode、Maskedを使い、
オパシティマスク値にLeapのImage情報を適応させる事で、一定以上の明るさがある部分のみを表示させています。

f:id:toorsoo:20141221234102p:plain
テクスチャのパラメータを追加し、オパシティマスクに繋ぎました。
(上で設定しているテクスチャそのものは仮のものです。)
このテクスチャパラメータにLeapmotionのImage情報を渡していくことになります。

このマテリアルを元にして、
次はテクスチャパラメータ更新用のマテリアルインスタンスを作成します。

マテリアルインスタンスを作成

マテリアルインスタンス…?
Unreal Engine | インスタンス化マテリアル

> アンリアル エンジン 4 では、 2 種類のマテリアル インスタンスを利用できます。
> Material Instance Constant - 実行前にのみ計算されます。
> Material Instance Dynamic - 実行時の計算 (編集も) が可能です。

こちらのMaterial Instance Dynamicを使い、さきほど設定したテクスチャパラメータの値をLeapmotionのImage情報に更新をかけると言った流れです!

f:id:toorsoo:20141222004422p:plain
マテリアルとコンテンツブラウザ上から右クリックでマテリアルインスタンスを作成します。
パラメータグループに先ほどマテリアル側で設定したテクスチャパラメータが表示されるので、
チェックボックスにチェックを入れます。

マテリアルインスタンスにLeapからのTextureを反映

次はブループリントで作成したマテリアルインスタンス経由でマテリアルへとTexture情報を更新する処理です。


f:id:toorsoo:20141222005248p:plain
まずはMaterialInstanceDynamicの変数を追加します。


f:id:toorsoo:20141222005329p:plain
次にCreate Dynamic Material Instance ノードで追加したMaterialInstanceDynamicの変数にインスタンス化した値を入れます。
Parentには先ほど作成したマテリアルインスタンスを指定します!


f:id:toorsoo:20141222010454p:plain
あとは Set Texture Parameter Value ノードを使い、毎フレームマテリアルインスタンスのテクスチャ情報を更新してやります。


これでマテリアルにLeapmotionのImage情報は渡せました!


あとは適当にカメラの前に板ポリを置いたりして……
f:id:toorsoo:20141222010852p:plain


置いた板ポリのマテリアルをさっきのマテリアルインスタンスに変更したりすると、
↑のような手だけ抽出されたようなImageが表示されます!
f:id:toorsoo:20141222011107p:plain



余談ですがこんな遊び方もできちゃうっぽいです。きれい。

UE4+LeapMotion+image - YouTube



トレース……オンッッッ!!!!(3回目)

Fate最高ですFateもうエフェクトとか背景とか毎週ため息出るくらいのクオリティでもう最(略



色々マテリアルで遊ぶと冒頭のこんな感じのものもできます!!

f:id:toorsoo:20141222012426p:plain
f:id:toorsoo:20141222012447p:plain


上でやってる事はかなり単純で、適当な基盤のテクスチャで更にマスクをかけて、
エミッシブに強めの色を指定してる感じです。
Fate見終えてテンション上がって勢いだけで作っただけとは言えない……


というわけでLeapmotionのImage情報をマテリアルで使用するまでの流れでした!




UE4Study(#3)とAdventCalendarの記事のおかげで最近マテリアルで色々出来るようになって来た!
スゴイありがたい……('ω` )