Babylon.jsはJavaScript/TypeScriptを使ったフレームワークのため、ブラウザ用コンテンツを作るのが基本的な使い方です。
一方、Babylon.jsで書いたコードを元に、Windows/iOS/Androidのネイティブアプリを開発する「Babylon Native」という方法もあります。
Babylon Native自体はGitHubで公開されています。しかし、これを使ってビルドしてアプリを作ったという情報は、イワケンさんのiOSアプリビルドしか見つけられませんでした。
また、Androidについては情報がありませんでした。そこで、今回はBabylon NativeでAndroidアプリをビルドするまでの手順を整理しました。
今回のビルド対象はAndroidです。
使用した環境
・Windows11 Pro
・Android Studio : Jellyfish | 2023.3.1
・Cmake : 3.29.3
・Ninja : 1.12.1
・Node.js: 22.1
・Git for Windows : 2.45.0
・Surface Duo (Android 12)
1. Babylon Nativeとは
Babylon.jsの公式HPで記載されています。
"Get the preview"とあるように、まだ完成はしていないようです。Babylon.jsでコードを書いて、それをVisual Studio、Xcode、Android Studio上でビルドすると、それぞれのネイティブアプリケーションになります。
主な対応関係は以下の通りです。
Visual Studio : Windows、HoloLens2アプリ
Xcode : iOS、Macアプリ
Android Studio : Androidアプリ
GCC: Linuxアプリ
なお、現時点では、Androidアプリを作るにはWindows環境を準備する必要があります。Mac環境は非対応のようです。
また、Babylon.jsの全ての機能をアプリ化できるわけではないと書かれています。詳細はGitHubリポジトリのReadmeをご確認ください。
2. 環境構築からapkビルドまでの手順
ソースコードおよび基本的な使い方はこちらにあります。
(1) git, CMake, node.jsをインストールする
・Git for Windows
https://git-scm.com/
・CMake
https://cmake.org/
・node.js
https://nodejs.org/en/
(2) Android Studio, Ninjaをインストールする
・Android Studio
https://developer.android.com/studio
・Ninja
https://ninja-build.org/
(3) PowerShellを管理者権限で開いて、Get-ExecutionPolicyを実行する
このようにRestrictedと表示された場合は(4)を実行。
$ Get-ExecutionPolicy Restricted
(4) PowerShellでSet-ExecutionPolicyを実行する
$ Set-ExecutionPolicy -ExecutionPolicy RemoteSigned
(5) Appsフォルダでnpm iを実行する
$ pwd BabylonNative-master/Apps/ $ npm i
(6) Apps/Playground/Androidフォルダを指定してAndroid Studioで開く
gradleのビルドが始まります。数分かかります。
(7) AndroidManifest.xmlの中でexported="true"を追加する
Android/app/src/AndroidManifest.xmlです。Android 12以降は必要な対応のようです。
(8) build.gradleに記載されているCmakeのバージョンを、自分の環境と合わせる
Android/app/build.gradleです。
私がcloneした時点のリポジトリでは3.19.6と書いてありました。今回は3.29.3を使ったので書き換えました。
(9) AndroidのAPIバージョンを使用するデバイスに合わせる
Android/app/build.gradleです。
私がcloneした時点のリポジトリではtargetSdkVersion 21でした。今回の31に合わせました。
(10) Ninjaのパスを登録する
Ninjaをダウンロードすると、ninja.exeが取得できます。これをc:ninjaとしてCドライブ直下にninjaフォルダを作り、c:ninja/ninja.exeとします。
次に、Windowsの環境変数のPATHにc:ninja/を追加します。
(11) Android Studioを動かしているPCとAndroidデバイスを接続し、デバイスが認識できたらRunを押します。APKビルド、転送が実行されます。
実行すると、このようになります。AndroidアプリとしてBabylon.jsの中身を動かすことができています。
3. 表示内容を変更する方法
Apps/Playground/Scripts/experience.js の中を変更します。
cloneしたときは"CreateBoxAsync(scene).then(function () {"が有効化されています。
先ほどの動作確認の動画では、コメントアウトされているBoomBox.gltf"を読み込むように書き換えていました。
4. ビルドエラーと対処法
検証中に確認したエラーコードと対処法です。対処法に書かれた番号は、上の(1)~(11) です。
4.1 npm : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\npm.ps1 を読み込むことができません。
npm : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\n
odejs\npm.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(ht
tps://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1
+ npm i
+ ~~~
+ CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
原因は、PowerShellの実行ポリシーに制限がかかっていたためでした。こちらのリンクを参考にしました。
実行ポリシーについて - PowerShell | Microsoft Learn
対応方法：(3)
4.2 android:exported needs to be explicitly specified for element
android:exported needs to be explicitly specified for element <activity#com.android.babylonnative.playground.PlaygroundActivity>. Apps targeting Android 12 and higher are required to specify an explicit value for `android:exported` when the corresponding component has an intent filter defined. See https://developer.android.com/guide/topics/manifest/activity-element#exported for details.
こちらを参考にさせていただきました。
対応方法：(7)
4.3 [CXX1429] error when building with cmake using~
[CXX1429] error when building with cmake using C:\Users\limes\Documents\BabylonNative-master\BabylonNative-master\Apps\Playground\Android\app\CMakeLists.txt: -- Android: Targeting API '21' with architecture 'arm64', ABI 'arm64-v8a', and processor 'aarch64'
対象とするデバイスのAPI レベルが合っていないためでした。
対応方法：(9)
4.4 [CXX1416] Could not find Ninja on PATH or in SDK CMake bin folders.
ninja.exeが環境変数として登録されていないためでした。
対応方法：(10)
4.5 CMake Error at C:/Program Files/CMake/share/cmake-3.29/Modules/ExternalProject.cmake:2945
CMake Error at C:/Program Files/CMake/share/cmake-3.29/Modules/ExternalProject.cmake:2945 (message): error: could not find git for clone of cmakeextensions-populate
git for Windowsがインストールされていないためでした。
対応方法：(1)
5. iOSビルドの場合
iOSビルドについてはイワケンさんが確認されておりました。こちらにリンクを共有します。 BabylonJS Native iOS
6. おわりに
Android Studioを長く使ってなかったので、ビルド関係の設定に手間取りました。
GitHubリポジトリのReadmeを見る限り、だいたいのことはできそうな感じです。特にWebXRサポートとあるので、VRコンテンツを作ってQuest3やApple Vision Proなどで動かすこともできるように思います。
そのあたりはまた機会見て試してみます。
