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

15.5K Views

December 20, 17

スライド概要

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

profile-image

Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

ARゲームズ #UE4AllStudy Miku Miku Hockey

11.

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

12.

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

13.

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

14.

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

15.

UE4 + AR やるしかないでしょ!!!!!! #UE4AllStudy

16.

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

17.

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

18.

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

19.

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

20.

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

21.

開発する上で必要なもの (ARCoreの場合) UE4.18.2 ( 2017/12/19現在 ) ARCore対応端末 • Google Pixel, Pixel XL, Pixel 2, Pixel 2 XL (いずれも日本国内では未発売) • Samsung Galaxy S8, S8+, Note 8 #UE4AllStudy

22.

今年9月のSDC2017における講演にて This winter, ARCore will run on 100M Android devices 今冬、ARCoreは 1億台のAndroid端末上で動作するよ! #UE4AllStudy

23.

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

24.

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

25.

https://blog.google/products/google-vr/arcore-developerpreview-2/ #UE4AllStudy

26.

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

27.

先行して試したい方向け ARCore公式 Getting Started with Unreal • https://developers.google.com/ar/develop/unreal/gettingstarted Preview2対応版のUE4.18 (要ビルド) • https://github.com/google-ar-unreal/UnrealEngine Preview2対応版のサンプルプロジェクト • https://github.com/google-ar/arcore-unreal-sdk #UE4AllStudy

28.

Caution!!! ARCore is currently in preview. There might be breaking changes before the 1.0 release. #UE4AllStudy

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

実演中 #UE4AllStudy

38.

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

39.

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

40.

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

41.

UE4.18からは Start in ARを有効にするだけでOKに Engine¥Source¥Programs¥ UnrealBuildTool¥Platform¥IOS¥ UEDeployIOS.cs #UE4AllStudy

42.

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

43.

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

44.

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

45.

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

46.

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

47.

…? #UE4AllStudy

48.

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

49.

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

50.

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

51.

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

52.

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

53.

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

54.

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

55.

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

56.

#UE4AllStudy

57.

ARKitの 明るさ推定機能を使いたい! #UE4AllStudy

58.

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

59.

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

60.
[beta]
現状は、以下のようなコードで使用可能
(BPノード化しておくと便利)
float UAppleARKitBlueprintLibrary::GetEstimateAmbientIntensity(UObject*
WorldContextObject)
{
FAppleARKitFrame frame;
if (GetCurrentFrame(WorldContextObject, frame) &&
frame.LightEstimate.bIsValid)
{
return frame.LightEstimate.AmbientIntensity;
}
return -1.0f;
}
#UE4AllStudy

61.

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

62.

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

63.

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

64.

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

65.

先行して試したい方は Masterブランチをどうぞ! (動作保証はありません) #UE4AllStudy

66.

ARSystemクラスの追加 #UE4AllStudy

67.

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

68.

#UE4AllStudy

69.

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

70.

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

71.

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

72.

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

73.

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

74.

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

75.

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

76.

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

77.

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

78.

今回のまとめ #UE4AllStudy

79.

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

80.

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

81.

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

82.

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

83.

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

84.

付録 – 各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-interfaceguidelines/technologies/augmented-reality/ ARCore • Best practices for mobile AR design • https://www.blog.google/products/google-vr/best-practices-mobile-ardesign/ #UE4AllStudy

85.

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