API
Features|
Deep Dive|
Exporters|
glTF Exporter

glTF Exporter

Overview

The glTF Exporter allows Babylon scenes to be exported to glTF 2.0, an open-standard file format for transmitting and loading 3D scenes. It comes in two variants.

  • glTF (.gltf), which uses JSON to describe the scene hierarchy. It may reference both external binary files (.bin) that contain geometry and animation data, as well as image files (.png, .jpg) that contain texture images.
  • GLB (.glb), which packages all data, including scene hierarchy, geometry, animation, and image data, into a single binary file for easier distribution.

Installation

CDN

To quickly use the glTF Exporter on a page, import the compiled UMD JavaScript from the Babylon CDN like so:

See the Pen glTF Exporter - Using the CDN by BabylonJS.

NPM

When ready to build and bundle an app, use the @babylonjs/serializers ES6 package:

npm install @babylonjs/core @babylonjs/serializers
import { GLTF2Export } from "@babylonjs/serializers";


// Scene setup code...


GLTF2Export.GLTFAsync(scene, "fileName").then((data) => {
  console.log("Exported GLTF:", data.files["fileName.gltf"]);
  data.downloadFiles();
});

Basic Usage

To download a .gltf along with its accompanying binary and image files:

GLTF2Export.GLTFAsync(scene, "fileName").then((gltf) => {
  gltf.downloadFiles();
});

To download a .glb, simply replace the GLTFAsync static function with GLBAsync:

GLTF2Export.GLBAsync(scene, "fileName").then((glb) => {
  glb.downloadFiles();
});

Export options

The glTF Exporter accepts an optional options parameter with various functions and properties.

const options: IExportOptions = {
  // Function to indicate whether a Babylon node in the scene should be exported or not.
  shouldExportNode: (node: Node): boolean => {
    return node.name === "myCamera" || node.name === "myMesh" || node.name === "myLight";
  },
  // Function to indicate whether an animation in the scene should be exported or not.
  shouldExportAnimation: (animation: Animation): boolean => {
    return animation.name === "myAnimation";
  },
  // The sample rate to bake animation curves. Defaults to 1 / 60.
  animationSampleRate: 1 / 60,
  // Begin serialization without waiting for the scene to be ready. Defaults to false.
  exportWithoutWaitingForScene: false,
  // Indicates if unused UV vertex attributes should be included in export. Defaults to false.
  exportUnusedUVs: false,
  // Remove no-op root nodes when possible. Defaults to true.
  removeNoopRootNodes: true,
  // The mesh compression method to use. Defaults to "None".
  meshCompressionMethod: "None",
};


GLTF2Export.GLTFAsync(scene, "fileName", options);

Details

  • shouldExportNode: Sometimes, you may need to exclude geometry from export, such as the skybox. You can define a callback that accepts a Babylon.js node as an argument and returns a boolean specifying whether the node should be exported.
  • removeNoopRootNodes: When importing a glTF asset into a left-handed scene (the Babylon default), the glTF Loader inserts the imported asset under a brand new node at the scene's root. This node helps to quickly convert the asset's right-handed coordinate system (the glTF default) to the scene's left-handed one. If you'd like to keep this root conversion node on export, or keep any other "no-op" root nodes, you can specify true.
  • meshCompressionMethod: For scenes with complex or large models, it may be preferable to compress their geometries for smaller export sizes. You can specify "Draco" to compress all geometries in the exported scene using the Draco compression scheme.

Loading referenced CDN files locally

If exporting a scene using the "Draco" mesh compression option, the glTF Exporter will request additional files from cdn.babylonjs.com by default. If you want to deliver these files locally (e.g. for GDPR compliance), you can set the DracoEncoder.DefaultConfiguration object to use local files:

import { DracoEncoder } from "@babylonjs/core";


DracoEncoder.DefaultConfiguration = {
  wasmUrl: "/babylon-draco-files/draco_encoder_wasm_wrapper.js",
  wasmBinaryUrl: "/babylon-draco-files/draco_encoder.wasm",
  fallbackUrl: "/babylon-draco-files/draco_encoder.js",
};

Be sure to download the files first (from https://cdn.babylonjs.com/[FILENAME]) and put them in a local path (public/babylon-draco-files, in this case).

List of supported features

Key: ✔️ Full support ⚠️ Partial Support ❌ No Support

Scene
  • ✔️ .gltf Export
  • ✔️ .glb Export
  • ✔️ Camera Export
  • ✔️ Punctual Lights Extension KHR_lights_punctual
Meshes
  • ✔️ Multiple UV sets
  • ✔️ Morph Targets
  • ✔️ Skinned Meshes
  • ✔️ Instancing
  • ✔️ 8 to 32 bit Vertex Data
  • ✔️ Buffer View and Accessor Reuse
  • ✔️ GPU/Thin Instancing Extension EXT_mesh_gpu_instancing
  • ❌ Mesh Quantization Extension KHR_mesh_quantization
  • ✔️ Draco Compression Extension KHR_draco_mesh_compression
    • There is currently no built-in support for roundtripping Draco-compressed glTF assets.
  • ❌ Meshopt Compression Extension EXT_meshopt_compression
  • ❌ Pivot points
Materials
Textures
Animations
  • ✔️ Node Translate, Rotate, Scaling animation
  • ✔️ Skeletal Animation
    • As skeletons in glTF are represented as collections of nodes in the scene, skeletal animation is exported as TRS animation
  • ✔️ Morph Target Weight Animation
  • ✔️ Multiple animations
    • In a scene, AnimationGroups will be exported as a single glTF Animation.
    • In a scene, Animations not associated with an AnimationGroup will be exported as a single glTF animation.
  • ❌ Animation Pointer Extension KHR_animation_pointer
Metadata
  • ✔️ Extras Data
  • ❌ XMP Metadata KHR_xmp_json_ld
  • ⚠️ Asset Info
    • Copyright field specification not supported.