General Workflow

First of all, welcome guys!
I started with Babylon and it’s super awesome, no doubts. I’m just struggling a little bit with the overall workflow including Editor (desktop & web) and Sandbox. After digging through the tutorials and forum I couldn’t find the exact answer I need. So my questions are:

I want to create this kind of workflow:

  • create a scene in the editor (Desktop App)
  • export as a web project
  • import and do final work
  • if I need to change something -> export web project to editor (Desktop App) and do changes
  • import again as web project
  • and so on -> switching from Desktop App to Web

Is this how it’s suppose to be? (I hope it is)
What role plays the Sandbox in all of this?

Why I can’t import a project which I did in the Desktop App into the Web App?

I guess the Web App editor uses webGL and the Desktop App editor uses DirektX/OpenGL? Could it be that the result looks different on with the exact same scene?

Thanks a lot for reading.


Invoking the Editor’s author @julien-moreau

1 Like

Hey @mingmekka!

Good question and that’s absolutely possible :slight_smile:
I guess you have already tested the Editor but in version 3.2.0. I’m 100% focused on releasing the version 4.0.0. The version 4.0.0 has been made to be more flexible/powerful/stable

You can find the downloads of 4.0.0 here: BabylonJS Editor v4.0.0 beta · BabylonJS/Editor Wiki · GitHub
And the documentation still WIP: Editor/ at release/4.0.0 · BabylonJS/Editor · GitHub

In your case, you have 2 possibilities:

  • Work with the default workflow provided by the editor: use a workspace and work with the proposed project hierarchy. By default it uses webpack with the new ES6 modules of babylon and the project is fully open to include external libraries/custom webservers etc.
  • Simply use the Editor as a “scene/level designer” and use the outputed scenes in your project elsewhere. To do that, you can copy/paste all generated scenes located at “my_workspace/scenes/*”. You can generate each scene using the button “Generate” in the toolbar. Or right-click the button “Generate” each time you want to export a scene and select “Generate Scene As…” then choose the target directory.

The Editor v4 is available only in desktop mode and uses WebGL (it is an electron app). I think you had different results because you were using the Editor v3 it wasn’t up to date with the latest babylonjs versions. The Editor v4 will be released with the version 4.2 of babylon.js.

I hope to answer well your questions! Don’t hesitate if you have any other question or feedbacks :slight_smile:

Hey Julien,

thanks a lot for the tips. Will try out v4 asap. Surely I’ll get to you with more questions :slight_smile:
Awesome Job with the editor, dude!!!


Hey Julien, V4 editor looks great and feels much smoother and stable, great work dude!!!
I’ve collected some questions, hope it’s not too much.

  1. Sandbox.
    Is it possible to open the Sandbox for the whole scene inside the editor? Just like with double-click on an asset.

  2. On some assets the Sandbox seems going crazy with far/near planes and scale. If I open the flightHelmet demo, I can’t see it cause it’s to huge, I guess? After expanding the near/far plane to something like 0,00001 and 10000,0 and scale down the object to 0,01 (xyz) I can see the object but can’t move the cam without loosing it, cause the cam movement is way to fast. But I think it’s more a Sandbox thing.

  3. Cascaded Shadow Mapping.
    When using this option, it seems like that I can’t change the Lambda to something like 0.99 without my shadows getting low quality. With Lambda on 1 it works great, but I need a little bit more distance. But everything less then 1 is not working and the shadows stay low quality.
    Also after turning on Contact Hardening Shadows nothing really changes. When I find out how to attach pictures in this forum, I will add some.

  4. Build Project / Generate Scene.
    Is it right that “Generate Scene” is for saving a scene to open in another editor?
    “Build Project” is for building a web project if someone shares the scene with you?
    So I don’t need to do any of them it if started my project from scratch and have all the resources? Just saving.

  5. Access parameters in code.
    After finish work in the editor, can I access the values of my object somewhere in the code? Something like changing the direction of my light. I couldn’t find the objects in the files. I assume that this information is packed in one of the “scene. babylon” files?

Sorry for this long post and also probably to some stupid and obvious questions.

Best regards,

Hey @mingmekka! Thanks I’m happy that you like it!!

Of course, there is never stupid questions :slight_smile:

My answers:

  1. The editor has no relation with the sandbox. To preview a scene (in .babylon or gltf format) you can double-click the asset in the editor (in “meshes” assets). A window will open that loads the scene with its materials, textures, etc. you can take a look at “Examining the asset” here: Editor/ at release/4.0.0 · BabylonJS/Editor · GitHub Or, once you have exported the scene by clicking on the button “Generate”, you can drag’n’drop the generated scene with the “files” folder located at “workspace_path/scenes/scene_folder”.

  2. In the editor, once you have added some assets in your scene, you can edit bot “editor camera” and “cameras” you instantiated in your scene. Will be able to change the speed, panning sensibilities etc. To edit the editor camera, go to the toolbar -> edit -> editor camera. That will allow you to adapt the camera used to edit the scene in the editor.

  3. In the editor I can’t reproduce, once a cascaded shadow generator has been created, I can modify the lambda value. Don’t forget that lambda will be related to the minZ and maxZ of the current camera (editor camera or camera you instantiated)

  4. Right, the “Generate Scene” function is to generate the final .babylon scene file located at “workspace_path/scenes/scene_name”. Wehre “build project” will perform a new webpack build. Building the project is useful only if you use the editor to fully manage your project.

  5. Yes, all objects are available in the .babylon file(s). You can use the Babylon.JS APi to get objects identified by names (like scene.getLightByName(“light_name”) or scene.getMeshByName(“mesh_name”) etc. Using the Editor you can attach scripts to objects (lights, cameras, meshes, etc.). Explained here: Editor/ at release/4.0.0 · BabylonJS/Editor · GitHub but you’ll have to consider using the editor if you want to use that kind of feature. The “Build Project” step will typically register and generate code that will allow to easily run these scripts when you run your game/application in a web browser.

If something is not clear or you have other question, don’t hesitate! :slight_smile:

1 Like