A brief summary of Babylon.js tooling
I wanted to seize the opportunity of this article to share with you a summary of all the great tooling the Babylon teams (both JS and native) and community are creating together to help developers and designers to create great 3D experiences.
All of these tools are supporting our guiding philosophy that we described in this article.
Sandbox
Where: https://sandbox.babylonjs.com
The first tool is also probably the simplest. The sandbox is literally the viewer tool for Babylon.js. You can drag and drop any kind of supported scenes (glTF, babylon, OBJ, STL) and display it right into your browser.
The sandbox comes with some neat tools like
- Direct url loading (so you can use it inside an iFrame or a webview):
https://sandbox.babylonjs.com/?assetUrl=https://models.babylonjs.com/boombox.glb
- Direct integration with the Inspector (That I will cover later).
- Ability to change the environment (either by clicking on the tiny globe in the tool bar or by simply drag ’n’ dropping a new .env or .dds file to the sandbox)
The sandbox was recently rewritten using React to make it more flexible for future contributions.
Playground
Where: https://playground.babylonjs.com/
The playground is my favorite place to debug and learn about Babylon.js.
You can code on the left and simply see the result on the right. Dead simple. And extremely useful to debug. This is the mandatory place to go if you want to ask a question or report an issue on our forum. Just go to the Playground, save your code using the save icon to get an unique url that you can share with others (like https://playground.babylonjs.com/#ZDAS2B).
Please note that the unique urls are read-only (immutable). Every new save will simply add a version to it: https://playground.babylonjs.com/#ZDAS2B#1.
The Playground has a lot of cool options (like downloading an independent html page for your current code) as well as a strong connection with the Inspector.
We are currently working on porting it to React to ease external contributions as well.
Inspector
Where: Integrated into other tools or anywhere in your scenes when you call scene.debugLayer.show()
The Inspector is the ultimate tool to analyze and debug a scene. We constantly add new editors there (like the sprite editor or the particle editor).
There are tons of features packed into the Inspector so I will probably simply recommend you to explore it.
We started the documentation already but the code is moving faster than the documentation and some features are not yet documented (I’m looking at you PirateJC ;) ).
Forum
Where: https://forum.babylonjs.com/
This is your home! Go there, share your thoughts, ask questions, provide answers. If you asked me what is the strongest feature of Babylon.js or Babylon.Native, I would certainly answer: Our community! And please don’t just take my word for it, try it and you will be amazed.
Documentation
Where: https://doc.babylonjs.com/
I know that developers LOVE to read documentation so we tried to provide the best we can.
PirateJC is actually currently working on improving the user experience and he will probably talk more about it soon.
Please note that you can obviously search inside documentation articles but also into the list of samples and even better inside all the Playgrounds!
So you are looking for a code example of how to use shadows? This is the place to go: https://doc.babylonjs.com/playground/?code=shadows
Node Material Editor
Where: https://nme.babylonjs.com/ or when editing a NodeMaterial object inside the Inspector
The Node Material Editor is the new member of the team. It lets you visually create materials to apply to your meshes.
I had a lot of fun creating the UI and honestly it is really fun to play with shaders in a visual way.
The Node material Editor lets you save unique urls as well so it is really easy to share your creations: https://nme.babylonjs.com/#IFJ86Q#9
Exporters
Where: In Autodesk Maya and Autodesk 3ds Max.
The team is also maintaining the .glTF and .babylon exporters for 3ds Max and Maya.
We also have extensive documentation on how to use them:
- https://doc.babylonjs.com/resources/3dsmax
- https://doc.babylonjs.com/resources/3dsmax_to_gltf
- https://doc.babylonjs.com/resources/maya
- https://doc.babylonjs.com/resources/maya_to_gltf
Community driven
I also wanted to highlight the awesome job done by the community through 3 gigantic projects (open to contributions of course).
Editor
Where: http://editor.babylonjs.com/
Julien Moreau is doing a fantastic job working on his editor. He is constantly adding new features and new UI to let develop a complete experience within your browser!
Documentation: https://doc.babylonjs.com/resources/getting_started
Unity Exporter (Babylon Toolkit)
Where: https://www.babylontoolkit.com/
Speaking of a fantastic project, please welcome the Babylon Toolkit (aka Unity Exporter) done by MackeyK24.The toolkit is(used inside Unity3D) designed to provide a small subset of the unity editor design time features to export babylon content scene files.
Documentation: https://doc.babylonjs.com/resources/intro
Blender Exporter
Where: https://github.com/BabylonJS/BlenderExporter
JCPalmer is maintaining a great exporter for .babylon files from Blender.
A lot of features of Blender are directly available in your realtime scene so I definitely encourage you to read the documentation: https://doc.babylonjs.com/resources/blender
That’s all folks!
Hope you will find these tools useful! They were all crafted with love and all open source. So please feel free to contribute on any of them!
See you soon on the forum.
