Babylon.js Editor and Electron

A new story began with the Babylon.js Editor since it is now able to run as an embedded app in an Electron app :)

@sevan, from the Babylon.js Core Team, experimented the editor with Electron and finally shown us that it is easily possible: only 20 minutes to package the editor (including Babylon.js) into an Electron app! Starting from this point, some POCs were realized to show the power an embedded app such as the editor.

Note: this article is special for Michel Rousseau since the POCs are all related to him :)

The POCs

Automatically reload a scene when changed

The first challenge was to make the editor able to automatically reload the scene when the artist re-exported it. Considered as a challenge, the Node.js APIs were extremely powerful and only few lines of code were needed.

Now, at each exportation, the editor is able to reload the scene (keeping the last camera position, target, etc.).

Live texturing with Photoshop CC

Another challenge was to offer the possibility to connect the editor and photoshop together. Why: Live texturing! The advantage of live texturing is that the artists do not need to reload the scene to see their modifications on their 3D models. So, they can see the result in realtime in the editor!

Adobe Photoshop CC offers a way to create plugins using JavaScript. This way has a name: Generator. Generator is using Node.js to run these JavaScript plugins. So, it looks like we share the same APIs between the Electron app and Generator!

In fact, the editor plays the role of a server, where Photoshop is a client that sends buffers (via sockets) to the server (the editor).

The demo video

In the future

Electron offers infinite possibilities to an application such as the editor, a lot of new useful features may come with the editor in the future.

Can wait for ideas & development and enrich the editor thanks to Electron!

Installing the photoshop plugin

To be able to connect to photoshop and live texture, you just have to install the photoshop plugin available at in the Photoshop’s plugins folder typically located at YourApplications/Abode Photoshop/Plug-ins/Generator/.

The folder “Photoshop Plugin” is the folder I created which contains the editor plugin’s files:

Now you can restart photoshop and connect using the editor :)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.