日本時間の本日に、Babylon.js Editorのv4公式版がリリースされました。このブログでは去年からv4のbeta、rc (release candidate) の頃から使い方や特徴などを紹介してきました。
今回は、改めて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の最新版で良いと思います。
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のコマンドラインツールを再インストールすると解消します。
詳細はこちらをご確認ください。
ビルドが完了したら、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と似ていることが確認できると思います。
作ったものを実行するときは、Babylon.js Editorの内部でWebサーバを立てて、そのURLに対してブラウザからアクセスする形をとります。
XcodeやAndroid Studioのようなデプロイ相当の機能はありません。作ったものをサーバに格納したいときは、以下の記事のようにWorkspace全体のファイルからいくつかのファイルを抜き出してサーバに入れれば完了です。
4. v3.1.2とv.4以降の変化
こちらで書いたのでご参照ください。
また、去年書いた時点からの差分の1つとして、httpsサーバの実行機能が追加されました。これを使うと、Babylon.js Editorで作ったworkspaceの内容をhttpsの環境で実行できます。
WebXRコンテンツをBabylon.js Editorで作り、Oculus Questやスマートフォンのブラウザで動作確認することができます。
httpsの設定をする方法は、こちらのGitHubのReadmeにあります。
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) を作る方法をまとめたところでしたが、公式のドキュメントで紹介していただけました。
Babylon.js Editorは、Unityに慣れてる方がWebXRコンテンツを作る環境として向いている気がしています。引き続きimmersive-arコンテンツの作り方などをまとめていく予定です。