CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

Babylon.js Editor v4.0の公式版がリリースされました

日本時間の本日に、Babylon.js Editorのv4公式版がリリースされました。このブログでは去年からv4のbeta、rc (release candidate) の頃から使い方や特徴などを紹介してきました。

www.crossroad-tech.com

www.crossroad-tech.com

今回は、改めてBabylon.js Editor v4の概要や特徴を紹介します。

1. Babylon.js Editorとは?

Babylon.jsのコンテンツをGUIで作れるEditorです。TypeScriptで書かれていますが、Electronという仕組みを使って、Windows、Mac、Linuxそれぞれで単独実行するアプリケーションとして使用できます。

昨日まで、オフィシャルリリースはv3.1.2でしたが、本日より4.0.1になりました。

2. 環境構築方法

このURLにアクセスしてソースコードを入手します。

Tags · BabylonJS/Editor · GitHub

入手したフォルダで以下のコマンドを実行します。

$ npm i
$ npm run build

npm not foundのようなエラーがでて失敗する場合、node.jsをインストールします。ここにあります。v12 あるいは v14の最新版で良いと思います。

nodejs.org

Windows限定ですが、インストールの前にBuild toolが必要のようです。

For Windows users, follow this tutorial to install the windows build tools: https://github.com/felixrieseberg/windows-build-tools This is mandatory for native modules used in the Editor.

引用元:GitHub - BabylonJS/Editor: Community managed visual editor for Babylon.js

Mac限定ですが、No Xcode or CLT version detected! が出て失敗する場合、Xcodeのコマンドラインツールを再インストールすると解消します。
詳細はこちらをご確認ください。

www.crossroad-tech.com

ビルドが完了したら、electron-packagesというフォルダができているので、その中にあるexe形式またはapp形式のファイルを実行します。

3. 基本的な使い方

基本的な使い方はこのドキュメントに書いてあります。
github.com

Unityのように、GUIで3DCGオブジェクトを並べて、個別のオブジェクトにスクリプトをアタッチすることができます。

なお、Babylon.js Editorで出てくるworkspaceとprojectについて、Unityとの対応関係が少し異なるので初めに確認しておくとよいです。

# Babylon.js Editor Unity
1 New Workspace New Project
2 New Project New Scene

以前Babylon.js Editorでピンボールゲームを作ったときのソースコードの一部です。onStart()、onUpdate()、fromSceneがUnityと似ていることが確認できると思います。

gist.github.com

作ったものを実行するときは、Babylon.js Editorの内部でWebサーバを立てて、そのURLに対してブラウザからアクセスする形をとります。

XcodeやAndroid Studioのようなデプロイ相当の機能はありません。作ったものをサーバに格納したいときは、以下の記事のようにWorkspace全体のファイルからいくつかのファイルを抜き出してサーバに入れれば完了です。

www.crossroad-tech.com

4. v3.1.2とv.4以降の変化

こちらで書いたのでご参照ください。

www.crossroad-tech.com

また、去年書いた時点からの差分の1つとして、httpsサーバの実行機能が追加されました。これを使うと、Babylon.js Editorで作ったworkspaceの内容をhttpsの環境で実行できます。
WebXRコンテンツをBabylon.js Editorで作り、Oculus Questやスマートフォンのブラウザで動作確認することができます。

httpsの設定をする方法は、こちらのGitHubのReadmeにあります。

github.com

Edit > Preferenceからhttpsの設定を有効にして、以下のコマンドでkey.pemとcert.pemを生成します。

$ openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

生成したらPreferenceの中のhttpsのbrowseで指定します。

httpsで起動するには、画面左上の"Run"で右クリックして、"Run in My browser (HTTPS)"をクリックします。 "Run"を左クリックすると、httpで起動するので右クリックが必要です。

5. おわりに

最近、Babylon.js EditorでWebXRコンテンツ (immersive-vr) を作る方法をまとめたところでしたが、公式のドキュメントで紹介していただけました。

github.com

Babylon.js Editorは、Unityに慣れてる方がWebXRコンテンツを作る環境として向いている気がしています。引き続きimmersive-arコンテンツの作り方などをまとめていく予定です。