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