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.18でのARKitチュートリアル - UE4勉強会in大阪#3

1,239 views

Published on

#UE4Osaka で行われたARKitのチュートリアルスライド

https://ue4study-osaka.connpass.com/event/70875/

Published in: Technology
  • Be the first to comment

UE4.18でのARKitチュートリアル - UE4勉強会in大阪#3

  1. 1. UE4.18での ARKitチュートリアル 第3回UE4勉強会 in 大阪 #UE4Osaka 1
  2. 2. 自己紹介 • 墨崎達哉(@T_Sumisaki) • フリーランスエンジニア • UnrealEngine4 • Web系、クラウド系 • お絵かき、モデリング他いろいろ • ずんだ担当 #UE4Osaka 2
  3. 3. ARKitについて Introduction #UE4Osaka 3
  4. 4. ARKitについて • 2017年9月20日にiOS11がリリース • 対応端末は3億8100万台であるとも • iOS11に対応し、ARKitが使える端末は以下の通り • iPhone 6s 以降 • iPhone6s、iPhone6s Plus、iPhone SE、iPhone 7、iPhone7 Plus、iPhone8、 iPhone8 Plus、iPhone X • 第5世代 iPad • iPad Pro シリーズ • A9、A10、A11チップセットを搭載している機種に限られます #UE4Osaka 4
  5. 5. ARKitについて • 公式ドキュメント • https://developer.apple.com/arkit/ #UE4Osaka 5
  6. 6. ARCoreについて Introduction #UE4Osaka 6
  7. 7. ARCoreについて • 2017年8月29日にGoogleが発表したARフレームワーク • 「今後数千万台のスマホで利用できるようになる」とのこと • 現在は「初期プレビュー」段階 • 対応端末は非常に少ない • Pixel、Pixel XL、GalaxyS8シリーズが対象 #UE4Osaka 7
  8. 8. ARCoreについて • 公式ドキュメント • https://developers.google.com/ar/ • UnrealEngine向けのドキュメントもありますよ #UE4Osaka 8
  9. 9. Tangoについて • Google ARCoreに統合される見込み • 先進技術の実現よりも普及を優先するため • 非常に高性能なハードウェアを必要とするため、実用性が低い • 将来、ハードウェアの性能が上がった時には戻ってくるかも? #UE4Osaka 9
  10. 10. ARCoreについて • 今回はARCoreについては解説しません • まだプレビューなので… • あと対応端末持ってないので… • でも、公式のサンプルソースにはARCore向けのBlueprintがあるので、 気になる人は触ってみてね #UE4Osaka 10
  11. 11. UnrealEngine4のAR対応状況 Introduction #UE4Osaka 11
  12. 12. UnrealEngine4のAR対応状況 • UE4.18から、Apple ARKit(iOS 11)のサポートが入りました #UE4Osaka 12
  13. 13. UnrealEngine4のAR対応状況 • プラグインはまだBETA Versionですが… • 多分、大丈夫ですよね…? • 「production-ready」って書いてますし… #UE4Osaka 13
  14. 14. UnrealEngine4のAR対応状況 • Google ARCoreはPreview Support #UE4Osaka 14
  15. 15. UnrealEngine4のAR対応状況 • プラグインは入っているので、チャレンジ可能です • 対応端末がなぁ… #UE4Osaka 15
  16. 16. UnrealEngine4のAR対応状況 • リリースノートからサンプルプロジェクトがダウンロードでき ます #UE4Osaka 16
  17. 17. UnrealEngine4のAR対応状況 • ただし、このサンプルはWindowsPCからiOS端末へのデプロイ が出来ません • リモートビルドを要求されます… • とりあえず入れてみたい人はMacを使うか、リモートビルドの設定を するか、Blueprintをまるごと写してみてください • もしかしたらMacで作成したプロジェクトはMacでないと ビルドできないのかも…?? #UE4Osaka 17
  18. 18. 先駆者による参考資料 • ARKit on UE4.18 @sandinist • https://speakerdeck.com/sandinist/arkit-on-ue4-dot-18-dot-0 • 【UE4】WindowsでiOS用アプリをビルドしてみた【ARKit】 @てんちょー (id:shop_0761) • http://shop-0761.hatenablog.com/entry/2017/11/10/142525 #UE4Osaka 18
  19. 19. UE4.18でARアプリを作る main() #UE4Osaka 19
  20. 20. 環境構築 • UnrealEngine4.18.x • 資料作成時点ではUE4.18.1 • (Macのみ)XCode 9.x〜 • ARKit用にビルドするため、必ずXCodeはv9以上で • Apple Developer Programアカウント • 実機ビルドのため、MobileProvisionとCertificateが必要です #UE4Osaka 20
  21. 21. Windowsでは? • WindowsのみでもARKitアプリは作成可能です • ただし、MobileProvisionとCertificateは別途用意してくださいね • Appleにお布施が必要です #UE4Osaka 21
  22. 22. プロジェクト作成 • 今回はUE4.18.1で作成しています iOS端末に限るのであれば MaximumQualityでもOKかと #UE4Osaka 22
  23. 23. プロジェクト設定 • ARKitを使うために、いくつか設定を行います #UE4Osaka 23
  24. 24. ARKit Pluginの有効化 • Argumented Realityカテゴリの「Apple ARKit Plugin」を有効 化しておきます #UE4Osaka 24
  25. 25. Start in ARの有効化 • Project Settingsから、Project>Description>Settingsの 「Start in AR」にチェックを入れます • 忘れちゃダメ、ゼッタイ #UE4Osaka 25
  26. 26. iOSのビルド設定 • Platform>iOS>Renderingの、「Max. Metal Shader Standard To Target」を「Metal v1.2」にしておきます • 変更した場合はエディタの再起動が必要になります #UE4Osaka 26
  27. 27. iOSのビルド設定 • Platform>iOS>OS Infoの「Minimum iOS Version」を「11.0」 に設定します • iOS10以前はARKitに対応していないので切ってよし #UE4Osaka 27
  28. 28. Additional PList Dataの追加 • Platform>iOS>Extra PList Dataの「Additional PList Data」に 以下の内容を追加します • 超重要項目 <key>NSCameraUsageDescription</key> <string>This application will use the camera for AR</string> #UE4Osaka 28
  29. 29. MobileProvisionとCertificateの設定 • Platform>iOS>Mobile ProvisionでProvisionとCertificateを設 定しておきましょう #UE4Osaka 29
  30. 30. その他の設定 • Level、GameModeについては通常のプロジェクトと一緒です #UE4Osaka 30
  31. 31. UE4.17のARKitとの違い • ARCamera描画用マテリアルが不要になりました • UE4.17でのARKitでは、Cameraの画像を投影するためのMaterialを作 成する必要がありましたが、UE4.18からは不要になっています • ARKit Camera Componentがなくなりました • 通常のCamera Componentを利用可能です #UE4Osaka 31
  32. 32. ARPlayerPawnの作成 Pawn Blueprintを新規作成して、「BP_ARPlayerPawn」を作成 します #UE4Osaka 32
  33. 33. ARPlayerPawnの作成 • ARPlayerPawnには、Camera Componentを追加しておきます #UE4Osaka 33
  34. 34. ARPlayerPawnの配置 • 作成したARPlayerPawnをレベル内に配置しましょう 位置は(0.0, 0.0, 0.0) #UE4Osaka 34
  35. 35. ARPlayerPawnの配置 • ここまで実装したものを実機転送すれば、iPad/iPhoneのカメ ラから見た映像をスクリーンに投影している状態が確認できま す • ついでにStaticMeshActorあたりを配置しておけば、AR上でActorの位 置関係が保持されているところが確認できます #UE4Osaka 35
  36. 36. HitTestの実装 • 画面上でタッチした位置からARKitのTrackingSpace内の位置 を取得する関数を作成します #UE4Osaka 36
  37. 37. HitTestの実装 • ARPlayerPawnにFunctionを追加し、以下のノードを組みます 引数はVector2D #UE4Osaka 37
  38. 38. HitTestの実装 • HitTestの出力は以下の通り #UE4Osaka 38
  39. 39. HitTestの実装 • デバッグ用にPrint Stringノードを挟んでおくと良いです #UE4Osaka 39
  40. 40. HitTestの実装 • HitTest用の関数が出来たら、下図のように使用します #UE4Osaka 40
  41. 41. HitTestの実装 • HitTestで取得した情報は、Actorの配置に使用できます #UE4Osaka 41
  42. 42. ここまでがチュートリアル • ここから先は試作アプリを作ったときの知見などが続きます #UE4Osaka 42
  43. 43. ARKitサンプルアプリを作りました • UE4でのARKit開発の調査のために、サンプルアプリを作りま した #UE4Osaka 43
  44. 44. ARゲームを初期化したときの向き • 正面方向がX方向になります Transformをそのまま使うと、 キャラクターの尻を眺める構図に なります #UE4Osaka 44
  45. 45. HitTestで取得できるTransformについて • Transformと言っても取得できるのは位置のみ • Location以外はDefault値… • と思いきや、Yawだけは少し ブレるようです (おそらくキャプチャ画像に 対する補正分) すこし見えづらいですが、 ScaleとPitch、RollはDefault値に なっています #UE4Osaka 45
  46. 46. ARPlayerPawnの位置情報 • ARPlayerPawn自体の位置は端末を動かしても動きません • Editor上で配置した位置から動きません • 位置関係がずれるから当然… #UE4Osaka 46
  47. 47. ARPlayerPawnの位置情報 • Camera ComponentのTransformが端末の動きに合わせて 変わります ARPlayerPawn Camera Comp. #UE4Osaka 47
  48. 48. ARPlayerPawnの位置情報 #UE4Osaka 48
  49. 49. キャラクターにこっち向いてもらいたい • Actorの方向ではなく、Camera Componentの方向へ向いても らえばOKです • 文字通りカメラ目線 #UE4Osaka 49
  50. 50. キャラクターにこっち向いてもらいたい #UE4Osaka 50
  51. 51. 配置したActorに対するアクション • 「GetHitResultUnderFingerByChannel」を使うといい感じに HitResultがとれます #UE4Osaka 51
  52. 52. 配置したActorに対するアクション • ただしわりとアバウトな触り方でもHitするので、正確に取りた い場合はスクリーン座標からWorldSpace座標に変換して、 LineTraceでHitさせたほうが良いかも? #UE4Osaka 52
  53. 53. 配置したActorに対するアクション • ARKitのHitTestとは優先順位をつけて使い分けると良い #UE4Osaka 53 InputTouch Trace ARHitTest ActorInteract SpawnActor True False
  54. 54. その他 • 優秀なWindowsPCをお持ちの人は、WindowsPCで挑戦すると 少しだけ幸せになれます • 初回デプロイ時のシェーダーコンパイルが遅い遅い… • なお、2回目以降はほぼ気になりません #UE4Osaka 54
  55. 55. デモ • 時間があったら… #UE4Osaka 55

×