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

追記(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 · Nutty Niche Needs / N3

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

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

こんなブログに来る人ならご存じの方が多いかと思いますが、
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に
幾つかコードを追加していきます。
追加するコードに関しては…配布サイトに全部載っています！
A new, community-hosted Unreal Engine Wiki - Announcements - Epic Developer Community Forums
（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の章）

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

まずは、テクスチャをパラメータ化したマテリアルを作ります。

次に、「WebcamReader」を継承したBPを新規作成します。

そのBP内で、以下のリンクで紹介されているノードを組みます。
やってることは、マテリアルにWebカメラから取得した画像テクスチャを渡しているだけです。
A new, community-hosted Unreal Engine Wiki - Announcements - Epic Developer Community Forums

最後に、Webcam用のパラメータを設定するだけです。

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

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

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

おまけ

FaceRigはバーチャルなWebCamドライバがインストールされるので
Unity内でWebCamTextureとして表示してゲームパッド連動システム動いてます。グリーンバックにすればクロマキーで合成して実況放送出来ます。 pic.twitter.com/JtHcL8ueZB
— GOROman (@GOROman) 2016年1月4日