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

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.

Sandbox
Sandbox

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

The playground is my favorite place to debug and learn about Babylon.js.

Playground
Playground

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

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

Inspector
Inspector

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

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

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

Playground searches
Playground searches

Node Material Editor

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

Yeah it is a monster:)

Exporters

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:

Community driven

Editor

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)

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

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!

See you soon on the forum.

Deltakoshhttps://www.twitter.com/deltakosh

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/