UE4モバイルでノンゲームコンテンツ
•
4 gefällt mir•6,976 views
2019年7月16日に行われた「UE4モバイル勉強会 in 東京」における遠藤 俊太様（@tonkotsu3656）による講演の資料です。 https://connpass.com/event/137717/ 動画はこちら：https://www.youtube.com/watch?v=luYTZHI0byg
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie UE4モバイルでノンゲームコンテンツ
Ähnlich wie UE4モバイルでノンゲームコンテンツ (20)
Mehr von エピック・ゲームズ・ジャパン Epic Games Japan
Mehr von エピック・ゲームズ・ジャパン Epic Games Japan (20)
UE4モバイルでノンゲームコンテンツ
- 2. フリーランス プログラマー 遠藤 俊太 #UE4Mobile お仕事 ・ゲーム系 ・東映ツークン研究所 @tonkotsu3656
- 5. #UE4Mobile 特に環境構築については、 ネットに情報を上げてくださっている方々や公式ドキュメントもある。（圧倒的感謝） ・Android クイックスタート ・iOS クイックスタート ・【UE4】いろんなパターンのiOSアプリ開発環境を用意してみる - Soramame Games ・【UE4】Blueprint & C++のiOS向けプロジェクトをWindowsで開発する - Soramame Games ・UE4 で Android アプリをビルドするには - FRAME SYNTHESIS
- 7. おしながき #UE4Mobile AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips VR ・SimpleHMD ・Oculus VR ・Google VR Other ・Virtual Camera ・便利プラグイン
- 8. おしながき #UE4Mobile VR ・SimpleHMD ・Oculus VR ・Google VR Other ・Virtual Camera ・便利プラグイン AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips
- 9. #UE4Mobile UE4 対応済み ARプラットフォーム AR ： 概要、クイックスタート Apple ARKit Google ARCore
- 10. #UE4Mobile 対応状況 ARKit 寄り ARCore は対応していない機能がちらほら、ARKit に比べてサンプルが少ない AR ： 概要、クイックスタート Apple ARKit Google ARCore ＞
- 11. #UE4Mobile 何はともあれ、 ”Handheld AR” テンプレートプロジェクトを動かしてみる AR ： 概要、クイックスタート
- 13. #UE4Mobile AR機能を動かすまでの手順 ① AR ： 概要、クイックスタート AR Plugin を有効に
- 14. #UE4Mobile AR機能を動かすまでの手順 ② AR ： 概要、クイックスタート ARSessionConfig 作成
- 15. #UE4Mobile AR機能を動かすまでの手順 ③ AR ： 概要、クイックスタート ARSessionConfig のパラメータ設定
- 16. #UE4Mobile AR機能を動かすまでの手順 ④ AR ： 概要、クイックスタート StartARSession ノードに 手順 ②、③ で作成した ARSessionConfig を指定 ARSession 系のノード ポーズやストップもできます。
- 18. おしながき #UE4Mobile VR ・SimpleHMD ・Oculus VR ・Google VR Other ・Virtual Camera ・便利プラグイン AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips
- 21. #UE4Mobile ARCandidateImage を作成し、テクスチャ登録 AR ： マーカー認識 Friendly Name と 検出したい画像の原寸大を設定（cm）
- 22. #UE4Mobile ARSessionConfig に登録 AR ： マーカー認識
- 25. #UE4Mobile 検出した画像の位置情報取得 AR ： マーカー認識 ARSessionConfig で設定した Friendly Name の取得 やっていること
- 27. #UE4MobileAR ： マーカー認識 認識しやすい画像 Good ・明暗はっきりしている ・解像度が縦横 480px 以上 Bad ・３：１より横長 ・色の均一領域が広い ARKit Good ・明暗はっきりしている ・解像度が縦横 300px 以上 Bad ・特徴点がまばら ・繰り返しが多い ARCore
- 30. #UE4MobileAR ： マーカー認識 ARCore では明確に画像の認識しやすさを判定してくれる 「arcoreimg」 というツールが存在。 ARKit でも判定基準にそこまで差はないはずなので使えるはず。
- 31. #UE4MobileAR ： マーカー認識 ツールのディレクトリ ¥¥UE_[Version]¥Engine¥Plugins¥Runtime¥AR¥Google¥GoogleARCore¥Binaries¥ThirdParty¥Google¥ARCoreImg¥[OS] Windows arcoreimg.exe eval-img --input_image_path=hoge.png MacOS ./arcoreimg eval-img --input_image_path=hoge.jpg コマンドプロンプト、ターミナルから以下のコマンドを実行すると、 0～100 のスコアが表示されます。 ARCore では 75 点以上が望ましいとされている。
- 33. #UE4MobileAR ： マーカー認識 100点 30点 ※ 他意はないです。
- 34. #UE4MobileAR ： マーカー認識 グレースケール化すると 左 の方がコントラストが高いのが分かる
- 35. おしながき #UE4Mobile VR ・SimpleHMD ・Oculus VR ・Google VR Other ・Virtual Camera ・便利プラグイン AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips
- 37. #UE4Mobile 環境マッピング 擬似的な周囲環境の映り込みを再現するテクスチャマッピング手 法の１つ。 反射する質感のオブジェクトに、周りの環境を写り込ませる。 現状 ARKit のみ対応 AR ： 環境マッピングとライティング
- 38. #UE4Mobile Project Settings > iOS > Mobile Desktop Renderer を有効に AR ： 環境マッピングとライティング
- 39. #UE4Mobile ARSessionConfig の Environment Capture Probe Type を Automatic に 環境を受ける範囲を自動検出してくれる AR ： 環境マッピングとライティング
- 40. #UE4Mobile Manual の場合は、影響を受ける範囲を任意で指定 AR ： 環境マッピングとライティング
- 41. #UE4Mobile SkyLight がレベル上に置いてある場合は削除し、 ARSkyLight を配置 AR ： 環境マッピングとライティング
- 42. #UE4Mobile キャプチャーした環境情報を ARSkyLight に渡す AR ： 環境マッピングとライティング トラッキング済みのキューブマップテクスチャが生成され、LightComponent に渡される
- 45. #UE4Mobile GetCurrentLightEstimate で周囲の明るさ情報を取得可能 AR ： 環境マッピングとライティング ARCore の場合はこちらからも取得可能
- 46. #UE4Mobile Directional Light の Intensity と Color に適用 AR ： 環境マッピングとライティング https://youtu.be/jd51zSw1S1c
- 48. おしながき #UE4Mobile VR ・SimpleHMD ・Oculus VR ・Google VR Other ・Virtual Camera ・便利プラグイン AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips
- 49. #UE4MobileAR ： Tips デバイスを移動させても３D空間上でオブジェクトが移動しない場合がある 上記現象が起きた場合は、 Player Controller に紐付いている Pawn に、カメラコンポーネントがぶら下がっていな いのが原因で起きていることが多い カメラコンポーネントが付いていないとカメラの座標は動かない
- 52. #UE4MobileAR ： Tips Passthrough Camera ノードで背面カメラの映像情報を取得し、 オブジェクトに貼り付けることでガベージマットのようなことが実装できる
- 54. #UE4MobileAR ： Tips 板ポリの後ろに円錐を置き、 一定区間を円錐が板ポリと平行の方向に移動するシーンを作りました。 板ポリには Passthrough Camera マテリアルを適用しています。
- 55. #UE4MobileAR ： Tips こんな感じになりました。 （講演用にマテリアルを少し弄って板ポリの場所がわかるように紫色にしています） https://youtu.be/t4u_oODLRxc
- 57. #UE4MobileAR ： Tips CameraW、CameraH にはデバイスの縦横サイズを指定 サイズは GetSupportedARVideoFormats で取得できる
- 58. #UE4MobileAR ： Tips ARKit の各 Passthrough ノードの Texture Type は以下のように設定
- 60. #UE4MobileAR ： Tips ARKit プラグイン内にあるマテリアルを参考にしています。
- 61. #UE4MobileAR ： Tips Face Tracking iPhone の 表情検出機能で顔の動きをトラッキングし、 その動きを Live Link プラグインを介して UE4 で使用できる。 おかずさんがとても分かりやすい記事を上げてくださっていたり、サンプルがあるので 本資料では割愛。 UE4の標準機能とiPhoneXを使って、簡易フェイシャルキャプチャーシステムを実現してみた Facial animation capture using UE4 and iPhone X Face AR Sample
- 62. #UE4MobileAR ： Tips 先日 WWDC 2019 にて ARKit 3 が発表されました。 モーションキャプチャーや人認識機能なども発表され、今後が楽 しみです。
- 63. おしながき #UE4Mobile VR ・SimpleHMD ・Oculus VR ・Google VR Other ・Virtual Camera ・便利プラグイン AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips
- 64. #UE4MobileVR ： SimpleHMD SimpleHMD モバイルデバイスで VR を動かす機能が最低限入っているプラグイン。 手順もほぼプラグインを有効にするだけ。主に Cardboard 向け。
- 65. #UE4MobileVR ： SimpleHMD SimpleHMD プラグインを有効に 他の VR 系のプラグインは無効にします。
- 67. #UE4MobileVR ： SimpleHMD デフォルトの設定では、 VR において不要な UI が表示されている
- 68. #UE4MobileVR ： SimpleHMD Virtual Joystick Project Settings > Input > Mobile > Default Touch Interface クラスを指定無しに
- 69. #UE4MobileVR ： SimpleHMD Navigation Button Project Settings > Android > Enable FullScreen Immersive on KitKat and above devices. 有効に
- 70. #UE4MobileVR ： SimpleHMD VRコンテンツの妨げになるような UI は非表示に
- 71. #UE4MobileVR ： SimpleHMD SimpleHMD プラグインはモバイルですぐに VR を試せる。 VR で最低限動かせる程度の簡易的な VR ビューアー。 動かす端末によってはドリフトなどの問題も起こり、 他の VR プラグインと比べると精度はイマイチな印象。
- 72. おしながき #UE4Mobile VR ・SimpleHMD ・Oculus VR ・Google VR Other ・Virtual Camera ・便利プラグイン AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips
- 73. #UE4MobileVR ： Oculus VR モバイルで Oculus VR モバイルで VR 体験ができる HMD（ヘッドマウントディスプレイ）、GearVR を使用。 GearVR とは、サムスン社とOculus社が共同開発している HMD。 「Galaxy」シリーズでのみ使用可能。 公式ドキュメントにサンプルプロジェクトがある （UE4.17）
- 74. #UE4MobileVR ： Oculus VR Oculus VR プラグインを有効に 他の VR 系のプラグインは無効にします。
- 75. #UE4MobileVR ： Oculus VR Pawn クラスにカメラを追加して、Z座標を現実の身長分高くする。 カメラの設定 トラッキングの原点を目の位置からに
- 76. #UE4MobileVR ： Oculus VR Pawn に Motion Controller Component の追加 モーションコントローラー Gear VR モーションコントローラーのメッシュを追加
- 77. #UE4MobileVR ： Oculus VR HMD のタッチパッドとモーションコントローラーの二種類の入力方法 どちらも自前で実装する必要あるが、公式ドキュメントに手順が記載あり インプット ・モーションコントローラー ・タッチパッド
- 78. おしながき #UE4Mobile VR ・SimpleHMD ・Oculus VR ・Google VR Other ・Virtual Camera ・便利プラグイン AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips
- 79. #UE4MobileVR ： Google VR Google Cardboard と Google Daydream に対応
- 80. #UE4MobileVR ： Google VR Google VR プラグインを有効に 他の VR 系のプラグインは無効にします。
- 81. #UE4MobileVR ： Google VR モーションコントローラー、カメラの実装手順は Oculus VR とほぼ同じ モーションコントローラーは Google VR Motion Controller プラグインを有効にする必要あり
- 82. #UE4MobileVR ： Google VR タッチパッド操作 自前で実装しなければいけない 公式ドキュメントに手順記載あり サンプルプロジェクトもある（UE4.16）
- 83. #UE4MobileVR ： Google VR Project Settings > Rendering > Mobile HDR の項目を無効にします。 VR で立体的に描画するために必要な設定
- 84. #UE4MobileVR ： Google VR 以下の項目を有効に Project Settings > Android > Configure GoogleVR for sustained-performance mode 最大FPSは落ちますが、デバイスの発熱による処理速度の低下がなくなります。
- 85. #UE4MobileVR ： Google VR サポートするデバイスの種類を指定 Project Settings > Android > Configure GoogleVR to support specific hardware configurations
- 86. #UE4MobileVR ： Google VR DOF とは Degrees of freedom（自由度）の略 ３DOF と ６DOF の デバイス がある ※ Depth of field ではない！
- 87. #UE4MobileVR ： Google VR ３DOF ３軸の回転移動 ６DOF ３DOFに加えて、３軸の並行移動
- 88. #UE4MobileVR ： Google VR 対応デバイスの ６．３DOF とは ６DOF のHMD + ３DOF のコントローラー という意味 Daydream View ３．３DOF Mirage Solo ６．３DOF
- 89. おしながき #UE4Mobile VR ・SimpleHMD ・Oculus VR ・Google VR Other ・Virtual Camera ・便利プラグイン AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips
- 90. #UE4MobileOther ： Virtual Camera Virtual Camera ARKit, Vive, LiveLink で 取得したトラッキング情報をリアルタイムでUE4エディタ上のカメラに反映できるプラグイン ARKit ではデバイス上にUE4エディタのプレビュー画面が映り、デバイス側から カメラの焦点位置、フォーカス位置の操作やシーケンサーとして録画することができる。
- 91. #UE4MobileOther ： Virtual Camera https://youtu.be/y0lPeaFX4Vk
- 92. #UE4MobileOther ： Virtual Camera ランチャーからサンプルプロジェクトをダウンロードしてすぐに動かすことができる （ただ、Paragonアセットがハイクオリティなので結構重いシーン。。）
- 93. #UE4MobileOther ： Virtual Camera Virtual Camera を動かすまでの手順（ARKit）
- 94. #UE4MobileOther ： Virtual Camera Virtual Camera 手順 ① プラグインを有効に 再起動時に Remote Session プラグインも有効になっていることを確認します。
- 95. #UE4MobileOther ： Virtual Camera Virtual Camera 手順 ② iOSデバイスで App Store から Unreal Remote 2 アプリをダウンロードします。
- 96. #UE4MobileOther ： Virtual Camera Virtual Camera 手順 ③ あとは UE4エディタ側でプレイし、 Unreal Remote 2 アプリで PC の IP を指定するだけ
- 97. #UE4MobileOther ： Virtual Camera もう少し掘り下げた話
- 98. #UE4MobileOther ： Virtual Camera PC～iOSデバイス間の通信部分は ほぼ Remote Session プラグインの機能が使われている PC側、iOSデバイス側、両方のプロジェクトでお互い何の情報を読み込み、書き込むか チャンネルという単位で指定されている
- 99. #UE4MobileOther ： Virtual Camera DefaultEngine.ini ini ファイルもしくは C++ にてチャンネルの指定ができる C++
- 100. #UE4MobileOther ： Virtual Camera チャンネルの種類 ・Frame Buffer ・Input ・XR Tracking ・AR Camera Virtual Camera での流れ PC iOSデバイス Frame Buffer Input, XR Tracking
- 101. #UE4MobileOther ： Virtual Camera 問題点 現状 AR Camera チャンネルが機能しておらず、iOSデバイス側から PC側に カメラ情報を送ることができない。 Dev-VR ブランチで実装中 UE4.23 では機能が入っているかも？？ AR 周りを担当している Epicスタッフの Joe Graf さんが開発時の動画を公開している https://www.youtube.com/watch?v=wBVmYkLJuok&feature=youtu.be
- 102. おしながき #UE4Mobile VR ・SimpleHMD ・Oculus VR ・Google VR Other ・Virtual Camera ・便利プラグイン AR ・概要、クイックスタート ・マーカー認識 ・環境マッピングとライティング ・Tips
- 104. #UE4MobileOther ： 便利プラグイン Mobile Location Services 位置情報を取得できる
- 105. #UE4MobileOther ： 便利プラグイン 初期化 参照記事 UE4 モバイル用GPSロケーションサービスを使ってみる 位置情報変更時のイベント
- 106. #UE4MobileOther ： 便利プラグイン Optional Mobile Features