Slide 1

Slide 1 text

軽率にAndroidXRの Jetpack SceneCoreを使って 3Dモデルを表示してみる にー兄さん@ninisan_drumath AndroidXR触ってみた発表会

Slide 2

Slide 2 text

アジェンダ - はじめに - Jetpack XR SDK / Compose for XR / SceneCore - CodeLabsのサンプルにSceneCoreを導入する - SceneCoreを使って3Dモデルを読み込む - おわりに

Slide 3

Slide 3 text

はじめに

Slide 4

Slide 4 text

にー兄さん(@ninisan_drumath) ソフトウェアエンジニア Babylon.jsとWebXR Device APIの宣教師 株式会社ホロラボ Babylon.js勉強会運営 Microsoft MVP for DevTech(Web) 2024

Slide 5

Slide 5 text

本日のお話 Jetpack XR SDKで3Dモデルを読み込む方法についてご紹介 ドキュメントはあるが動いてるサンプルは見つからなかった 本日のゴール: - SceneCoreで3Dモデルの読み込み方法がわかる - Jetpack XR SDK面白そう・やってみようという気持ちになってもらう - SceneCoreでの現状の罠ポイントを知る 資料は後で共有します&スクショSNS共有OKです

Slide 6

Slide 6 text

想定ターゲット XR界隈の人が多そうな印象なので、そちらを想定とします Androidネイティブ出身の人にはちょっと物足りないかも しかし時間の関係でKotlinやComposeの詳細は話せなさそう

Slide 7

Slide 7 text

検証環境 - 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がわかりやすかったので それをもとに環境構築しました

Slide 8

Slide 8 text

Jetpack XR SDK / Compose for XR / SceneCore

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Compose for XR:Spatializedなコンポーネントを提供 JetpackComposeにおいてSpatialなパネルなどがある FullSpaceモードになったときに使えるUIたち https://developer.android.com/develop/xr/jetpack-xr-sdk より

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

CodeLabsのサンプルに SceneCoreを導入する

Slide 14

Slide 14 text

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対応させる 流れがわかる

Slide 15

Slide 15 text

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は入っていそう

Slide 16

Slide 16 text

ListenableFutureとコルーチンを追加 implementation(libs.guava) implementation(libs.androidx.concurrent.futures) implementation(libs.kotlinx.coroutines.guava) alpha01ではモデル読み込み時にListenableFutureを使い これはコルーチンで動作する(suspend)

Slide 17

Slide 17 text

SceneCoreを使って 3Dモデルを読み込む

Slide 18

Slide 18 text

SceneCoreを使った3Dモデル読み込み 3DモデルはFullSpaceモードで表示可能 SubspaceやSpatialPanelの中に記述

Slide 19

Slide 19 text

3Dモデルをassets/modelsなどに配置

Slide 20

Slide 20 text

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))) } } }...

Slide 21

Slide 21 text

今朝7時に録れた新鮮なデモ

Slide 22

Slide 22 text

SceneCoreでは01-02で破壊的変更 gltfモデル読み込み周りも がっつり影響あり もともとsessionのメソッドだったが createファクトリを使うように

Slide 23

Slide 23 text

alpha02のAPIだとコンパイルエラーに 自分の環境だけ……? なぜかinternalな関数が参照されてしまう(シグネチャも違う)

Slide 24

Slide 24 text

変更差分を見る限り 一応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

Slide 25

Slide 25 text

おわりに

Slide 26

Slide 26 text

まとめ 3Dモデルの読み込みができた APIもまだalphaなのもあり、ちょっとした罠もありそう

Slide 27

Slide 27 text

参考 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