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

1. #UE4AllStudy#UE4AllStudy
猫でも分かるUE4を使ったARコンテンツの作り方 Ver 1.0.0
Epic Games Japan
岡田 和也( @pafuhana1213 )
第2回UE4何でも勉強会 in 東京

2. #UE4AllStudy
自己紹介
Epic Games Japan サポートエンジニア
岡田 和也 ( おかず@pafuhana1213 )

3. #UE4AllStudy
お品書き
• UE4とARKit, ARCoreについて
• ARコンテンツを作る手順について(UE4.18)
• Tipsと今後入る機能について( UE4.19 )

4. #UE4AllStudy
はじめに
UE4はARKit, ARCoreへの対応に
積極的に取り組んでいます！

5. #UE4AllStudy
UE4.18のリリースノートより

6. #UE4AllStudy
UE4とApple ARKit
実際の開発で使用できるレベルでサポート済み！
• Appleの発表会でUE4製デモが使用されたという実績
Wingnut AR ( WWDC 2017 ) The Machines( Apple Special Event )

7. #UE4AllStudy
UE4とGoogle ARCore
ARCore プレビュー版 をサポート済み
• ARCore専用Componentも提供！
正式リリース時期は今の所未定…？
(2017/12/19現在)

8. #UE4AllStudy
ARKit, ARCoreの共通する大きな特徴
マーカレス型AR
特殊な追加デバイスが不要
• 一般的なスマートフォンで動作

9. #UE4AllStudy
一世代前のARブームでは
マーカ型ARが主流
• 事前情報( マーカ・立体物など )の登録・準備が必須
ARToolKit Vuforia (Qualcomm)

10. #UE4AllStudy
ARゲームズ Miku Miku Hockey

11. #UE4AllStudy
マーカレス型AR
事前情報の登録・準備を必要としないAR
• マーカの代わりに自然特徴点を利用する

12. #UE4AllStudy
技術自体は前々からあったが…
実用化するには数多くの問題が…
• トラッキング処理の計算負荷と
当時のスマホのスペックの問題
• デプスセンサーなどの
特殊なデバイスを必要としていた
• などなど
PTAM (2007年)

13. #UE4AllStudy
ARKit, ARCoreが最高な理由 その1
誰もが持っている一般的なデバイスで
マーカレス型ARを実現している
• 潜在的なユーザ数が桁違い
• さらに、時間が経つに連れユーザ数が増加

14. #UE4AllStudy
ARKit, ARCoreが最高な理由 その2
プラットフォーマ主導という安心感
• OS・SDKに標準で組み込まれるというのは大きい
• Google / Appleパワーによる
急速な技術革新への期待

15. #UE4AllStudy
UE4 + AR
やるしかないでしょ！！！！！！

16. #UE4AllStudy
お品書き
• UE4とARKit, ARCoreについて
• ARコンテンツを作る手順について(UE4.18)
• Tipsと今後入る機能について( UE4.19 )

17. #UE4AllStudy
ARコンテンツを作る手順について(UE4.18)
• 開発する上で必要なもの
• 既存のサンプルについて
• 各処理・設定の紹介（実演部分）

18. #UE4AllStudy
開発する上で必要なもの (ARKitの場合)
UE4.18.2 ( 2017/12/19現在 )
A9以降のプロセッサを搭載した
iOS11 端末
• iPhone 6s 以降,
• iPad(第５世代), iPad Pro

19. #UE4AllStudy
開発する上で必要なもの (ARKitの場合)
BPオンリーで作る場合
• Windows or Mac
• Apple Developer Program
BP + C++ で作る場合
• Windows ( Macで開発する場合は不要 )
• Mac
• Apple Developer Program

20. #UE4AllStudy
もう少し詳しく知りたい人向け
[CEDEC+KYUSHU 2017] 最新モバイルゲームの実例からみる
UE4のモバイル向け機能・Tipsを全部まるっとご紹介！ +
UE4.18 モバイル最新情報の紹介
【UE4】WindowsでiOS用アプリをビルドしてみた【ARKit】
• てんちょー(@shop_0761)さんによる
BPプロジェクトのiOSビルド手順の解説記事

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. #UE4AllStudy
今年9月のSDC2017における講演にて
This winter, ARCore will run
on 100M Android devices
今冬、ARCoreは
1億台のAndroid端末上で動作するよ！

23. #UE4AllStudy
待てないあなた向けに
某ブログの記事
UE4のARCoreサンプルを未サポート端末(ZenFoneAR)で動かす
ためにしたこと(2017/9/4)
じこせきにんでおねがいします

24. #UE4AllStudy
ARCoreの準備については
これで終わりだったはずなのですが…

25. #UE4AllStudy
https://blog.google/products/google-vr/arcore-developer-
preview-2/

26. #UE4AllStudy
ARCore Developer Preview2が
12/15に来ました
リリースノートより
• APIインターフェースは
大幅に改訂され、変更されました
• 以前の開発者プレビューの
主要機能はすべて残っていますが、
メソッドと関数の呼び出しは
変更されています

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. #UE4AllStudy
Caution！！！
ARCore is currently in preview.
There might be breaking changes
before the 1.0 release.

29. #UE4AllStudy
ARコンテンツを作る手順について(UE4.18)
• 開発する上で必要なもの
• 既存のサンプルについて
• 各処理・設定の紹介（実演部分）

30. #UE4AllStudy
何故サンプルを先に紹介するのか
• AR機能を使うために
プロジェクト設定の数項目を変更する必要がある
• AR機能に関する公式ドキュメントがまだない
（ごめんなさい）
公開されているサンプルを改造するのオススメ！

31. #UE4AllStudy
EpicGamesの公式サンプル
UE4.18リリースノートにて配布中
ARKit, ARCore両対応
ARKitの場合、RemoteBuildが必要
（ = Macが必須 ）

32. #UE4AllStudy
Tsuyoshi MAEHANA(@sandinist )さんが
公開しているサンプル
https://github.com/sandinist/ue4.18.0_arkit_sample
公式サンプルから
ARKit に関する処理を移植したサンプル
Remote Build不要
（= Windos開発の場合はMac不要）

33. #UE4AllStudy
https://speakerdeck.com/sandinist/arkit-on-ue4-dot-18-dot-0

34. #UE4AllStudy
https://www.slideshare.net/T_Sumisaki/ue418arkit-ue4in3
墨崎達哉(@T_Sumisaki) さん

35. #UE4AllStudy
ARCore公式で配布されているサンプル
Getting Started with Unreal
UE4のARCore専用のコンポーネントが
使われているサンプル
• ARCoreが検出した平面の表示など
ARCore Preview1用のサンプル
• https://github.com/google-ar/
arcore-unreal-sdk/tree/sdk-preview

36. #UE4AllStudy
ARコンテンツを作る手順について(UE4.18)
• 開発する上で必要なもの
• 既存のサンプルについて
• 各処理・設定の紹介（実演部分）

37. #UE4AllStudy
実演中

38. #UE4AllStudy
お品書き
• UE4とARKit, ARCoreについて
• ARコンテンツを作る手順について(UE4.18)
• Tipsと今後入る機能について( UE4.19 )

39. #UE4AllStudy
UE4.18から、プロジェクト設定からの
Additional Plist Dataの追加が
不要になりました！

40. #UE4AllStudy
UE4.17では
以下の文字列を追加する必要がありました
<key>NSCameraUsageDescription</key> <string>This
application will use the camera for AR</string>

41. #UE4AllStudy
UE4.18からは
Start in ARを有効にするだけでOKに
EngineSourcePrograms
UnrealBuildToolPlatformIOS
UEDeployIOS.cs

42. #UE4AllStudy
キャラクタ / オブジェクトの
影を表示したい！

43. #UE4AllStudy
ARにおける影
ARにおける実在感を増すためには
現実空間に落ちているように見える影 はとても効果的
（「AR 光学的整合性」でググろう！）

44. #UE4AllStudy
Fake Shadowを使う手もあるけど…
メリット
• 実装が簡単
• 処理負荷が低い
• 影無しよりは断然実在感がある
デメリット
• 低品質
• 動きのあるモデルの場合
嘘がバレやすい
Epic公式サンプルの BP_Placeable

45. #UE4AllStudy
ARコンテンツで正確な影を出すためには
現実空間に影が落ちているように見せる為に
床用の平面モデルを用意し、その床に落ちた影だけを描画する
（白い箇所は描画しない箇所）
カメラから
取得した映像と
合成

46. #UE4AllStudy
影を落とす床用のマテリアル
影以外の部分を抜く必要があるが、
影とそれ以外の部分を分離する処理は実装が面倒…
カメラから取得した画像を床に適用することで、
UE4の描画結果とカメラ画像を合成した後に
影だけ残るようにする

47. #UE4AllStudy
…？

48. #UE4AllStudy
床のスクリーン座標から
カメラ画像を取得・適用
UE4の描画結果と
カメラ画像を重ね合わせた状態
グレイマンと
マテリアル適用前の床

49. #UE4AllStudy
カメラ画像を床に適用するには
ARKit / ARCoreプラグインに含まれる
パススルー用のマテリアルを複製し改造する！
ARKitCameraMaterial / GoogleARCorePassthroughCameraMaterial コンテンツブラウザの右下

50. #UE4AllStudy
改造手順
1. Material Domainを
PostProcess から Surfaceに
2. ShadingModelを
Default Lit から Unlit に
3. TexCorrd[0] ノードを
ScreenPosition ノードに置き換え

51. #UE4AllStudy
Unlit(Emissiveのみ) な床に影を落とすには？
カメラ画像がライティングの影響を受けないよう
床のマテリアルは Unlitにする必要がある
• Unlitの場合、通常のシャドウは落ちなくなってしまう…

52. #UE4AllStudy
変調シャドウ(Modulated Shadows)を使う！
モバイルプラットフォーム用に用意された
低負荷な動的シャドウ
• Unlitの場合でもシャドウが落ちる
• 影の色を設定可能 ( = 設定する必要がある )
公式ドキュメント
• モバイル プラットフォーム向けのライティング
• 変調シャドウの使用方法

53. #UE4AllStudy
通常の動的シャドウ 変調シャドウ

54. #UE4AllStudy
変調シャドウを使うためには
• MobileHDRを有効に
• Directional LightをStationaryに
• Directional Lightの
Cast Modulated Shadowsを有効に
• シャドウを落としたいメッシュの
Mobility設定をStatic以外に

55. #UE4AllStudy
変調シャドウを確認するには
• モバイルプレビュー機能を使う
• 公式ドキュメントへのリンク
• 端末に転送し、実機上で確認

56. #UE4AllStudy

57. #UE4AllStudy
ARKitの
明るさ推定機能を使いたい！

58. #UE4AllStudy
ARKit / ARCore共に
明るさ推定機能を持ってます
ARKit
• 公式APIページへのリンク
ARCore
• 公式APIページへのリンク
• Get Latest Light Estimation

59. #UE4AllStudy
ARKitの明るさ推定機能も使いたい！…が
FAppleARKitLightEstimateクラスの
AmibientIntensity にARKitが推定した値が格納されている
• FAppleARKitFrameが持っている
LightEstimateがBPに公開されていない…
• なので、BPから取得することが現状不可能…

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. #UE4AllStudy
注意：ライトの向きは(現時点では)取得不可
ARKit, ARCore共に
カメラ画像から推定した全体の明るさ(float値)しか返さない
• SDK側の仕様。今後改善されるかも？
• ARKitはFaceTracking時は光源の方向も推定するらしい (未検証)

62. #UE4AllStudy
もし自力でライトの向きを推定したい場合
CEDEC2014にて SIE(当時はSCE) 様が講演した
「PS4ダイナミックライティング」が参考になるかも
• 4Gamer.net ［CEDEC 2014］現実と仮想の狭間でエンターテイメン
トを作る。SCEが語るAR（拡張現実）コンテンツの制作事例

63. #UE4AllStudy
今後の対応予定について

64. #UE4AllStudy
今後の対応予定について
以降の内容は 4.19 Preview 0 ぐらいの内容です
タイミング的に大きくは変わらないと思いますが、
今後リリースされるものとは少し異なる可能性があります

65. #UE4AllStudy
先行して試したい方は
Masterブランチをどうぞ！
（動作保証はありません）

66. #UE4AllStudy
ARSystemクラスの追加

67. #UE4AllStudy
ARSystemクラスの追加
ARKit , ARCoreのラッパークラス
• 実装が異なっていた箇所を共通化することで
１つのコードでARKit, ARCore両対応できるように
ARSystemの追加に伴い、
AR向けのBP関数ライブラリが強化！

68. #UE4AllStudy

69. #UE4AllStudy
AR機能のON/OFFが可能に
プロジェクト設定の Start in AR が有効でも
強制的にAR機能が有効にならないように
Start in AR が有効でも
Start ARノードを呼び出さないと
AR機能が働かないようになりました

70. #UE4AllStudy
検出平面へのLineTraceの共通化・簡略化
Line Trace Tracked Objects
• 返り値の型：
ARTrace Result Structure

71. #UE4AllStudy
検出した平面のデバッグ表示
• Get All Geometries
• Debug Draw Tracked Geometry

72. #UE4AllStudy
検出した平面と同じ位置・向き・大きさに
Planeメッシュ(100 x 100 x 0)を配置する処理

73. #UE4AllStudy
しかし、ARCoreはARSystemに未対応(4.19時点)
<The method or operation is not implemented.>
ARCore自体がまだプレビューなのが理由
• SDK自体が大きく変わる可能性がある
将来的にはARSystemに組み込まれる
• 4.19ではARSystemを経由して
ARKit(iOS)でARコンテンツを作成しておけば
ARCore正式リリース時の対応は楽に

74. #UE4AllStudy
4.18 から 4.19 への
移行コストについて

75. #UE4AllStudy
置き換えるノードは一つだけ！
ARKit用の Hit Test～ノード を
ARSystemの Line Trace～に置き換え
• Hit Test～ノードは4.19でも存在するが、中身の処理が空に
（その為、使っていてもエラーが発生しないので注意）

76. #UE4AllStudy
Start ARノードを追加
4.19から Start ARノードを使わないと
AR機能が有効になりません
• 4.18と同じ挙動にするのなら、Begin Playで使う

77. #UE4AllStudy
以上！
(ARに関しては)移行コストは低いので、
4.18で作業を進めて頂いて問題ありません！

78. #UE4AllStudy
今回のまとめ

79. #UE4AllStudy
まとめ
製品レベルのARコンテンツを作るための機能は
既に整っている！
• 公式サンプルもあるので、シンプルなものなら直ぐ作れる！

80. #UE4AllStudy
まとめ
ARにおけるライティングと影の重要性について
• 現実環境に近づけるための手法を説明
• 一手間加えるだけで、クオリティが格段に向上するので是非！

81. #UE4AllStudy
まとめ
4.19でARSystemクラスが追加されます
• 複数プラットフォーム対応が更に楽に！

82. #UE4AllStudy
最後に
ARブームは定期的に来ては
すぐ去っていきました…
今度こそ…今度こそ…
長く続くブームにしていきましょう！！！

83. #UE4AllStudy
本講演に関する質問はこちらからどうぞ！
mail : kaz.okada@epicgames.com
Twitter : @pafuhana1213

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. #UE4AllStudy
付録 – ARにおける整合性問題 -
幾何学的整合性
• 現実世界との位置合わせ(トラッキング)の精度
• オクルージョン( 仮想/現実 物体の前後関係 )の問題
光学的整合性
• ライティング環境の一致
• 画質の一致
時間的整合性 (リアルタイム性)