UE4モバイルでノンゲームコンテンツ【UE4モバイル勉強会 in 東京 2019】

UE4モバイル勉強会 UE4モバイルでノンゲームコンテンツ #UE4Mobile

フリーランス プログラマー 遠藤 俊太 お仕事 ・ゲーム系 ・東映ツークン研究所 @tonkotsu3656 #UE4Mobile

東映ツークン研究所 ホームページ Unreal Fest 2016 映像制作のための"リアルタイム"ワークフロー 求人ページ #UE4Mobile

話す内容 話さない内容 ・モバイル向け機能紹介 ・環境構築 ・実装方法 ・最適化、プロファイル ・映像、建築など分野固有の話 #UE4Mobile

特に環境構築については、 ネットに情報を上げてくださっている方々や公式ドキュメントもある。（圧倒的感謝） ・Android クイックスタート ・iOS クイックスタート ・【UE4】いろんなパターンのiOSアプリ開発環境を用意してみる - Soramame Games ・【UE4】Blueprint & C++のiOS向けプロジェクトをWindowsで開発する - Soramame Games ・UE4 で Android アプリをビルドするには - FRAME SYNTHESIS #UE4Mobile

※ 本資料について ・エディターの言語は英語です。 ・UE4.22がベースになっています。 （一部 4.21 以前の情報もあります） #UE4Mobile

おしながき AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips ・SimpleHMD VR ・Oculus VR ・Google VR ・Virtual Camera Other ・便利プラグイン #UE4Mobile

おしながき AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips ・SimpleHMD VR ・Oculus VR ・Google VR ・Virtual Camera Other ・便利プラグイン #UE4Mobile

UE4 対応済み ARプラットフォーム Apple ARKit AR ： 概要、クイックスタート Google ARCore #UE4Mobile

対応状況 ARKit 寄り ARCore は対応していない機能がちらほら、ARKit に比べてサンプルが少ない Apple ARKit Google ARCore ＞ AR ： 概要、クイックスタート #UE4Mobile

何はともあれ、 ”Handheld AR” テンプレートプロジェクトを動かしてみる AR ： 概要、クイックスタート #UE4Mobile

”Handheld AR” テンプレートからではなく、 別テンプレートや既存プロジェクトでAR機能を動かすまでの手 順 AR ： 概要、クイックスタート #UE4Mobile

AR機能を動かすまでの手順 ① AR Plugin を有効に AR ： 概要、クイックスタート #UE4Mobile

AR機能を動かすまでの手順 ② ARSessionConfig 作成 AR ： 概要、クイックスタート #UE4Mobile

AR機能を動かすまでの手順 ③ ARSessionConfig のパラメータ設定 AR ： 概要、クイックスタート #UE4Mobile

AR機能を動かすまでの手順 ④ StartARSession ノードに 手順 ②、③ で作成した ARSessionConfig を指定 ARSession 系のノード ポーズやストップもできます。 AR ： 概要、クイックスタート #UE4Mobile

これだけで動く！ AR ： 概要、クイックスタート #UE4Mobile

おしながき AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips ・SimpleHMD VR ・Oculus VR ・Google VR ・Virtual Camera Other ・便利プラグイン #UE4Mobile

ARKit、ARCore はマーカーレス型のARプラットフォームですが、 画像検出機能でマーカーを利用することも可能です。 AR ： マーカー認識 #UE4Mobile

検出する画像をUE4のテクスチャアセットとしてインポート AR ： マーカー認識 #UE4Mobile

ARCandidateImage を作成し、テクスチャ登録 Friendly Name と 検出したい画像の原寸大を設定（cm） AR ： マーカー認識 #UE4Mobile

ARSessionConfig に登録 AR ： マーカー認識 #UE4Mobile

動的に追加することも可能 AR ： マーカー認識 #UE4Mobile

検出したものをごにょごにょ https://youtu.be/bZM-r6Ds0Ak AR ： マーカー認識 #UE4Mobile

やっていること 検出した画像の位置情報取得 ARSessionConfig で設定した Friendly Name の取得 AR ： マーカー認識 #UE4Mobile

どんな画像がマーカーに適しているのか AR ： マーカー認識 #UE4Mobile

認識しやすい画像 ARKit ARCore Good Good ・明暗はっきりしている ・解像度が縦横 480px 以上 ・明暗はっきりしている ・解像度が縦横 300px 以上 Bad Bad ・３：１より横長 ・色の均一領域が広い ・特徴点がまばら ・繰り返しが多い AR ： マーカー認識 #UE4Mobile

画像はグレースケールに変換されて検出されるため、 色相ではなく、明度の差（コントラスト）で認識しやすさが変わる。 AR ： マーカー認識 #UE4Mobile

とはいっても、肉眼では判断しにくい。。 AR ： マーカー認識 #UE4Mobile

ARCore では明確に画像の認識しやすさを判定してくれる 「arcoreimg」 というツールが存在。 ARKit でも判定基準にそこまで差はないはずなので使えるはず。 AR ： マーカー認識 #UE4Mobile

ツールのディレクトリ ¥¥UE_[Version]¥Engine¥Plugins¥Runtime¥AR¥Google¥GoogleARCore¥Binaries¥ThirdParty¥Google¥ARCoreImg¥[OS] コマンドプロンプト、ターミナルから以下のコマンドを実行すると、 0～100 のスコアが表示されます。 ARCore では 75 点以上が望ましいとされている。 Windows arcoreimg.exe eval-img --input_image_path=hoge.png MacOS ./arcoreimg eval-img --input_image_path=hoge.jpg AR ： マーカー認識 #UE4Mobile

例えば、 解像度同じ以下の二つの画像のスコアを出してみる AR ： マーカー認識 #UE4Mobile

100点 30点 ※ 他意はないです。 AR ： マーカー認識 #UE4Mobile

グレースケール化すると 左 の方がコントラストが高いのが分かる AR ： マーカー認識 #UE4Mobile

おしながき AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips ・SimpleHMD VR ・Oculus VR ・Google VR ・Virtual Camera Other ・便利プラグイン #UE4Mobile

環境マッピングとライティング AR上のオブジェクトを現実に馴染ませるために、 周りの環境情報をオブジェクトの見た目に反映させる。 AR ： 環境マッピングとライティング #UE4Mobile

環境マッピング 擬似的な周囲環境の映り込みを再現するテクスチャマッピング手 法の１つ。 反射する質感のオブジェクトに、周りの環境を写り込ませる。 現状 ARKit のみ対応 AR ： 環境マッピングとライティング #UE4Mobile

Project Settings > iOS > Mobile Desktop Renderer を有効に AR ： 環境マッピングとライティング #UE4Mobile

ARSessionConfig の Environment Capture Probe Type を Automatic に 環境を受ける範囲を自動検出してくれる AR ： 環境マッピングとライティング #UE4Mobile

Manual の場合は、影響を受ける範囲を任意で指定 AR ： 環境マッピングとライティング #UE4Mobile

SkyLight がレベル上に置いてある場合は削除し、 ARSkyLight を配置 AR ： 環境マッピングとライティング #UE4Mobile

キャプチャーした環境情報を ARSkyLight に渡す トラッキング済みのキューブマップテクスチャが生成され、LightComponent に渡される AR ： 環境マッピングとライティング #UE4Mobile

こんな感じ ワールド（レベル）上に配置されている他のアクターも映り込む。 カメラ情報を元に生成している。カメラに映っていないもの（撮影デバイスなど）は映り込まない。 AR ： 環境マッピングとライティング #UE4Mobile

ライティング 画面全体の明るさを、 AR空間上のオブジェクトの見た目に反映させる。 AR ： 環境マッピングとライティング #UE4Mobile

GetCurrentLightEstimate で周囲の明るさ情報を取得可能 ARCore の場合はこちらからも取得可能 AR ： 環境マッピングとライティング #UE4Mobile

Directional Light の Intensity と Color に適用 https://youtu.be/jd51zSw1S1c AR ： 環境マッピングとライティング #UE4Mobile

周囲の明るさを単一の数値としてしか取得できないため、 光源の場所などは特定できない。 現状は画面全体の明暗のみ取得可能 AR ： 環境マッピングとライティング #UE4Mobile

おしながき AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips ・SimpleHMD VR ・Oculus VR ・Google VR ・Virtual Camera Other ・便利プラグイン #UE4Mobile

デバイスを移動させても３D空間上でオブジェクトが移動しない場合がある 上記現象が起きた場合は、 Player Controller に紐付いている Pawn に、カメラコンポーネントがぶら下がっていな いのが原因で起きていることが多い カメラコンポーネントが付いていないとカメラの座標は動かない AR ： Tips #UE4Mobile

トラッキング情報のデバッグ表示 AR ： Tips #UE4Mobile

トラッキングした特徴点の取得 https://youtu.be/-TXFqtnPUqw AR ： Tips #UE4Mobile

Passthrough Camera ノードで背面カメラの映像情報を取得し、 オブジェクトに貼り付けることでガベージマットのようなことが実装できる AR ： Tips #UE4Mobile

マテリアルをごにょごにょ組みます。 デバイスの画面比率に合わせたカメラ情報を作っています。 AR ： Tips #UE4Mobile

板ポリの後ろに円錐を置き、 一定区間を円錐が板ポリと平行の方向に移動するシーンを作りました。 板ポリには Passthrough Camera マテリアルを適用しています。 AR ： Tips #UE4Mobile

こんな感じになりました。 （講演用にマテリアルを少し弄って板ポリの場所がわかるように紫色にしています） https://youtu.be/t4u_oODLRxc AR ： Tips #UE4Mobile

マテリアルの補足 AR ： Tips #UE4Mobile

CameraW、CameraH にはデバイスの縦横サイズを指定 サイズは GetSupportedARVideoFormats で取得できる AR ： Tips #UE4Mobile

ARKit の各 Passthrough ノードの Texture Type は以下のように設定 AR ： Tips #UE4Mobile

各カスタムノードのシェーダーコードは以下のように書く AR ： Tips #UE4Mobile

ARKit プラグイン内にあるマテリアルを参考にしています。 AR ： Tips #UE4Mobile

Face Tracking iPhone の 表情検出機能で顔の動きをトラッキングし、 その動きを Live Link プラグインを介して UE4 で使用できる。 おかずさんがとても分かりやすい記事を上げてくださっていたり、サンプルがあるので 本資料では割愛。 UE4の標準機能とiPhoneXを使って、簡易フェイシャルキャプチャーシステムを実現してみた Facial animation capture using UE4 and iPhone X Face AR Sample AR ： Tips #UE4Mobile

先日 WWDC 2019 にて ARKit 3 が発表されました。 モーションキャプチャーや人認識機能なども発表され、今後が楽 しみです。 AR ： Tips #UE4Mobile

おしながき AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips ・SimpleHMD VR ・Oculus VR ・Google VR ・Virtual Camera Other ・便利プラグイン #UE4Mobile

SimpleHMD モバイルデバイスで VR を動かす機能が最低限入っているプラグイン。 手順もほぼプラグインを有効にするだけ。主に Cardboard 向け。 VR ： SimpleHMD #UE4Mobile

SimpleHMD プラグインを有効に 他の VR 系のプラグインは無効にします。 VR ： SimpleHMD #UE4Mobile

これだけで動きます VR ： SimpleHMD #UE4Mobile

デフォルトの設定では、 VR において不要な UI が表示されている VR ： SimpleHMD #UE4Mobile

Virtual Joystick Project Settings > Input > Mobile > Default Touch Interface クラスを指定無しに VR ： SimpleHMD #UE4Mobile

Navigation Button Project Settings > Android > Enable FullScreen Immersive on KitKat and above devices. 有効に VR ： SimpleHMD #UE4Mobile

VRコンテンツの妨げになるような UI は非表示に VR ： SimpleHMD #UE4Mobile

SimpleHMD プラグインはモバイルですぐに VR を試せる。 VR で最低限動かせる程度の簡易的な VR ビューアー。 動かす端末によってはドリフトなどの問題も起こり、 他の VR プラグインと比べると精度はイマイチな印象。 VR ： SimpleHMD #UE4Mobile

おしながき AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips ・SimpleHMD VR ・Oculus VR ・Google VR ・Virtual Camera Other ・便利プラグイン #UE4Mobile

モバイルで Oculus VR モバイルで VR 体験ができる HMD（ヘッドマウントディスプレイ）、GearVR を使用。 GearVR とは、サムスン社とOculus社が共同開発している HMD。 「Galaxy」シリーズでのみ使用可能。 公式ドキュメントにサンプルプロジェクトがある （UE4.17） VR ： Oculus VR #UE4Mobile

Oculus VR プラグインを有効に 他の VR 系のプラグインは無効にします。 VR ： Oculus VR #UE4Mobile

カメラの設定 Pawn クラスにカメラを追加して、Z座標を現実の身長分高くする。 トラッキングの原点を目の位置からに VR ： Oculus VR #UE4Mobile

モーションコントローラー Pawn に Motion Controller Component の追加 Gear VR モーションコントローラーのメッシュを追加 VR ： Oculus VR #UE4Mobile

インプット HMD のタッチパッドとモーションコントローラーの二種類の入力方法 どちらも自前で実装する必要あるが、公式ドキュメントに手順が記載あり ・モーションコントローラー ・タッチパッド VR ： Oculus VR #UE4Mobile

おしながき AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips ・SimpleHMD VR ・Oculus VR ・Google VR ・Virtual Camera Other ・便利プラグイン #UE4Mobile

Google Cardboard と Google Daydream に対応 VR ： Google VR #UE4Mobile

Google VR プラグインを有効に 他の VR 系のプラグインは無効にします。 VR ： Google VR #UE4Mobile

モーションコントローラー、カメラの実装手順は Oculus VR とほぼ同じ モーションコントローラーは Google VR Motion Controller プラグインを有効にする必要あり VR ： Google VR #UE4Mobile

タッチパッド操作 自前で実装しなければいけない 公式ドキュメントに手順記載あり サンプルプロジェクトもある（UE4.16） VR ： Google VR #UE4Mobile

Project Settings > Rendering > Mobile HDR の項目を無効にします。 VR で立体的に描画するために必要な設定 VR ： Google VR #UE4Mobile

以下の項目を有効に Project Settings > Android > Configure GoogleVR for sustained-performance mode 最大FPSは落ちますが、デバイスの発熱による処理速度の低下がなくなります。 VR ： Google VR #UE4Mobile

サポートするデバイスの種類を指定 Project Settings > Android > Configure GoogleVR to support specific hardware configurations VR ： Google VR #UE4Mobile

DOF とは Degrees of freedom（自由度）の略 ３DOF と ６DOF の デバイス がある ※ Depth of field ではない！ VR ： Google VR #UE4Mobile

VR ： Google VR ３DOF ６DOF ３軸の回転移動 ３DOFに加えて、３軸の並行移動 #UE4Mobile

対応デバイスの ６．３DOF とは ６DOF のHMD + ３DOF のコントローラー という意味 Daydream View Mirage Solo ３．３DOF ６．３DOF VR ： Google VR #UE4Mobile

おしながき AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips ・SimpleHMD VR ・Oculus VR ・Google VR ・Virtual Camera Other ・便利プラグイン #UE4Mobile

Virtual Camera ARKit, Vive, LiveLink で 取得したトラッキング情報をリアルタイムでUE4エディタ上のカメラに反映できるプラグイン ARKit ではデバイス上にUE4エディタのプレビュー画面が映り、デバイス側から カメラの焦点位置、フォーカス位置の操作やシーケンサーとして録画することができる。 Other ： Virtual Camera #UE4Mobile

https://youtu.be/y0lPeaFX4Vk Other ： Virtual Camera #UE4Mobile

ランチャーからサンプルプロジェクトをダウンロードしてすぐに動かすことができる （ただ、Paragonアセットがハイクオリティなので結構重いシーン。。） Other ： Virtual Camera #UE4Mobile

Virtual Camera を動かすまでの手順（ARKit） Other ： Virtual Camera #UE4Mobile

Virtual Camera 手順 ① プラグインを有効に 再起動時に Remote Session プラグインも有効になっていることを確認します。 Other ： Virtual Camera #UE4Mobile

Virtual Camera 手順 ② iOSデバイスで App Store から Unreal Remote 2 アプリをダウンロードします。 Other ： Virtual Camera #UE4Mobile

Virtual Camera 手順 ③ あとは UE4エディタ側でプレイし、 Unreal Remote 2 アプリで PC の IP を指定するだけ Other ： Virtual Camera #UE4Mobile

もう少し掘り下げた話 Other ： Virtual Camera #UE4Mobile

PC～iOSデバイス間の通信部分は ほぼ Remote Session プラグインの機能が使われている PC側、iOSデバイス側、両方のプロジェクトでお互い何の情報を読み込み、書き込むか チャンネルという単位で指定されている Other ： Virtual Camera #UE4Mobile

ini ファイルもしくは C++ にてチャンネルの指定ができる DefaultEngine.ini C++ Other ： Virtual Camera #UE4Mobile

チャンネルの種類 ・Frame Buffer ・Input ・XR Tracking ・AR Camera Virtual Camera での流れ Frame Buffer PC iOSデバイス Input, XR Tracking Other ： Virtual Camera #UE4Mobile

問題点 現状 AR Camera チャンネルが機能しておらず、iOSデバイス側から PC側に カメラ情報を送ることができない。 Dev-VR ブランチで実装中 UE4.23 では機能が入っているかも？？ AR 周りを担当している Epicスタッフの Joe Graf さんが開発時の動画を公開している https://www.youtube.com/watch?v=wBVmYkLJuok&feature=youtu.be Other ： Virtual Camera #UE4Mobile

おしながき AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips ・SimpleHMD VR ・Oculus VR ・Google VR ・Virtual Camera Other ・便利プラグイン #UE4Mobile

ブループリントで実装できるモバイル向けプラグインを さらっと紹介 Other ： 便利プラグイン #UE4Mobile

Mobile Location Services 位置情報を取得できる Other ： 便利プラグイン #UE4Mobile

初期化 位置情報変更時のイベント 参照記事 UE4 モバイル用GPSロケーションサービスを使ってみる Other ： 便利プラグイン #UE4Mobile

Optional Mobile Features Other ： 便利プラグイン #UE4Mobile

デバイス情報の取得ができる Other ： 便利プラグイン #UE4Mobile

ご清聴ありがとうございました！ #UE4Mobile