Exporting 3D content for Babylon.js

Image for post
Image for post

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

Image for post
Image for post

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)

Image for post
Image for post

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!

Image for post
Image for post
The interface for the Babylon.js 3ds Max exporter

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.

Image for post
Image for post
Click the edit button on the bottom right corner to launch inspector, and select the ‘GLTF’ tab

Afterwards, you can launch the inspector, go to the glTF tab, and export as glb, the binary format of glTF.

Image for post
Image for post
From the ‘GLTF’ tab, select ‘Export GLB’

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.

Image for post
Image for post
NiftyWorld using a glTF file for the level

Where can I find the exporters?

The Babylon.js exporters can be found and downloaded from here.

Happy exporting!

Kacey Coley — Babylon.js Team

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store