Welcome to the Babylon.js Editor

Hello the community! :)

It’s time to present a new project recently released (v0.8): the Babylon.js Editor.

This editor is a Web Application providing several tools to help artists (and developers) to debug, animate, configure and export Babylon.js scenes. In other words, this editor provides the optional final stage (in addition to the Babylon.js exporters of 3ds Max, Blender, Unity3D, etc.) to designers before they release their final scenes.

Feature demo

Michel Rousseau (@rousseau_michel) recently released his awesome scene named “Sponza”. In fact, if you walk into the scene, you’ll probably find some particle systems: these particle systems were created and edited by Michel Rousseau using the editor. Indeed, Michel Rousseau is the first beta tester of the Babylon.js Editor until the version 0.8. Many thanks to him! :)

The Sponza Demo

The Ruins demo

A special demo has been developed to show the editor features, especially animations and particle systems. Only the camera was animated using 3ds Max (thanks to Michel Rousseau). This demo will be released soon on the Babylon.js home page but you can either have fun by watching this video :)

Available Features (will be updated in future)

  • Create and edit particle systems
  • Create and edit animations
  • Create and edit lens flares systems
  • Create and edit materials (complete materials editor will come in version 1.0)
  • Save projects on OneDrive (Drop Box will come in future versions)
  • Deploy project template on OneDrive (Drop Box will come in future versions)
  • Cinematics Editor
  • Scene graph view
  • Create and edit post-process (soon exported in final .babylon scenes)
  • Create and edit render targets (soon exported in final .babylon scenes)

Video demo

Let’s introduce the Babylon.js Editor with a video: create animations, particle systems and lens flares

Starting quickly with the Babylon.js Editor

The editor is available here: http://editor.babylonjs.com/
Once you started the editor, you are able to use it with an empty scene.

Workflow

The workflow with the editor is simple:

On the right side, you’ll find the scene graph. You can quickly access to the meshes, lights, cameras, particle systems, sounds, render targets and lens flares systems.

And, on the left side, you’ll find the edition tools that allow you to configure the objects previously selected in the scene graph. In the previous screenshot, the scene was selected and you are now able to edit the scene.

Finally, on the top, you’ll find the main toolbars to manage your project, add objects in the scene and play your cinematic/scene.

Load a Babylon.js scene

To load a Babylon.js scene (.babylon), just drag’n’drop, like the Sandbox, your scene with textures and sounds on the canvas. That’s all :)

Using the available tools

Using the animations editor

To create and edit animations of the selected object (if animatable), simply go to the “Animations” tab and select “Edit Animations”:

Let’s create an animation to animate the clear color of the scene. First, click on the “Add” button of the animations list. A window appears and you can now select the property to animate (here “clearColor”):

Just click “Apply” to create the animation. Now, you can add, remove and edit the keys of the animation. To modify a key, just select it in the keys list and replace the values (frame and/or value).

Note: The colors and vectors values are written using commas. Example: the Vector (X=0, Y=1.5, Z=2) is written “0, 1.5, 2”.

To remove animations, select some and click on the “Remove” button.

In fact, the animation will be played in 24 frames per second. You can, of course, change the FPS value in the scene toolbar (the new value will be applied on all animations of the scene).

To add keys, just click on the “Add” button of the keys list. To remove some keys, just selected keys and click on the “Remove” button.

Setting up cinematic mode

To set up the cinematic mode, you have to select the objects you want to animate at launch (when clicking on the toolbar button “Play”). Select the “Edit” menu in the main toolbar and click “Animate at Launch…”.

Select the objects to animate (here the scene):

Once you selected the objects, a timeline appears in the editor. You are now able to navigate though frames only using your mouse:

Using the particle system editor

Using the editor, you can create and edit particle systems. To create one, simply go to the “Add” menu of the main toolbar and select “Add Particle System”:

A window appears asking for an emitter. Indeed, in Babylon.js a particle system has an emitter which is typically a mesh. If you click “Add” without selecting an emitter, the editor will create a dummy emitter for you:

To edit the particle system, simply select it in the scene graph:

You can now modify the properties of the particle system, including textures. To edit the particle system separately from the scene (to train and not necessary apply the modifications), you can click the button “Edit…” which will open a new window with the particle system alone.

You can either click “Apply” to apply your modifications.

Saving your project

Finally, let’s save your project and keep your configuration. There are 2 ways:

  • Save manually to a file
  • Save the project directly on OneDrive

Save manually

To save manually, just select the menu “Export” in the main toolbar:

A window appears with the exported project. Just copy/paste the text to a file with extension “.editorproject”.

Save directly on OneDrive

To save time and get a better workflow, you can use your OneDrive storage. Just select the menu “Save on OneDrive” in the main toolbar:

A window appears trying to connect to OneDrive. Because the editor must have an access to your OneDrive storage, you should accept the consent. Once you accepted, you can browse your OneDrive storage and select the folder where to save the file. Finally, click on “Choose” to save the file.

For a perfect workflow, you should put your Babylon.js scene (with textures and sounds) in a OneDrive folder and the save the project in this folder.

Load a saved project

To load a saved project, simply drag’n’drop the project file (“.editorproject”) with the associated scene, and that’s all :)

Conclusion

This editor comes as an optional stage and is related to the main tools like 3ds Max, Blender, Unity3D etc. So, everything will not be saved if you can do the same thing in your main tool. Examples:

  • Standard materials can be modified in the editor but will not be exported. This feature is mostly used for debug purposes since you can configure the materials in your main tool
  • As for the standard materials, you can also edit lights in the editor but they will not be exported

In other words, in this example, only the animations, lens flares, and particle systems will be exported.

What is clearly exported?

  • Project configuration (FPS, animated at launch)
  • Particle systems
  • Lens flares
  • Post-processes
  • Animations
  • Skies
  • Render target textures
  • Reflection probes (not yet serialized in .babylon files)
  • Materials from Materials Library (soon in version 1.0)
  • Actions using Actions Builder (soon in version 1.0)
Show your support

Clapping shows how much you appreciated Julien Moreau-Mathis’s story.