ARCoreとSceneform でARアプリをつくろう Hiroki Abe 2019.05.11 #Shingen.Py5 LT

自己紹介  阿部 弘樹  山形県出身、長野を経て山梨２年目  組込みソフトエンジニア(過去) -> 生産技術エンジニア  過去に作ったAndroidアプリ https://play.google.com/store/apps/developer?id=studio_machikita 2

アジェンダ  ARCoreの概要  ARCoreをつかってARアプリを作ろう  ARCore + 位置情報サービス  まとめ 3

ARCoreとは  Googleが提供するAR(拡張仮想現実)環境を構築するためのプラットフォーム ARCoreには３つの主要な機能(後述)があり、これで仮想現実を実現している。 https://developers.google.com/ar/  AppleのARKitに続いてARCoreが登場したことでモバイルAR市場の拡大が期待 される。 4

ARCoreの機能 1. Motion Tracking (カメラ位置の推定)  カメラ位置、方向を以下の要素から推定する  慣性計測ユニット(IMU) (加速度センサー、ジャイロセンサーなど)  カメラ画像から抽出した特徴点 出典: https://developers.google.com/ar/discover/concepts#motion_tracking 5

ARCoreの機能 2. Environmental Understanding (平面の検出)  テーブルや壁といった平面を検出する。検出した平面に3Dモデルを配置するこ とができる。ただし白い壁など質感がない平面は、特徴点をつかめずにうまく 検出できない可能性がある。 出典: https://developers.google.com/ar/discover/concepts#environmental_understanding 6

ARCoreの機能 3. Light estimation (光源の推測)  カメラ画像から光源を検出して、光の強度と色補正データを算出する。周りの環境 と同条件で3Dオブジェクトを照らしてリアリティを増すことができる。  機械学習による光源推定機能が予定されている (2019夏提供: Google I/O 2019にて) 出典: https://developers.google.com/ar/discover/concepts#light_estimation 7

ARCoreの機能 その他  User interaction  タッチやドラッグなどの操作で3Dシーンのオブジェクトを操作できる。  Augmented Images  あらかじめ2D画像をマーカーとして登録しておき、ARアプリを通じてカメラがマーカーを発 見したら、3Dオブジェクトを表示する機能  ARCore 1.9 (2019/05)にて機能強化され、動く画像 (例えばバスから見えるポスター)にも対応  Cloud Anchor  Cloud(GCP)を介してAnchor(空間における特定の位置を示すもの)を共有できる。  詳細は https://developers.google.com/ar/discover/concepts 8

ARCore対応端末  対応端末一覧 https://developers.google.com/ar/discover/supported-devices  まだまだ対応端末は少ない。ハイスペック端末が中心。  安価に入手できる端末 (私調べ) メーカー 端末 市場価格(万円) [新品 (19’5時点)] 備考 Huawei P20 Lite 1.8 公式ページに載っていないが対応している Google Nexus5X 2.0 Android 8.1 を最後に OS サポートは終了している Pixel3a 4.86 まだリストにないが多分対応。少し高いが開発用には最適。 Motorola Moto G6 2.7 Dual SIM Dual Standby (DSDS) 9

開発環境  さまざまなプラットホーム向けに開発環境が提供されている  3Dレンダリングライブラリ「Sceneform」を使うと、Java/KotlinでARアプリを 簡単に開発することができる。 ※Cloud Anchorのみ 10

Sceneformとは  3DシーンのレンダリングをOpenGL(3D描画のためのライブラリ)の知識なしに簡単に 行えるライブラリ。3DモデルをAndroidアプリにインポートするためのAndroid Studioのプラグインも提供している。  Sceneformなしの場合、OpenGLを使った描画処理を自前で実装しなければならずと ても大変。ARの開発環境としてはUnityが使われることが多いが、Sceneformの登場 によりJava/Kotlinでアプリを開発していた開発者がARに親しみやすくなった。 11

ARアプリをつくろう  作成するアプリ 選択、拡大縮小、移動可能な３Dモデルを配置するアプリ (サンプルアプリHelloSceneformと同様のアプリを１から自作する感じ)  手順 1. ARCore開発環境のセットアップ ＆ 動作確認 2. 3Dモデルを用意する 3. Androidプロジェクトの作成 4. Android Studio Sceneform プラグインを使い3Dモデルを専用形式に変換 してインポートする 5. 3Dモデルを配置するコードを書く 12

1. ARCore開発環境をセットアップする 環境セットアップとサンプルアプリの実行 1. Android Studioのダウンロード ＆ インストール https://developer.android.com/studio/install?hl=ja 2. ARCoreのドキュメントを参考に https://developers.google.com/ar/develop/java/quickstart ↓をダウンロードして解凍 https://github.com/google-ar/sceneform-android-sdk/releases sceneform-android-sdk-1.x.0.zip 3. Android Studioでサンプルプロジェクト(hellosceneform)をインポートする メニュー -> Import project 4.Build -> Make Projectでサンプルプロジェクトをビルドする 13

1. ARCore開発環境をセットアップする 環境セットアップとサンプルアプリの実行 ■実機で実行する場合 5. Tool-> SDKマネージャーで実機のAndroid verと一致するSDKがインストールされてい るか確認する。インストールされていなければインストールする 6. ARCore対応の実機を用意する 7. 実機のデバッグ機能を有効化する https://ameblo.jp/tomi-omiya/entry-12342918446.html 8. 実機をPCにUSB接続する ARCore 1.9はまだ配信されていないので(2019.05時点)apkを直接 インストールしておく必要がある。 https://github.com/google-ar/arcore-android-sdk/releases 9. Run -> Run で実行する 10. →のように起動できれば成功 14

1. ARCore開発環境をセットアップする 環境セットアップとサンプルアプリの実行 ■エミュレータで実行する 5. Tools -> ADV Manager Create Virtual Deviceで仮想デバイスを作成する 6. Phone Pixel or Pixel2を選択する 7. System image -> Pie (Google Playイメージ) をダウンロード 8.ダウンロードが完了したら -> Next -> Finish , 再生ボタンを押して起動する 下記のエラーがでて起動できないとき、以下の手順を試す。 Emulator: emulator: ERROR: x86 emulation currently requires hardware acceleration! https://www.javadrive.jp/android/emulator/index9.html 9.Emulatorの設定 (ツールバーの...ボタン)からOpenGLの設定をする Settings -> Advanced OpenGL ES API level -> Renderer maximum (up to OpenGL ES 3.1) 10. ARCoreのAPK（ARCore_1.x.0.x86_for_emulator.apk)ダウンロードしてインストールする。 https://github.com/google-ar/arcore-android-sdk/releases $ adb install ARCore_1.8.0.x86_for_emulator.apk 11. Run -> Run でアプリを実行する Emulatorを起動したらPlay StoreからARCoreをインストール 15

2. 3Dモデルを用意する  Sceneform がサポートしている3Dモデルのフォーマット  OBJ, glTF (glb), FBX (glTFやglbはプラグインによる変換無しでインポートできる)  Sceneform SDKのサンプルに含まれるモデルを使うこともできる https://github.com/google-ar/sceneform-android-sdk  TextViewやButtonなど標準のコンポーネントを表示したり、 立方体や球などのシェイプを動的に生成することもできる 16

2. 3Dモデルを用意する 今回はニコニ立体 https://3d.nicovideo.jp/ からVRM形式(Glb形式と下位互換あり) をダウンロードし、OBJ形式に変換してインポートした。 今回使用させていただいた3Dモデル 童田明治 -わらべだめいじー- ファンアート https://3d.nicovideo.jp/works/td55436 Pixivが提供する3DキャラメーカーVROIDでもVRM形式 の3Dモデルを作成できる https://studio.vroid.com/ その他、GlTFやFBX形式の3Dモデルも各Webサイト から入手することができる。 17

2. 3Dモデルを用意する VRMからOBJへの変換手順 1. 拡張子を.vrmから.glbに変更する。 2. 3D Builder (Microsoft Storeから入手)で開き、名前を付けて保存でOBJ形式を選択。 OBJ形式への変換は上記だけでOKだがVRMは3Dモデルの向きが異なる(-Zが上なので仰向けに なってしまう) ＆ スケールやモデル調整をしたいので、Blender(3DCGアニメーションの統合 開発環境)をつかって編集する。 3. Blender(https://blender.jp/)でファイル->インポート-> .objから3Dモデルをインポート 初期状態で追加されているCubeを削除する。Yが上になるようにモデルを回転する。 ここでポーズなども必要に応じて編集する。 ファイル->エクスポート->.obj , 拡大縮小 = 0.1 としてエクスポートを実行する 18

3. Androidプロジェクトの作成 1. Android Studioでメニュー -> File -> New -> ProjectでEmpty Activityを作成 19

3. Androidプロジェクトの作成 1. bundle.gradle (Module: app)に下記を追記 (sceneformプラグインの追加) 2. bundle.gradle (Project) に下記を追記 3. Sync Nowをクリックして変更を反映する 20 dependencies { classpath 'com.android.tools.build:gradle:3.4.0' classpath 'com.google.ar.sceneform:plugin:1.9.0' } android { ～中略～ compileOptions { sourceCompatibility 1.8 targetCompatibility 1.8 } } dependencies { ～中略～ implementation 'com.google.ar:core:1.9.0' implementation 'com.google.ar.sceneform.ux:sceneform-ux:1.9.0' implementation 'com.google.ar.sceneform:core:1.9.0' } ライブラリのインポート

3. Androidプロジェクトの作成 1. AndroidManifest.xmlを編集して必要なパーミッション追加する 21

3. Androidプロジェクトの作成 1. app->res->layout->activity_main.xmlを編集する TextViewの代わりに下記のFragment (ArFragment)を追加する FragmentはUIと機能(振る舞い)をもつコンポーネント ArFragmentは、ARに必要なUIや画面タップの検出リスナーを提供する。 またARCoreの動作に必要なパーミッションの確認も行う。 22

4. 3DモデルをSceneform用にインポート 1. appフォルダ以下にsampledataフォルダ(3Dモデル置き場)を作成する 2. sampledataフォルダにエクスポートした.obj,.mtlおよびテクスチャファイルを置く 23

1. sampledataフォルダにおいた.objファイルを右クリック -> Import Sceneform Asset 2. そのままFinishボタンを押す。3Dモデルの変換処理が実行される 4. 3DモデルをSceneform用にインポート 24 成功すると app->assetフォルダ内に.sfb ファイルができ、3Dモデルの プレビューが表示される ※

1. MainActivityにコードを追加する public class MainActivity extends AppCompatActivity { private static final String TAG = MainActivity.class.getSimpleName(); private ArFragment arFragment; private ModelRenderable modelRenderable; 5. 3Dモデルを配置するコードを書く 25 ① ①3Dモデルの描画を行うオブジェクト Nodeに紐づけて使う @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); arFragment = (ArFragment) getSupportFragmentManager().findFragmentById(R.id.ux_fragment); ModelRenderable.builder() .setSource(this, Uri.parse(“meiji.sfb”)) .build() .thenAccept(renderable -> modelRenderable = renderable) .exceptionally( throwable -> { Log.e( TAG, “Unable to load Renderable.”, throwable); return null; }); ～続く～ ② ②ArFragmentを取り出す ③3Dモデルをロードする ③

1. MainActivityにコードを追加する (続き) arFragment.setOnTapArPlaneListener( (HitResult hitResult, Plane plane, MotionEvent motionEvent) -> { if (modelRenderable == null) { return; } // Create the Anchor. Anchor anchor = hitResult.createAnchor(); AnchorNode anchorNode = new AnchorNode(anchor); anchorNode.setParent(arFragment.getArSceneView().getScene()); // Create the transformable model and add it to the anchor. TransformableNode node = new TransformableNode(arFragment.getTransformationSystem()); node.setParent(anchorNode); node.setRenderable(modelRenderable); node.select(); }); } } 5. 3Dモデルを配置するコードを書く 26 ① ①Plane(平面)をタップを検出する リスナーの処理を記述 ②タップした位置(hitResult)にAnchorを 作成する。Anchorに紐づくAnchorNode を作成し、ArFragmentのSceneに追加 する。 ③選択、移動、拡大縮小、回転ができる Nodeに3Dモデルを紐づける。 AnchorNodeの子として追加する。 ※Scene Sceneを頂点とした、Nodeで構成されたグラフを 保持するクラス。 当たり判定を提供しどの子Nodeが タッチされたかを検出する ② ③ AnchorNode Anchor Scene TransformableNode Model ArFragment

動作確認  Run -> Runで実行する  動作を確認  3Dモデルが重いのか動作がカクカクしている  それともP20 liteには重いのかな？ 27

ARCore + 位置情報サービス  ARCoreは、位置情報をAR空間で使用するための手段が提供していない  サードパーティー製のライブラリでそれを実現することが出来る https://github.com/appoly/ARCore-Location https://www.appoly.co.uk/2018/03/28/arcore-location/ 28 サンプルアプリを改造してお試し。 甲府駅までの距離をTextViewに表示

ARCore Elements  ARCoreを使ったARアプリの作成方法を学べるアプリ。Googleが提供  https://play.google.com/store/apps/details?id=com.google.ar.unity.ddelements&hl=ja 29

まとめ  ARCore とSceneformで簡単にARアプリが作成できた  ARアプリ開発に挑戦してみませんか？ Shingen.pyでは第3回東京公共交通オープンデータチャレンジという 電車、バス、駅などのオープンデータを活用するコンテストへの出場 を目指しています。ARアプリを作るアイデアもあがっています。 slackのチャンネル = #opendata_challenge 30