CrossRoad

Unity、VR、MR、ARを中心とした技術ブログ

【2018/11/5更新】Babylon.jsを使った開発方法が色々あるので整理しました

2018/11/5 Babylon.js Editorの実行ファイルの取得先を追記しました

最近、WebブラウザでもVRアプリが実行できるBabylon.jsについて調べていますが、日本語の情報が少ないのが現状です。

例:2018/8/19現在、Googleで言語設定を日本語にして「Babylon.js」を調べると、先月書いた私の記事がトップ10に入るくらいです。

英語であればBabylon.js本家のサイトが情報量豊富ですが、日本語でないため読むのに時間がかかります。そこで、何回かに分けてBabylon.jsを使った開発について整理したいと思います。

今回は開発環境の構築についてです。なお、以下の環境で動作を確認しています。

  • Chrome : 68.0.3440.106
  • Atom : 1.29.0 x64
  • Visual Studio Code : 1.26.1
  • Babylon.js Editor : 2.2.2

【スポンサーリンク】



1. テキストエディタ

Babylon.jsはJavascriptのライブラリなので、UnityやUnreal Engineのような統合開発環境があるわけではありません(注)。基本的にはテキストエディタを使うことになります。

何がおすすめか、は判断できませんが、公式HPのHow To Start Contributing to Babylon.jsではVisual Studio Codeを勧めています。

そこで、ここではVisual Studio Codeと、コード補完ができるAtomエディタの2種類を紹介します。

(注)後述するBabylon.js Editorや、Babylon Toolkitなどのサポートツールはあります。

1.1 Visual Studio code

Visual Studio Code

更新頻度が多く、色々な機能追加がされています。また、個人的には動作が軽いし、Unityでの開発でもよく使っています。しかし、下記のHPよりVisual Studio Codeの対応言語を調べたところ、Babylon.jsは未対応でした。そのため、v1.26.1時点では、コード補完(intellisense or auto-complete)機能がありません。

参考URL:Visual Studio Code language identifiers

また、拡張機能(Extention)としてBabylon.jsのViewerが紹介されています。

Babylon.js file viewer - Visual Studio Marketplace

Visual Studio CodeのExtension Market Placeでインストールし、拡張子が.babylonのファイルを開くことができます。ファイルを開いた後、ctrl + alt + Oを押すことで、Viewerを開くことができます。しかし、Babylon Editor Toolkitから出力してみましたが、テクスチャが貼られませんでした。

こちらがBabylon Editor Toolkitから出力したindex.htmlファイルの出力結果です。

Babylon Editor Toolkitから出力し、Safariで開いた例

上記index.htmlの再生時に読み込まれているbabylonファイルをVisual Studio Codeのbabylon-js-viewerで開いた例です。このようにテクスチャが貼られませんでした。

babylon-js-viewerで3Dモデルを出力した例

他にもいくつか試してみましたが、同様でした。公式HPでは5MB以上のファイルが開けないという制限がありますが、今回使ったbabylonファイルは43KBなので容量の問題ではなさそうです。何か解決できたら更新したいと思います。

1.2 Atom Editor

Githubが公開しているエディタです。以前Re:VIEW記法を使うエディタとして紹介したこともあります。こちらも動作が軽量で使いやすいです。

以下のフォーラム投稿によると、Babylon.jsのコード補完が可能とあるので試してみました。

Babylon.js Intellisense and Auto-complete - Questions & Answers - HTML5 Game Devs Forum

(1) Atomエディタをダウンロード、インストールする

こちらからダウンロードし、画面の指示に沿ってインストールします。

Atom

(2) atom-ternjsを導入する

atom-ternjsとは、javascriptのコード補完が可能なプラグインです。プラグインをインストールするには、設定画面を出す必要があります。出す手順はOSによって異なります。

  • Windowsの場合:File / Settings
  • Macの場合:File / Preference

今回はMacで解説します。設定画面を出したら、① +installを選択、②atom-ternjsを入力してPackagesをクリック、③atom-ternjsを選択して Installをクリックする、という手順でインストールできます。

Atomエディタでatom-ternjsをインストールする手順

(3) babylon.jsの定義ファイルを取得して、使うプロジェクトに入れる

こちらのファイルをダウンロードして、自分が使うプロジェクトに入れます。

http://hugos.site/babylonjs.json

このファイルは、こちらのサイト作者様が提供しているようです。公式のものではないかもしれませんが、json形式なので必要があれば自分でカスタマイズもできますね。

Free Hosting Account Suspended - x10hosting

(4) .tern-project ファイルを作ってbabylon.jsの使用を定義する

プロジェクトの中に.tern-projectというファイルを作り、下記のjsonを入力します。

{
  "ecmaVersion": 6,
  "libs": ["babylonjs"]
}

【スポンサーリンク】



(5) Atomエディタを再起動する

Babylon.jsの文法を入力してみると、このようにコード補完がされます。ここでは、BABYLON.Vector3(x,y,z)というメソッドを使うため、BABYLON.Ve まで入力すると、メソッドの候補と引数の情報が出ています。

Atomエディタを使ってBabylon.jsのコード補完をした例

2. 開発サポートツール

2.1 BabylonJS Editor (アプリケーション版)

オブジェクトの配置や設定ができます。すぐに使えるわけではなく、ビルド作業が必要です。下記に手順を記載します。

(1) BabylonJS EditorをGithubから取得する

こちらから取得します。

GitHub - BabylonJS/Editor: Visual editor for Babylon.js

(2) 依存関係を解消する

エディタのソースコードが入っているディレクトリで以下を実行します。

$ npm i
(3) ビルドする
$ npm run build
(4) 実行形式のファイルを実行する

ソースコードのelectron-packagesフォルダの中に実行ファイルが生成されています。

  • Windowsの場合:electron-packages / BabylonJS Editor.exe
  • Macの場合  :electron-packages / mac/ BabylonJS Editor.app

BabylonJS Editor.appを実行した場合です。

BabylonJS EditorのMacアプリを実行した画面

便利そうなのですが、少し癖がありそうです。ある程度わかったら更新予定です。


2018/11/5追記
以下のURLに、Editorの実行ファイルのURLが記載されていました。
https://doc.babylonjs.com/resources/getting_started

Windows:  http://editor.babylonjs.com/BabylonJS Editor.exe
Mac OS X:  http://editor.babylonjs.com/BabylonJS Editor.dmg



2.2 BabylonJS Editor (Webブラウザ版)

2.1で解説したエディタはWebブラウザから試すこともできます。以下にアクセスすると、ブラウザに同様の画面が表示され、使うことができます。機能としてはアプリケーション版と同一です。

Babylon.js Editor

BabylonJS EditorをWebブラウザから実行した時の画面

なお、回線なのか事前準備なのかは不明ですが、初回はアクセスしてから画面が出るまで2,3分かかりました。

3. 終わりに

当初はBabylon.jsの開発方法について他の話題も書くつもりでしたが、思った以上に開発環境周りで書くことが多かったです。次回はBabylon.jsでできることとか、基本的な文法などを解説したいと思います。