#UE4Osaka で行われたARKitのチュートリアルスライド https://ue4study-osaka.connpass.com/event/70875/

1. UE4.18での
ARKitチュートリアル
第３回UE4勉強会 in 大阪
#UE4Osaka 1

2. 自己紹介
• 墨崎達哉（@T_Sumisaki）
• フリーランスエンジニア
• UnrealEngine4
• Web系、クラウド系
• お絵かき、モデリング他いろいろ
• ずんだ担当
#UE4Osaka 2

3. ARKitについて
Introduction
#UE4Osaka 3

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
• 第５世代 iPad
• iPad Pro シリーズ
• A9、A10、A11チップセットを搭載している機種に限られます
#UE4Osaka 4

5. ARKitについて
• 公式ドキュメント
• https://developer.apple.com/arkit/
#UE4Osaka 5

6. ARCoreについて
Introduction
#UE4Osaka 6

7. ARCoreについて
• 2017年8月29日にGoogleが発表したARフレームワーク
• 「今後数千万台のスマホで利用できるようになる」とのこと
• 現在は「初期プレビュー」段階
• 対応端末は非常に少ない
• Pixel、Pixel XL、GalaxyS8シリーズが対象
#UE4Osaka 7

8. ARCoreについて
• 公式ドキュメント
• https://developers.google.com/ar/
• UnrealEngine向けのドキュメントもありますよ
#UE4Osaka 8

9. Tangoについて
• Google ARCoreに統合される見込み
• 先進技術の実現よりも普及を優先するため
• 非常に高性能なハードウェアを必要とするため、実用性が低い
• 将来、ハードウェアの性能が上がった時には戻ってくるかも？
#UE4Osaka 9

10. ARCoreについて
• 今回はARCoreについては解説しません
• まだプレビューなので…
• あと対応端末持ってないので…
• でも、公式のサンプルソースにはARCore向けのBlueprintがあるので、
気になる人は触ってみてね
#UE4Osaka 10

11. UnrealEngine4のAR対応状況
Introduction
#UE4Osaka 11

12. UnrealEngine4のAR対応状況
• UE4.18から、Apple ARKit（iOS 11）のサポートが入りました
#UE4Osaka 12

13. UnrealEngine4のAR対応状況
• プラグインはまだBETA Versionですが…
• 多分、大丈夫ですよね…？
• 「production-ready」って書いてますし…
#UE4Osaka 13

14. UnrealEngine4のAR対応状況
• Google ARCoreはPreview Support
#UE4Osaka 14

15. UnrealEngine4のAR対応状況
• プラグインは入っているので、チャレンジ可能です
• 対応端末がなぁ…
#UE4Osaka 15

16. UnrealEngine4のAR対応状況
• リリースノートからサンプルプロジェクトがダウンロードでき
ます
#UE4Osaka 16

17. UnrealEngine4のAR対応状況
• ただし、このサンプルはWindowsPCからiOS端末へのデプロイ
が出来ません
• リモートビルドを要求されます…
• とりあえず入れてみたい人はMacを使うか、リモートビルドの設定を
するか、Blueprintをまるごと写してみてください
• もしかしたらMacで作成したプロジェクトはMacでないと
ビルドできないのかも…？？
#UE4Osaka 17

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. UE4.18でARアプリを作る
main()
#UE4Osaka 19

20. 環境構築
• UnrealEngine4.18.x
• 資料作成時点ではUE4.18.1
• （Macのみ）XCode 9.x〜
• ARKit用にビルドするため、必ずXCodeはv9以上で
• Apple Developer Programアカウント
• 実機ビルドのため、MobileProvisionとCertificateが必要です
#UE4Osaka 20

21. Windowsでは？
• WindowsのみでもARKitアプリは作成可能です
• ただし、MobileProvisionとCertificateは別途用意してくださいね
• Appleにお布施が必要です
#UE4Osaka 21

22. プロジェクト作成
• 今回はUE4.18.1で作成しています
iOS端末に限るのであれば
MaximumQualityでもOKかと
#UE4Osaka 22

23. プロジェクト設定
• ARKitを使うために、いくつか設定を行います
#UE4Osaka 23

24. ARKit Pluginの有効化
• Argumented Realityカテゴリの「Apple ARKit Plugin」を有効
化しておきます
#UE4Osaka 24

25. Start in ARの有効化
• Project Settingsから、Project>Description>Settingsの
「Start in AR」にチェックを入れます
• 忘れちゃダメ、ゼッタイ
#UE4Osaka 25

26. iOSのビルド設定
• Platform>iOS>Renderingの、「Max. Metal Shader Standard
To Target」を「Metal v1.2」にしておきます
• 変更した場合はエディタの再起動が必要になります
#UE4Osaka 26

27. iOSのビルド設定
• Platform>iOS>OS Infoの「Minimum iOS Version」を「11.0」
に設定します
• iOS10以前はARKitに対応していないので切ってよし
#UE4Osaka 27

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. MobileProvisionとCertificateの設定
• Platform>iOS>Mobile ProvisionでProvisionとCertificateを設
定しておきましょう
#UE4Osaka 29

30. その他の設定
• Level、GameModeについては通常のプロジェクトと一緒です
#UE4Osaka 30

31. UE4.17のARKitとの違い
• ARCamera描画用マテリアルが不要になりました
• UE4.17でのARKitでは、Cameraの画像を投影するためのMaterialを作
成する必要がありましたが、UE4.18からは不要になっています
• ARKit Camera Componentがなくなりました
• 通常のCamera Componentを利用可能です
#UE4Osaka 31

32. ARPlayerPawnの作成
Pawn Blueprintを新規作成して、「BP_ARPlayerPawn」を作成
します
#UE4Osaka 32

33. ARPlayerPawnの作成
• ARPlayerPawnには、Camera Componentを追加しておきます
#UE4Osaka 33

34. ARPlayerPawnの配置
• 作成したARPlayerPawnをレベル内に配置しましょう
位置は(0.0, 0.0, 0.0)
#UE4Osaka 34

35. ARPlayerPawnの配置
• ここまで実装したものを実機転送すれば、iPad/iPhoneのカメ
ラから見た映像をスクリーンに投影している状態が確認できま
す
• ついでにStaticMeshActorあたりを配置しておけば、AR上でActorの位
置関係が保持されているところが確認できます
#UE4Osaka 35

36. HitTestの実装
• 画面上でタッチした位置からARKitのTrackingSpace内の位置
を取得する関数を作成します
#UE4Osaka 36

37. HitTestの実装
• ARPlayerPawnにFunctionを追加し、以下のノードを組みます
引数はVector2D
#UE4Osaka 37

38. HitTestの実装
• HitTestの出力は以下の通り
#UE4Osaka 38

39. HitTestの実装
• デバッグ用にPrint Stringノードを挟んでおくと良いです
#UE4Osaka 39

40. HitTestの実装
• HitTest用の関数が出来たら、下図のように使用します
#UE4Osaka 40

41. HitTestの実装
• HitTestで取得した情報は、Actorの配置に使用できます
#UE4Osaka 41

42. ここまでがチュートリアル
• ここから先は試作アプリを作ったときの知見などが続きます
#UE4Osaka 42

43. ARKitサンプルアプリを作りました
• UE4でのARKit開発の調査のために、サンプルアプリを作りま
した
#UE4Osaka 43

44. ARゲームを初期化したときの向き
• 正面方向がX方向になります
Transformをそのまま使うと、
キャラクターの尻を眺める構図に
なります
#UE4Osaka 44

45. HitTestで取得できるTransformについて
• Transformと言っても取得できるのは位置のみ
• Location以外はDefault値…
• と思いきや、Yawだけは少し
ブレるようです
（おそらくキャプチャ画像に
対する補正分）
すこし見えづらいですが、
ScaleとPitch、RollはDefault値に
なっています
#UE4Osaka 45

46. ARPlayerPawnの位置情報
• ARPlayerPawn自体の位置は端末を動かしても動きません
• Editor上で配置した位置から動きません
• 位置関係がずれるから当然…
#UE4Osaka 46

47. ARPlayerPawnの位置情報
• Camera ComponentのTransformが端末の動きに合わせて
変わります
ARPlayerPawn
Camera Comp.
#UE4Osaka 47

48. ARPlayerPawnの位置情報
#UE4Osaka 48

49. キャラクターにこっち向いてもらいたい
• Actorの方向ではなく、Camera Componentの方向へ向いても
らえばOKです
• 文字通りカメラ目線
#UE4Osaka 49

50. キャラクターにこっち向いてもらいたい
#UE4Osaka 50

51. 配置したActorに対するアクション
• 「GetHitResultUnderFingerByChannel」を使うといい感じに
HitResultがとれます
#UE4Osaka 51

52. 配置したActorに対するアクション
• ただしわりとアバウトな触り方でもHitするので、正確に取りた
い場合はスクリーン座標からWorldSpace座標に変換して、
LineTraceでHitさせたほうが良いかも？
#UE4Osaka 52

53. 配置したActorに対するアクション
• ARKitのHitTestとは優先順位をつけて使い分けると良い
#UE4Osaka 53
InputTouch Trace ARHitTest
ActorInteract
SpawnActor
True
False

54. その他
• 優秀なWindowsPCをお持ちの人は、WindowsPCで挑戦すると
少しだけ幸せになれます
• 初回デプロイ時のシェーダーコンパイルが遅い遅い…
• なお、2回目以降はほぼ気になりません
#UE4Osaka 54

55. デモ
• 時間があったら…
#UE4Osaka 55