Introducing Babylon.JS Editor v4.0

Hi folks!

I’m happy to announce the release of Babylon.JS Editor v4.0!
This editor has been remade from scratch and is now using the latest @babylonjs ES6 modules with WebPack.

The version 4 of the editor has been made to be more powerful and more extendable using the plugins system.

The editor is now fully based on Electron which offers a full access to the local file system. In other words, projects and workspaces can now be managed like we do with Unity and Unreal: using the file system directly. Thanks to Electron, it is now possible to write scripts using TypeScript (automatically watched by the editor) and debug using Visual Studio Code (or any other code editor which has support of remote debug).

Many thanks to all Beta & RC testers for all your feedbacks (@Limes2018, @jkeys, (too much to mention all :slight_smile:) and your time spent to make this Editor more powerful.

Main features

  • Workspace based to manage multiple projects
  • Import and edit meshes
  • Create and edit materials
  • Import and edit textures
  • Import and edit sounds
  • Create and edit particle systems
  • Attach scripts written using TypeScript to nodes in scene
  • Provides a plugin system so the editor can be extended
  • Play project inline in the Editor and debug using Visual Studio Code
  • Based on Babylon.JS v4.2.0

At startup, some sample projects are available (FPS and TPS) to play with and learn by practicing.

Beta features

Even if the release is official, some features stay in beta version due to the lack of tests and feedbacks.

  • Graph Editor (see sample project named “FPS using graphs”)
  • FBX support (today supports common features: animation tracks, skeletons, bones, materials, meshes).
  • Prefabs (use this feature only for tests and not in your main projects)

References

Website: http://editor.babylonjs.com/

Github: GitHub - BabylonJS/Editor: Community managed visual editor for Babylon.js

Documentation (will be transfered in doc.babylonjs.com): Editor/doc.md at master · BabylonJS/Editor · GitHub

Tutorial by @Limes2018: An introduction of a powerful development tool for Web applications: Babylon.js Editor - CrossRoad

WebXR example by @Limes2018: GitHub - flushpot1125/WebXR_VRController_Editor_template

Plugin example by @jkeys: GitHub - electronic-caregiver/babylonjs-editor-publish-plugin: a plugin to serialize the active scene and publish to a cloud provider (AWS currently supported)

Downloads

Next Incoming features

  • Transfer documentation to the official Babylon.JS documentation
  • Rework assets management to be workspace-based instead of project-based (like Unity and Unreal do)
  • Finalize graph editor
  • Finalize prefabs system
  • Add animations editor
  • Add support of Babylon.JS v5
  • Add painting tools
    • Decals
    • Foliage / thin instances
    • Terrain elevation / material painter

Demo

There are still no advanced demo but you can try out the following (no mobile support) which is the result of a sample project: Babylon.js Generated Template

An advanced demo is still under development and will mainly feature (without using any 3d modeling software):

tps

Conclusion

As usual, don’t hesitate to provide feedbacks and feature requests!
Documentation is still work-in-progress (especially for plugins system) and will be fully available progressively.

9 Likes

This is simply AWESOME! You can be proud of such an achievement @julien-moreau

YES!

Hey @julien-moreau !

Let me say great awesome!! Congratulation!!
I’m glad to contribute for Babylon.js Editor as providing tutorials.
I’d like to continue to do it !

1 Like

It so cool! New editor is awesome! You are rock guys! :heart:

I admire the enormous effort you have put into the editor. An award is within reach… but it does not work on my computer (windows 10) :frowning:

I created a simple scene, saved the project
image

clicked on run… I get only a blank screen and a lot of warnings and some errors

Hi @julien-moreau !

Here is an article for Babylon.js Editor v4 introduction in Japanese.
I’ll share it for developers in Japan!

Babylon.js Editor v4.0の公式版がリリースされました - CrossRoad (crossroad-tech.com)