Loaders

In Babylon.js, loaders are utilities that allow you to load and import various types of 3D assets (like models, textures, and animations) into your scene. They handle different file formats, such as .obj, .fbx, .glb, and others, and provide a convenient way to load complex assets that would otherwise require manual parsing and processing.

Types of loaders

Babylon.js provides built-in support for a variety of popular 3D file formats, and the loaders are responsible for converting these formats into native Babylon.js mesh and scene structures that you can interact with in your 3D scenes. These loaders handle everything from textures, meshes, and animations, to skeletal rigs and materials, ensuring that assets are properly converted into a form that Babylon.js can render.

GLTF/GLB Loader

This loader supports meshes, materials, lights, cameras, and animations, making it highly versatile for 3D asset sharing and real-time use. Formats:

GLTF (GL Transmission Format) and GLB (Binary format of GLTF) are modern, efficient formats widely used for 3D content. Babylon.js supports both formats through the GLTFLoader.
GLTF is a JSON-based format, while GLB is a binary format that contains all resources (meshes, textures, animations, etc.) within a single file.

OBJ Loader

Babylon.js includes the OBJFileLoader to load .obj files, which can be used for simple meshes without materials or animations. Format:

The OBJ format is a simple, widely supported format for representing 3D models. It is often used for static meshes without animations.

FBX Loader

To use FBX in Babylon.js, you need to enable the FBXLoader plugin. Format:

FBX is a popular format for animations and models, especially for character models and more complex scenes. It includes support for animations, textures, meshes, and other scene elements.

STL Loader

It is mainly used for static meshes and does not support complex materials or animations. Format:

The STL (STereoLithography) format is commonly used for 3D printing, and Babylon.js provides a loader for this format (STLFileLoader).

Other loaders

Babylon.js also supports other formats like 3DS, Ply, and Collada (DAE) with specific loaders, although support for these formats may be limited or less common than the major formats like GLTF. Some of these loaders may require additional libraries or plugins to function.

Installation

To deal with loaders, first, you’ll need to install the @babylonjs/loaders dependency:

npm install @babylonjs/loaders --save

Dynamic loaders import

The preferred way to bring in the loaders is via:

App.tsx

import { registerBuiltInLoaders } from "@babylonjs/loaders/dynamic";
// ...
registerBuiltInLoaders();

This will register all supported loaders, but internally uses dynamic imports to only download/load a specific importer (e.g. glTF, splat, etc.) when a model of that type is first loaded.

Static loaders import

You can also register all loaders statically (e.g. they will all be included in your primary bundle). This is not recommended, but can be done via:

import '@babylonjs/loaders';

You can also register a specific loader statically. This is not reommended, but can be done via:

import '@babylonjs/loaders/glTF';
// other loaders ...

Learn More

For other loaders and customizations, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/importers/loadingFileTypes.

Hooks Earcut