軽率にAndroidXRのJetpack SceneCoreを使って3Dモデルを表示してみる / androidxr-scenecore-3dmodels

AndroidXR触ってみた発表会でLT登壇した資料です

Transcript

1. 軽率にAndroidXRの Jetpack SceneCoreを使って 3Dモデルを表示してみる にー兄さん@ninisan_drumath AndroidXR触ってみた発表会
2. アジェンダ - はじめに - Jetpack XR SDK / Compose for XR / SceneCore - CodeLabsのサンプルにSceneCoreを導入する - SceneCoreを使って3Dモデルを読み込む - おわりに
3. はじめに
4. にー兄さん(@ninisan_drumath) ソフトウェアエンジニア Babylon.jsとWebXR Device APIの宣教師 株式会社ホロラボ Babylon.js勉強会運営 Microsoft MVP for DevTech(Web) 2024
5. 本日のお話 Jetpack XR SDKで3Dモデルを読み込む方法についてご紹介 ドキュメントはあるが動いてるサンプルは見つからなかった 本日のゴール： - SceneCoreで3Dモデルの読み込み方法がわかる - Jetpack XR SDK面白そう・やってみようという気持ちになってもらう - SceneCoreでの現状の罠ポイントを知る 資料は後で共有します＆スクショSNS共有OKです
6. 想定ターゲット XR界隈の人が多そうな印象なので、そちらを想定とします Androidネイティブ出身の人にはちょっと物足りないかも しかし時間の関係でKotlinやComposeの詳細は話せなさそう
7. 検証環境 - Windows 11 Home - Android Studio: Meerkat Future Drop 2024.3.2 Canary 5 - Jetpack Compose for XR 1.0.0-alpha01 - Jetpack SceneCore 1.0.0-alpha01(<- 詳細後述) - Android emulator: Android XR SDK build for x86_64 - Android 14 - AndroidXRのCodelabsがわかりやすかったので それをもとに環境構築しました
8. Jetpack XR SDK / Compose for XR / SceneCore
9. Jetpack XR SDKはAndroidXRのためのライブラリ群 下記ライブラリを含む - Jetpack Compose for XR - Material Design for XR - Jetpack SceneCore - ARCore for Jetpack XR 基本はKotlin/Compose環境を想定していそうだが JavaやViews（xmlでUI作るタイプ）でも使用可能 https://developer.android.com/develop/xr/jetpack-xr-sdk
10. Compose for XR：Spatializedなコンポーネントを提供 JetpackComposeにおいてSpatialなパネルなどがある FullSpaceモードになったときに使えるUIたち https://developer.android.com/develop/xr/jetpack-xr-sdk より
11. Spatializedなコンポーネント例 - androidx.xr.composable.spatial - Orbiter - Spatial Dialog - Spatial Popup - Subspace - android.xr.composable.subspace - SpatialBox, Spatial Column, Spatial Row - Spatial Panel - Volume 詳細はAPI refを参照： https://developer.android.com/reference/kotlin/androidx/xr/compose/spatial/package-summary
12. SceneCore：3Dコンテンツの操作のためのライブラリ - 3DモデルやSpatialAudio、Environmentなどの操作 - モデルだけでなく、PanelなどもEntityとして抽象化されている - Entity-Component-Systemを採用 - GltfModelEntityにMovableComponentをアタッチする、というような感じ - android.xr.scenecore - Entity, Component, Model - Session API: https://developer.android.com/reference/kotlin/androidx/xr/scenecore/package-summary
13. CodeLabsのサンプルに SceneCoreを導入する
14. Android XR Codelabs GitHub repo: https://github.com/android/xr-codelabs Part1: Modes and Spatial Panels https://developer.android.com/codelabs/xr-fundamentals-part-1 Spatial UIに関するCodelabs これを見れば既存のComposeアプリに SpatializedComponentsを追加してAndroidXR対応させる 流れがわかる
15. SceneCoreの依存を追加 libs.version.toml [versions] sceneCore = "1.0.0-alpha01" [libraries] androidx-xr-scenecore = { group = "androidx.xr.scenecore", name = "scenecore", version.ref = "sceneCore" } build.gradle.kts dependencies { implementation(libs.androidx.xr.scenecore) } Studioから作れるXR TemplateにはSceneCoreは入っていそう
16. ListenableFutureとコルーチンを追加 implementation(libs.guava) implementation(libs.androidx.concurrent.futures) implementation(libs.kotlinx.coroutines.guava) alpha01ではモデル読み込み時にListenableFutureを使い これはコルーチンで動作する（suspend）
17. SceneCoreを使って 3Dモデルを読み込む
18. SceneCoreを使った3Dモデル読み込み 3DモデルはFullSpaceモードで表示可能 SubspaceやSpatialPanelの中に記述
19. 3Dモデルをassets/modelsなどに配置
20. Subspace { SpatialRow { SpatialPanel { val xrSession = checkNotNull(LocalSession.current) val activity = LocalActivity.current if (activity is ComponentActivity) { activity.lifecycleScope.launch { val gltfModel = xrSession.createGltfResourceAsync("models/Avocado.glb").await() val modelEntity = xrSession.createGltfEntity(gltfModel) modelEntity.setScale(5f) modelEntity.setPose(Pose(Vector3(0f, 0f, 0.5f))) } } }...
21. 今朝7時に録れた新鮮なデモ
22. SceneCoreでは01-02で破壊的変更 gltfモデル読み込み周りも がっつり影響あり もともとsessionのメソッドだったが createファクトリを使うように
23. alpha02のAPIだとコンパイルエラーに 自分の環境だけ……？ なぜかinternalな関数が参照されてしまう（シグネチャも違う）
24. 変更差分を見る限り 一応CompanionObjectには publicな関数定義がある https://android.googlesource.com/platform/frameworks/suppo rt/+/45b06677db0a231fe95179d5d40abf2b2b2d807c/xr/scen ecore/scenecore/src/main/java/androidx/xr/scenecore/Entity.k t#631
25. おわりに
26. まとめ 3Dモデルの読み込みができた APIもまだalphaなのもあり、ちょっとした罠もありそう
27. 参考 Develop with the Jetpack XR SDK https://developer.android.com/develop/xr/jetpack-xr-sdk Learn Android XR Fundamentals:Part 1 - Modes and Spatial Panels https://developer.android.com/codelabs/xr-fundamentals-part-1#0 Android XR Codelabs(github) https://github.com/android/xr-codelabs Add 3D models to your app https://developer.android.com/develop/xr/jetpack-xr-sdk/add-3d-models Develop UI with Jetpack Compose for XR https://developer.android.com/develop/xr/jetpack-xr-sdk/develop-ui