Introducing Babylon.JS Editor v4.0

Announcements
,
1

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

editor-screenshot.PNG
editor-screenshot.PNG3840×2110 2.01 MB

  • 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.

43 Likes
2

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

1 Like
3

YES!

1 Like
4

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 !

2 Likes
5

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

2 Likes
7

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)

1 Like
8

Hi @Necips
Warnings are just related to source maps. For the loading error it looks like you haven’t installed the dependencies. Can you ensure that you have NodeJS installed and accessible globally via the “node” command? :slight_smile:

@Limes2018 you rox !!!

1 Like
10

This looks amazing can’t wait to try it out!

11

This looks really good so far :slight_smile:

13

@julien-moreau thanks for all the effort and the kind support :smiley:

14

Hey @julien-moreau got a question about the v4 babylon.js editor. Is there support for creating a navigation mesh in the editor?

1 Like
15

Hey @Mr_SquarePeg

Absolutely not but this is in my todolist, if you talk about recastjs :slight_smile: the main difficult part will be to find a way to handle serialization and parsing to be easily accessible in scripts

1 Like
16

It’s a great job, the editor is modern, clean. Maybe I would try to create a game with it to test it thoroughly. I hope to find time in a few months, because at the moment I am overflowing with furniture manufacturing work. But I can’t wait to use the editor.

Can we use JavaScript script? I’m not very comfortable with typescript. Is that it might be possible. Are there scripts ready as a basis? I would probably have other questions in the future.

Anyway congratulations, it’s a lot of work what you have done …

18

Hi, @Necips
I’m an author of the example. Thanks for finding it!

3 Likes
19

This editor is awesome!!!

1 Like
20

Very cool stuff!

1 Like
21

@julien-moreau I have a question. Is there somewhere a timetable with timings?

Thank you so much for your fantastic work!

22

Hi @Klm24 thanks !

I’m not sure to understand the question, do you mean milestones like these one Babylon.JS has? Milestones - BabylonJS/Babylon.js · GitHub

1 Like
23

Yes, sorry! I meant a timing for the editor milestones.

24

I have planned to, this is right that at the moment I have only issues Issues · BabylonJS/Editor · GitHub where you can only have an overview of the incoming features

I’ll definitely work on having it :slight_smile: