ぼっちプログラマのメモ

UE4とかUE5とかについて書いたり書かなかったり。

UE4上でFaceRig(+Live2D)を動かして…みた…?

f:id:pafuhana1213:20160105210341j:plain

追記(2018/6/19)

この記事を書いた当時はOpen CVで使用するしかまともな方法がありませんでしたが、UE4.19以降では公式にサポートされたカメラ画像の取得機能を使用することを推奨します。以下の記事にて丁寧にまとめられていますので、こんなクソ記事は早く閉じてこちらの神記事を見ましょう!
qiita.com

はじめに

先日話題になった↓、Unityで動いているんですよね…
www.moguravr.com

…なら、UE4でもやるしかないじゃない!!!

ということで、
FaceRig(+Live2D)をUE4上で動かしてみました!

youtu.be

…はい、フェイクです。
UE4自体をFaceRigに対応させたのではなく、
OpenCVを使ってFaceRigの画面をUE4上に持ってきています。

ということで、以降はその解説。

解説

FaceRigの画面、というよりもデスクトップ画面をUE4上で表示できれば、
目標である「FaceRigの画面をUE4上に持ってくる」を実現できます。

デスクトップのキャプチャ部分は、今回は「SCFH DSF」というソフトを使いました。
SCFH DSF - YP4G Wiki

超ざっくり解説すると、デスクトップ上の指定範囲や指定ウィンドウを
Webカメラからの取得した映像っぽく扱うことができるソフトです。
このソフトを経由して、UE4にデスクトップ画面を渡してやります。


次にすべき事は、「SCFH DSF」から送られる映像を
UE4側で受け取る必要があります。が、現在のUE4にはその機能はありません…
なので、以下のサイトで公開されているOpenCVプラグインUE4に導入します。
Integrating OpenCV Into Unreal Engine 4 - Epic Wiki


こんなブログに来る人ならご存じの方が多いかと思いますが、
OpenCVは画像処理用のライブラリであり
Webカメラからの画像入力周りの機能を持っています。
その機能を使って、「SCFH DSF」からの映像を受け取ります。

これで、UE4上でFaceRigが動いているように見せることができます!

OpenCVプラグインについて

UE4へのOpenCVの導入は簡単です。プラグインで配布されているので、
UE4プロジェクトに幾つかのファイルを配置したり、OpenCV用のC++コードを幾つかコピペで作るだけです。

ただし、現在はUE4.9用しか配布されていません。それ以外のバージョンで扱いたい場合は、
配布サイトで解説されている手順を踏む必要があります。
今回は解説しないので、頑張って英語読んでね!(そんな複雑な手順ではなかったりする…)

プラグインファイルの配置

まずは、配布サイトからファイルをダウンロードします。

I have created a plugin that does all the OpenCV library linking, which can be downloaded here.

そして、その中にあるフォルダ(Binaries, Plugins, ThirdParty)を、
OpenCVを使用したいUE4プロジェクト(C++)のuprojectファイルと
同じ場所に配置します。

~Build.csの編集

次に、Source/(Project名)フォルダにある、(プロジェクト名).Build.csに
幾つかコードを追加していきます。
追加するコードに関しては…配布サイトに全部載っています!
Integrating OpenCV Into Unreal Engine 4 - Epic Wiki
(Adding OpenCV Dependenciesの項)

これで、UE4上でOpenCVの機能を扱う準備が整いました。
次は、UE4上でWebカメラからの映像を取得する処理の実装です。

ウェブカメラからの映像取得用コードの追加

これまた、配布サイトにコードが丸ほど載っています。
(Adding OpenCV Dependenciesの章)

ただ一点だけ注意が必要です。
Headerのコンストラクタの部分、プロジェクト名に応じて書き換える必要があります。

UCLASS()
class YOURPROJECT_API AWebcamReader : public AActor
{
GENERATED_BODY()
...

これでC++コード側の準備は完了です。

取得したWebカメラ映像をマテリアルに反映

最後に、「SCFH DSF」→「OpenCV」経由で取得した画像を
テクスチャとして取得し、UE4上に出す必要があります。

…これまた、配布サイトに手順が丸ほど載っています!
なんなの?神なの!?
(Moving to Blueprintsの章)

少し長めの英語ですが、やってることは簡単です。

まずは、テクスチャをパラメータ化したマテリアルを作ります。
f:id:pafuhana1213:20160105212407p:plain

次に、「WebcamReader」を継承したBPを新規作成します。
f:id:pafuhana1213:20160105212459p:plain

そのBP内で、以下のリンクで紹介されているノードを組みます。
やってることは、マテリアルにWebカメラから取得した画像テクスチャを渡しているだけです。
File:WebcamBillboard event graph.png - Epic Wiki

最後に、Webcam用のパラメータを設定するだけです。
f:id:pafuhana1213:20160105212653p:plain

Camera IDは環境によって変わってくるので、色々と値を変えて試して下さい。


これでUE4上での準備は全て完了です。
あとは、UE4を実行した後に「SCFH DSF」を起動し、
リストにある「UE4Editor.exe」をクリックするだけです。
(ない場合は、CameraIDを変えてみてください)


これで、デスクトップ画面をUE4上に出すことができました!
FaceRigだろうが、ブラウザだろうが、◯◯◯だろうが、出したい放題です!
個人的には、VRと組み合わせたら中々面白いんじゃないかな~と
思っていたりします!(VR脳)
(UE4のWeb Browserウィジェットだと、機能に制限がありますし)

おまけ

FaceRigはバーチャルなWebCamドライバがインストールされるので

HAHAHA、そんなバカな…(CameraIDを切り替えてみる)
f:id:pafuhana1213:20160105214539j:plain

…SCFH DSFいらないじゃん!!!
(まあ、先ほど挙げたことをしたいのなら、デスクトップキャプチャは必要だしね…!?
 無駄じゃなかったよね…!  (´・ω:;.:...)