Exporting 3D content for Babylon.js
When building 3D applications, an important aspect is being able to import high quality 3D assets. Babylon.js allows you to load several 3D file formats. This article discusses how you can create your own content that can be imported into Babylon.js.
Supported 3D File Formats
Babylon.js currently supports importing three file formats: glTF, Wavefront OBJ, and Babylon.js file format.
glTF
glTF is an open source 3D file format designed with runtime usage in mind. The format supports physically-based materials as well as node and skeletal animations. Many exporters are available for 3D authoring tools. One major advantage of the format is that it can be used on the web as well as in mobile and desktop applications.
glTF is the preferred 3D file format for Babylon.js, though there are times where it is appropriate to use the Babylon.js file format, as explained below.
Babylon.js file format (.babylon)
Babylon.js has its own file format with the extension .babylon. This format can handle the most functionality out of all supported formats but is limited in that it can only be loaded in Babylon.js. However, we provide several exporters, mentioned below, that allow the creation of these files from DCC tools. It’s preferable to use the glTF file format, unless there is certain functionality that is not yet supported, such as light maps or particle systems.
Wavefront OBJ
Wavefront OBJ is a simple 3D file format that can store 3d geometry as well as materials with a .mtl file. Many 3D authoring tools support exporting to this file format. It does not handle animations or physically-based materials, but it is capable of transferring mesh data.
Exporters
Babylon.js has exporters available for 3ds Max, Maya, and Blender. The 3ds Max exporter supports 3ds Max 2015 and higher, and exports to glTF as well as to the Babylon.js file format. The Maya exporter supports 2017 and higher, and exports to glTF as well as to the Babylon.js file format. The Blender exporter supports Blender 2.79 and only exports to the Babylon.js file format. However, the Khronos glTF-Blender-Exporter can be used to generate glTF files from Blender so they can be imported into Babylon.js.
If an exporter is not available from Babylon.js but it supports exporting to glTF or the obj file format, then they can also be imported into Babylon.js!
Babylon.js Sandbox
The Babylon.js provides a convenient way to view 3D models and convert them to glTF. For example, the Flight Helmet was created using the Maya exporter. First, navigate to sandbox.babylonjs.com. Next, drag and drop your 3D file (and associated textures) into the sandbox. Your model should then load and appear in the viewport.
Afterwards, you can launch the inspector, go to the glTF tab, and export as glb, the binary format of glTF.
Now your model can be imported as a glb asset!
My application does not have a Babylon.js exporter
If your application supports exporting to the glTF or obj file formats, and there is no Babylon.js exporter available, you can import the file into Babylon.js and use it in your application. For example, in the multiplayer game, NiftyWorld, an obj file was authored in Google Blocks, converted to glTF using the sandbox, and finally imported and used in the game.
Where can I find the exporters?
The Babylon.js exporters can be found and downloaded from here.
Happy exporting!
Kacey Coley — Babylon.js Team
