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

1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

ツールのディレクトリ ¥¥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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

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

48.

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

49.

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

50.

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

51.

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

52.

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

53.

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

54.

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

55.

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

56.

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

57.

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

58.

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

59.

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

60.

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

61.

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

62.

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

63.

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

64.

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

65.

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

66.

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

67.

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

68.

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

69.

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

70.

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

71.

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

72.

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

73.

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

74.

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

75.

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

76.

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

77.

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

78.

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

79.

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

80.

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

81.

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

82.

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

83.

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

84.

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

85.

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

86.

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

87.

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

88.

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

89.

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

90.

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

91.

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

92.

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

93.

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

94.

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

95.

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

96.

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

97.

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

98.

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

99.

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

100.

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

101.

問題点現状 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

102.

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

103.

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

104.

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

105.

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

106.

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

107.

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