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

An introduction of a powerful development tool for Web applications: Babylon.js Editor

There are a lot of methods for developing 3DCG based applications. Unity and Unreal Engine are good tools for applications on Windows, MacOS, Linux, iOS, Android and so on. three.js and a-frame are also useful frameworks on web applications. I think Babylon.js is well known as the same as useful frameworks but Babylon.js Editor is not famous even in web developers.
The post shows the editor and basic usages with a sample game repository.

1. What is Babylon.js?

Babylon.js is a strong and fantastic framework for WebGL.

Here are games developed on Babylon.js.


brilliant man

Simple 3D fps game

Microsoft employees are the main contributors. They introduce the framework on their official blogs.

Game Development - Babylon.js: Building a Basic Game for the Web | Microsoft Docs

Adding WebVR support to a 3D Babylon.js game - UWP applications | Microsoft Docs

It is typical that 3DCG and XR (AR/VR/MR) applications are developed by Unity or Unreal Engine. Basically, WebGL framework applications are developed on text editors. Unity or Unreal Engine are more efficient to develop such applications than only text editors.
Babylon.js provides useful IDE (Integrated Development Environment) as Babylon.js Editor.

2. Babylon.js Editor

Babylon.js Editor is an useful IDE for developing applications based on Babylon.js.
Other frameworks provide similar one but these can not manage script files.

# tool align 3DCG objects export scene manage by script URL
1 three.js editor OK OK - three.js / editor
2 a-frame inspector OK OK - Example Scene
3 Babylon.js Editor OK OK OK Babylon.js Editor

With managing scripts, developers can use Babylon.js Editor as Unity. They can attach scripts on each objects.

As of October 2020, v3.1.2 is an official release version. It works on your web browser via Internet.
Babylon.js Editor
v4 beta is also provided. It is a strong updated version. I highly recommend to use v4 even though it is beta.

Top view of Babylon.js Editor v4

There are two environments for Babylon.js Editor. One is an electron based application running on Windows, MacOS and Linux. The other is running on web browser. Official documents recommends the electron based application.

Note: It is highly recommended to use the desktop app as you'll get access to the local file system to save your projects.

ref : Getting Started - Babylon.js Documentation

3. How to make environment of Babylon.js Editor v4.0

As of October 2020, you should get electron based apps from the repo below.

BabylonJS Editor v4.0.0 beta · BabylonJS/Editor Wiki · GitHub

Of course you can get source code and build it by yourself.

GitHub - BabylonJS/Editor at release/4.0.0

4. Basic usages

Babylon.js Editor v4 provides kindly documentations and sample projects.

Editor/ at release/4.0.0 · BabylonJS/Editor · GitHub

If you are a Unity developer, the name rule below will be useful.

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

The editor v4 provides feature of adding mesh, light, skybox and sound. Typescript based scripts are also available.

Usage of scripts on Babylon.js Editor v4

Here is the script template. "onInitialize", "onStart" and "onUpdate" are similar to Unity scripts.

5. A simple game sample repository

I think you'd like to know more about how to use the editor v4.
Don't worry! I introduce a simple ping pong game repo developed the editor v4.

Environment : Babylon.js Editor v4 beta7 or later

An example game developed by Babylon.js Editor v4

6. Typescript usages on the editor

6.1 keyboard operation

"@onKeyboardEvent" decorator is a key point of keyboard operation. The above code runs like this.

An example of keyboard operation on Babylon.js Editor v4

You can also use like this.

6.2 physics and collision detection

If you'd like to attach physics on objects, use "PhysicsImpostor". "applyImpulse" method adds force to objects.

"registerOnPhysicsCollide" and "unregisterOnPhysicsCollide" provides collision detection.

An example of physics and collision detection on Babylon.js Editor v4

6.3 GUI

The editor (v4 beta7) does not support GUI at the moment. It means that you need create your GUI via attached scripts. Text and image are showed as the following code.

An example of GUI on Babylon.js Editor v4

You can also refer the following official links.

Game GUI - Babylon.js Documentation

Use the Babylon GUI - Babylon.js Documentation

6.4 Calling other class's method

The editor's scripts configuration are similar to UnityScripts. Import other class as "import" sentence, call other class's public method.

6.5 running your workspace on your server

The editor (v4 beta7) does not support exporting workspaces as final productions. I think it'll be supported soon.

You can choose the following folder on your workspace top directory.

  • index.html
  • scenes (folder)
  • dist (folder)

Modify 1 line of index.html because "cannon.js" is loaded from "node_modules".

You can live server plugin if you use visual studio code.

If you're an AWS master, it may be helpful for you.

7. Conclusion

Babylon.js is a powerful framework and Babylon.js Editor v4 has a strong potential.
Babylon.js is also compatible with WebXR standardization. The framework is also useful for XR developers. I'd like to contribute combination of Babylon.js Editor and WebXR.

Let's enjoy Babylon.js life!


The blog post is based on the following posts in Japanese.
【2020/10/4追記】UnityのようにBabylon.jsコンテンツが作れる「Babylon.js Editor」が大幅アップデートしていたので使い方を調べてみました - CrossRoad
Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.1(ステージ作成、操作) - CrossRoad
Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.2(物理エンジン) - CrossRoad
Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.3(衝突判定) - CrossRoad
Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.4(GUIの追加) - CrossRoad
Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.5(得点加算、ライフ変更、テキスト表示) - CrossRoad
Unityライクの操作になったBabylon.js Editorで簡単なゲームを作ります Vol.6(サーバに格納して実行) - CrossRoad