Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

猫でも分かるUE4を使ったARコンテンツ作り方 初級編 ver 1.0.0

5,484 views

Published on

2017年12月19日に行われた「第2回UE4何でも勉強会 in 東京」で登壇した際に使用した資料です。
https://ue4allstudy.connpass.com/event/72471/

Published in: Engineering
  • Be the first to comment

猫でも分かるUE4を使ったARコンテンツ作り方 初級編 ver 1.0.0

  1. 1. #UE4AllStudy#UE4AllStudy 猫でも分かるUE4を使ったARコンテンツの作り方 Ver 1.0.0 Epic Games Japan 岡田 和也( @pafuhana1213 ) 第2回UE4何でも勉強会 in 東京
  2. 2. #UE4AllStudy 自己紹介 Epic Games Japan サポートエンジニア 岡田 和也 ( おかず@pafuhana1213 )
  3. 3. #UE4AllStudy お品書き • UE4とARKit, ARCoreについて • ARコンテンツを作る手順について(UE4.18) • Tipsと今後入る機能について( UE4.19 )
  4. 4. #UE4AllStudy はじめに UE4はARKit, ARCoreへの対応に 積極的に取り組んでいます!
  5. 5. #UE4AllStudy UE4.18のリリースノートより
  6. 6. #UE4AllStudy UE4とApple ARKit 実際の開発で使用できるレベルでサポート済み! • Appleの発表会でUE4製デモが使用されたという実績 Wingnut AR ( WWDC 2017 ) The Machines( Apple Special Event )
  7. 7. #UE4AllStudy UE4とGoogle ARCore ARCore プレビュー版 をサポート済み • ARCore専用Componentも提供! 正式リリース時期は今の所未定…? (2017/12/19現在)
  8. 8. #UE4AllStudy ARKit, ARCoreの共通する大きな特徴 マーカレス型AR 特殊な追加デバイスが不要 • 一般的なスマートフォンで動作
  9. 9. #UE4AllStudy 一世代前のARブームでは マーカ型ARが主流 • 事前情報( マーカ・立体物など )の登録・準備が必須 ARToolKit Vuforia (Qualcomm)
  10. 10. #UE4AllStudy ARゲームズ Miku Miku Hockey
  11. 11. #UE4AllStudy マーカレス型AR 事前情報の登録・準備を必要としないAR • マーカの代わりに自然特徴点を利用する
  12. 12. #UE4AllStudy 技術自体は前々からあったが… 実用化するには数多くの問題が… • トラッキング処理の計算負荷と 当時のスマホのスペックの問題 • デプスセンサーなどの 特殊なデバイスを必要としていた • などなど PTAM (2007年)
  13. 13. #UE4AllStudy ARKit, ARCoreが最高な理由 その1 誰もが持っている一般的なデバイスで マーカレス型ARを実現している • 潜在的なユーザ数が桁違い • さらに、時間が経つに連れユーザ数が増加
  14. 14. #UE4AllStudy ARKit, ARCoreが最高な理由 その2 プラットフォーマ主導という安心感 • OS・SDKに標準で組み込まれるというのは大きい • Google / Appleパワーによる 急速な技術革新への期待
  15. 15. #UE4AllStudy UE4 + AR やるしかないでしょ!!!!!!
  16. 16. #UE4AllStudy お品書き • UE4とARKit, ARCoreについて • ARコンテンツを作る手順について(UE4.18) • Tipsと今後入る機能について( UE4.19 )
  17. 17. #UE4AllStudy ARコンテンツを作る手順について(UE4.18) • 開発する上で必要なもの • 既存のサンプルについて • 各処理・設定の紹介(実演部分)
  18. 18. #UE4AllStudy 開発する上で必要なもの (ARKitの場合) UE4.18.2 ( 2017/12/19現在 ) A9以降のプロセッサを搭載した iOS11 端末 • iPhone 6s 以降, • iPad(第5世代), iPad Pro
  19. 19. #UE4AllStudy 開発する上で必要なもの (ARKitの場合) BPオンリーで作る場合 • Windows or Mac • Apple Developer Program BP + C++ で作る場合 • Windows ( Macで開発する場合は不要 ) • Mac • Apple Developer Program
  20. 20. #UE4AllStudy もう少し詳しく知りたい人向け [CEDEC+KYUSHU 2017] 最新モバイルゲームの実例からみる UE4のモバイル向け機能・Tipsを全部まるっとご紹介! + UE4.18 モバイル最新情報の紹介 【UE4】WindowsでiOS用アプリをビルドしてみた【ARKit】 • てんちょー(@shop_0761)さんによる BPプロジェクトのiOSビルド手順の解説記事
  21. 21. #UE4AllStudy 開発する上で必要なもの (ARCoreの場合) UE4.18.2 ( 2017/12/19現在 ) ARCore対応端末 • Google Pixel, Pixel XL, Pixel 2, Pixel 2 XL (いずれも日本国内では未発売) • Samsung Galaxy S8, S8+, Note 8
  22. 22. #UE4AllStudy 今年9月のSDC2017における講演にて This winter, ARCore will run on 100M Android devices 今冬、ARCoreは 1億台のAndroid端末上で動作するよ!
  23. 23. #UE4AllStudy 待てないあなた向けに 某ブログの記事 UE4のARCoreサンプルを未サポート端末(ZenFoneAR)で動かす ためにしたこと(2017/9/4) じこせきにんでおねがいします
  24. 24. #UE4AllStudy ARCoreの準備については これで終わりだったはずなのですが…
  25. 25. #UE4AllStudy https://blog.google/products/google-vr/arcore-developer- preview-2/
  26. 26. #UE4AllStudy ARCore Developer Preview2が 12/15に来ました リリースノートより • APIインターフェースは 大幅に改訂され、変更されました • 以前の開発者プレビューの 主要機能はすべて残っていますが、 メソッドと関数の呼び出しは 変更されています
  27. 27. #UE4AllStudy 先行して試したい方向け ARCore公式 Getting Started with Unreal • https://developers.google.com/ar/develop/unreal/getting- started Preview2対応版のUE4.18 (要ビルド) • https://github.com/google-ar-unreal/UnrealEngine Preview2対応版のサンプルプロジェクト • https://github.com/google-ar/arcore-unreal-sdk
  28. 28. #UE4AllStudy Caution!!! ARCore is currently in preview. There might be breaking changes before the 1.0 release.
  29. 29. #UE4AllStudy ARコンテンツを作る手順について(UE4.18) • 開発する上で必要なもの • 既存のサンプルについて • 各処理・設定の紹介(実演部分)
  30. 30. #UE4AllStudy 何故サンプルを先に紹介するのか • AR機能を使うために プロジェクト設定の数項目を変更する必要がある • AR機能に関する公式ドキュメントがまだない (ごめんなさい) 公開されているサンプルを改造するのオススメ!
  31. 31. #UE4AllStudy EpicGamesの公式サンプル UE4.18リリースノートにて配布中 ARKit, ARCore両対応 ARKitの場合、RemoteBuildが必要 ( = Macが必須 )
  32. 32. #UE4AllStudy Tsuyoshi MAEHANA(@sandinist )さんが 公開しているサンプル https://github.com/sandinist/ue4.18.0_arkit_sample 公式サンプルから ARKit に関する処理を移植したサンプル Remote Build不要 (= Windos開発の場合はMac不要)
  33. 33. #UE4AllStudy https://speakerdeck.com/sandinist/arkit-on-ue4-dot-18-dot-0
  34. 34. #UE4AllStudy https://www.slideshare.net/T_Sumisaki/ue418arkit-ue4in3 墨崎達哉(@T_Sumisaki) さん
  35. 35. #UE4AllStudy ARCore公式で配布されているサンプル Getting Started with Unreal UE4のARCore専用のコンポーネントが 使われているサンプル • ARCoreが検出した平面の表示など ARCore Preview1用のサンプル • https://github.com/google-ar/ arcore-unreal-sdk/tree/sdk-preview
  36. 36. #UE4AllStudy ARコンテンツを作る手順について(UE4.18) • 開発する上で必要なもの • 既存のサンプルについて • 各処理・設定の紹介(実演部分)
  37. 37. #UE4AllStudy 実演中
  38. 38. #UE4AllStudy お品書き • UE4とARKit, ARCoreについて • ARコンテンツを作る手順について(UE4.18) • Tipsと今後入る機能について( UE4.19 )
  39. 39. #UE4AllStudy UE4.18から、プロジェクト設定からの Additional Plist Dataの追加が 不要になりました!
  40. 40. #UE4AllStudy UE4.17では 以下の文字列を追加する必要がありました <key>NSCameraUsageDescription</key> <string>This application will use the camera for AR</string>
  41. 41. #UE4AllStudy UE4.18からは Start in ARを有効にするだけでOKに EngineSourcePrograms UnrealBuildToolPlatformIOS UEDeployIOS.cs
  42. 42. #UE4AllStudy キャラクタ / オブジェクトの 影を表示したい!
  43. 43. #UE4AllStudy ARにおける影 ARにおける実在感を増すためには 現実空間に落ちているように見える影 はとても効果的 (「AR 光学的整合性」でググろう!)
  44. 44. #UE4AllStudy Fake Shadowを使う手もあるけど… メリット • 実装が簡単 • 処理負荷が低い • 影無しよりは断然実在感がある デメリット • 低品質 • 動きのあるモデルの場合 嘘がバレやすい Epic公式サンプルの BP_Placeable
  45. 45. #UE4AllStudy ARコンテンツで正確な影を出すためには 現実空間に影が落ちているように見せる為に 床用の平面モデルを用意し、その床に落ちた影だけを描画する (白い箇所は描画しない箇所) カメラから 取得した映像と 合成
  46. 46. #UE4AllStudy 影を落とす床用のマテリアル 影以外の部分を抜く必要があるが、 影とそれ以外の部分を分離する処理は実装が面倒… カメラから取得した画像を床に適用することで、 UE4の描画結果とカメラ画像を合成した後に 影だけ残るようにする
  47. 47. #UE4AllStudy …?
  48. 48. #UE4AllStudy 床のスクリーン座標から カメラ画像を取得・適用 UE4の描画結果と カメラ画像を重ね合わせた状態 グレイマンと マテリアル適用前の床
  49. 49. #UE4AllStudy カメラ画像を床に適用するには ARKit / ARCoreプラグインに含まれる パススルー用のマテリアルを複製し改造する! ARKitCameraMaterial / GoogleARCorePassthroughCameraMaterial コンテンツブラウザの右下
  50. 50. #UE4AllStudy 改造手順 1. Material Domainを PostProcess から Surfaceに 2. ShadingModelを Default Lit から Unlit に 3. TexCorrd[0] ノードを ScreenPosition ノードに置き換え
  51. 51. #UE4AllStudy Unlit(Emissiveのみ) な床に影を落とすには? カメラ画像がライティングの影響を受けないよう 床のマテリアルは Unlitにする必要がある • Unlitの場合、通常のシャドウは落ちなくなってしまう…
  52. 52. #UE4AllStudy 変調シャドウ(Modulated Shadows)を使う! モバイルプラットフォーム用に用意された 低負荷な動的シャドウ • Unlitの場合でもシャドウが落ちる • 影の色を設定可能 ( = 設定する必要がある ) 公式ドキュメント • モバイル プラットフォーム向けのライティング • 変調シャドウの使用方法
  53. 53. #UE4AllStudy 通常の動的シャドウ 変調シャドウ
  54. 54. #UE4AllStudy 変調シャドウを使うためには • MobileHDRを有効に • Directional LightをStationaryに • Directional Lightの Cast Modulated Shadowsを有効に • シャドウを落としたいメッシュの Mobility設定をStatic以外に
  55. 55. #UE4AllStudy 変調シャドウを確認するには • モバイルプレビュー機能を使う • 公式ドキュメントへのリンク • 端末に転送し、実機上で確認
  56. 56. #UE4AllStudy
  57. 57. #UE4AllStudy ARKitの 明るさ推定機能を使いたい!
  58. 58. #UE4AllStudy ARKit / ARCore共に 明るさ推定機能を持ってます ARKit • 公式APIページへのリンク ARCore • 公式APIページへのリンク • Get Latest Light Estimation
  59. 59. #UE4AllStudy ARKitの明るさ推定機能も使いたい!…が FAppleARKitLightEstimateクラスの AmibientIntensity にARKitが推定した値が格納されている • FAppleARKitFrameが持っている LightEstimateがBPに公開されていない… • なので、BPから取得することが現状不可能…
  60. 60. #UE4AllStudy 現状は、以下のようなコードで使用可能 (BPノード化しておくと便利) float UAppleARKitBlueprintLibrary::GetEstimateAmbientIntensity(UObject* WorldContextObject) { FAppleARKitFrame frame; if (GetCurrentFrame(WorldContextObject, frame) && frame.LightEstimate.bIsValid) { return frame.LightEstimate.AmbientIntensity; } return -1.0f; }
  61. 61. #UE4AllStudy 注意:ライトの向きは(現時点では)取得不可 ARKit, ARCore共に カメラ画像から推定した全体の明るさ(float値)しか返さない • SDK側の仕様。今後改善されるかも? • ARKitはFaceTracking時は光源の方向も推定するらしい (未検証)
  62. 62. #UE4AllStudy もし自力でライトの向きを推定したい場合 CEDEC2014にて SIE(当時はSCE) 様が講演した 「PS4ダイナミックライティング」が参考になるかも • 4Gamer.net [CEDEC 2014]現実と仮想の狭間でエンターテイメン トを作る。SCEが語るAR(拡張現実)コンテンツの制作事例
  63. 63. #UE4AllStudy 今後の対応予定について
  64. 64. #UE4AllStudy 今後の対応予定について 以降の内容は 4.19 Preview 0 ぐらいの内容です タイミング的に大きくは変わらないと思いますが、 今後リリースされるものとは少し異なる可能性があります
  65. 65. #UE4AllStudy 先行して試したい方は Masterブランチをどうぞ! (動作保証はありません)
  66. 66. #UE4AllStudy ARSystemクラスの追加
  67. 67. #UE4AllStudy ARSystemクラスの追加 ARKit , ARCoreのラッパークラス • 実装が異なっていた箇所を共通化することで 1つのコードでARKit, ARCore両対応できるように ARSystemの追加に伴い、 AR向けのBP関数ライブラリが強化!
  68. 68. #UE4AllStudy
  69. 69. #UE4AllStudy AR機能のON/OFFが可能に プロジェクト設定の Start in AR が有効でも 強制的にAR機能が有効にならないように Start in AR が有効でも Start ARノードを呼び出さないと AR機能が働かないようになりました
  70. 70. #UE4AllStudy 検出平面へのLineTraceの共通化・簡略化 Line Trace Tracked Objects • 返り値の型: ARTrace Result Structure
  71. 71. #UE4AllStudy 検出した平面のデバッグ表示 • Get All Geometries • Debug Draw Tracked Geometry
  72. 72. #UE4AllStudy 検出した平面と同じ位置・向き・大きさに Planeメッシュ(100 x 100 x 0)を配置する処理
  73. 73. #UE4AllStudy しかし、ARCoreはARSystemに未対応(4.19時点) <The method or operation is not implemented.> ARCore自体がまだプレビューなのが理由 • SDK自体が大きく変わる可能性がある 将来的にはARSystemに組み込まれる • 4.19ではARSystemを経由して ARKit(iOS)でARコンテンツを作成しておけば ARCore正式リリース時の対応は楽に
  74. 74. #UE4AllStudy 4.18 から 4.19 への 移行コストについて
  75. 75. #UE4AllStudy 置き換えるノードは一つだけ! ARKit用の Hit Test~ノード を ARSystemの Line Trace~に置き換え • Hit Test~ノードは4.19でも存在するが、中身の処理が空に (その為、使っていてもエラーが発生しないので注意)
  76. 76. #UE4AllStudy Start ARノードを追加 4.19から Start ARノードを使わないと AR機能が有効になりません • 4.18と同じ挙動にするのなら、Begin Playで使う
  77. 77. #UE4AllStudy 以上! (ARに関しては)移行コストは低いので、 4.18で作業を進めて頂いて問題ありません!
  78. 78. #UE4AllStudy 今回のまとめ
  79. 79. #UE4AllStudy まとめ 製品レベルのARコンテンツを作るための機能は 既に整っている! • 公式サンプルもあるので、シンプルなものなら直ぐ作れる!
  80. 80. #UE4AllStudy まとめ ARにおけるライティングと影の重要性について • 現実環境に近づけるための手法を説明 • 一手間加えるだけで、クオリティが格段に向上するので是非!
  81. 81. #UE4AllStudy まとめ 4.19でARSystemクラスが追加されます • 複数プラットフォーム対応が更に楽に!
  82. 82. #UE4AllStudy 最後に ARブームは定期的に来ては すぐ去っていきました… 今度こそ…今度こそ… 長く続くブームにしていきましょう!!!
  83. 83. #UE4AllStudy 本講演に関する質問はこちらからどうぞ! mail : kaz.okada@epicgames.com Twitter : @pafuhana1213
  84. 84. #UE4AllStudy 付録 – 各SDK公式のベストプラクティス - ARKit • About Augmented Reality and ARKit • https://developer.apple.com/documentation/arkit/about_augmented_rea lity_and_arkit#overview • Human Interface Guidelines • https://developer.apple.com/ios/human-interface- guidelines/technologies/augmented-reality/ ARCore • Best practices for mobile AR design • https://www.blog.google/products/google-vr/best-practices-mobile-ar- design/
  85. 85. #UE4AllStudy 付録 – ARにおける整合性問題 - 幾何学的整合性 • 現実世界との位置合わせ(トラッキング)の精度 • オクルージョン( 仮想/現実 物体の前後関係 )の問題 光学的整合性 • ライティング環境の一致 • 画質の一致 時間的整合性 (リアルタイム性)

×