
If you have not already installed the babylon plugin for 3DS MAX, you can find all instructions [here](/features/featuresDeepDive/Exporters/3DSMax) as well as general information about the plugin.

With this plugin, you can also export your project to the glTF 2.0 format (https://github.com/KhronosGroup/glTF/).

All you need to do is choose **gltf** as **Output format**.

![glTF export window](/img/exporters/3DSMax/14_gltf_export_window.webp)

The plugin exports to Babylon format before converting it to glTF.
The main exported files are the .gltf and .bin files.

To export to a single .glb file, choose **glb** as **Output format**.

## Features

## Exported features

Since the plugin first exports to Babylon and then converts it to glTF, glTF features are a subset of the [Babylon ones](/features/featuresDeepDive/Exporters/3DSMax#features).

- _Cameras_

  - zfar
  - znear
  - yfov (Perspective camera)
  - Position / rotation (from nodes)

- _Meshes_

  - Geometry: position, normal, color, texture coordinates (2 channels)
  - Position / rotation / scaling (from nodes)
  - Skin
  - Instances
  - Morph targets
  - Animations: bones, morph weights

- _Nodes_

  - Hierarchy
  - Position / rotation / scaling
  - Animations: position, rotation, scaling
  - Custom attributes

- _Materials_

  - Standard material (converted to PBR, see below)
  - Physical material (PBR)
  - Standard Surface Arnold material
  - Base color and alpha
  - Metalness and roughness
  - Emission, ambient occlusion
  - Bump mapping
  - Multi-materials
  - Double-sided materials
  - Unlit
  - Backface culling
  - Opacity/Transparency mode
  - Custom attributes
  - RGB Multiply map

- _Textures_

  - Wrap mode (Clamp, mirror, repeat)
  - magFilter, minFilter
  - Image format conversion to jpg / png
  - Texture transform

- _Animations_
  - Export without animations
  - Export animations only

## Conversion Standard to PBR materials

3DS MAX Standard materials are converted to PBR materials based on their diffuse, specular, opacity and glossiness.

[The complete algorithm is detailed here](https://github.com/bghgary/glTF/blob/gh-pages/convert-between-workflows-bjs/js/babylon.pbrUtilities.js)

[A demo is available here](https://bghgary.github.io/glTF/convert-between-workflows-bjs/)

Note that the conversion duration scales with images size and may have a severe impact on export duration.

## PBR materials

The physical materials are exported to glTF format as PBR materials.

The relevant parameters are highlighted below and described in the following sections.

![3DS MAX physical material parameters](/img/exporters/3DSMax/18_3dsmax_physical_materials_parameters.webp)

Remember that in 3DS MAX, when a map is assigned to a parameter, the basic parameter value is ignored. This behavior is preserved when exporting.

## Base color and Transparency

Only the color of base color is used. The weight of base color is ignored.

Only the weight of transparency is used. The color of the transparency is ignored, as well as other parameters (depth, thin-walled, transparency roughness).

In glTF format, the transparency is expressed in alpha (alpha = 1 - transparency).

The base color RGB and the alpha A are merged together into a single color RGBA:

![glTF base color and alpha maps combined](/img/exporters/3DSMax/16_gltf_baseColor_alpha_combined.webp)

The 2 maps must have the same size to be merged successfully.

Note that the duration of this process scales with images size and may have a severe impact on export duration.

The basic parameter value is used as the default value when a bound map is not provided:

![glTF base color map and transparency weight combined](/img/exporters/3DSMax/17_gltf_baseColor_transparencyWeight_combined.webp)

## Metalness and Roughness

The metalness is used.

The roughness of the material is used. It can be inverted to mean Glossiness - this also affects roughness map. The IOR parameter is ignored.

The metalness and roughness maps are combined together:

![glTF metalness and roughness maps combined](/img/exporters/3DSMax/15_gltf_metallic_roughness_combined.webp)

In 3DS MAX, metalness and roughness maps are black and white images (R=G=B).

In glTF format, metalness is stored in blue channel, roughness in green.

The 2 maps must have the same size to be merged successfully.

Note that the duration of this process scales with image size and may have a severe impact on export duration.

As with base color and transparency, the basic parameter value is used as the default value when a bound map is not provided.

## Emission

The exported emission color value is computed based on all 4 parameters: emission weight, color, luminance and Kelvin.

However, the exported emission color map is identical to the one specified in the generic map. This means that emission weight, luminance, and Kelvin **are not** used. The emission map is assumed to be precomputed.

## Ambient occlusion

The diffuse roughness map is used as ambient occlusion.

## Bump map

The bump map (or normal map) and its weight are used. A tangent-space normal map can be directly connected to the Bump input. Note that glTF does not support height maps. Connecting a height map may yield unexpected results. **Normal Bump map nodes are currently not supported**.

## Standard Surface Arnold material

The Standard Surface Arnold material is exported to glTF format as a PBR material.

The relevant parameters are highlighted below.

![3DS Max Standard Surface parameters](/img/exporters/3DSMax/standardSurfaceParameters.webp)

When exporting, if a map is assigned to a parameter, the basic parameter value is ignored.

## Base color and Transparency

In the _Basic Parameters_ and _Transparency_ sections, the base color weight, the base color and the transparency weight values are supported.
And you can use a map for the base color and the transparency weight (the base color weight map is not supported).

If you use a map for the base color, then the base color weight is overridden to 1 for the export.
Also if the base color map and the transparency map are used, they must have the same size in order to be merged successfully.

_Note:_ it is recommended to always set the base color weight to 1.

## Metalness, Roughness and Occlusion

In the _Specular Reflections_ section, the metalness and the roughness values and maps are supported.
If both maps are used, they must have the same size to be merged successfully.

In 3DS Max, metalness and roughness maps are black and white images (R=G=B).
But in glTF format, the metalness is stored in the blue channel and the roughness in the green one (the red channel is for the occlusion).
So during the export the metalness and roughness maps are merged in one map using their respective channel.

### Metalness and roughness

If you use one of the two maps, then the exporter creates a new map using the provided map and the value of the other parameter.

If you use two different maps, then the exporter merges them in one map.

### Metalness, roughness and occlusion all in one map

Alternatively, you can provide a single texture used in both _Metalness_ and _Roughness_ to set an extra attribute: Ambient Occlusion.

The Ambient Occlusion cannot be set in the Standard Surface material. Thus you cannot take it into account when rendering with Arnold.

However, this feature is exported, and you can hopefully use it in an engine of your choice, provided it takes it into account (Babylon does!). Since there isn't a dedicated channel for Occlusion, the trick is to use a single file for multiple purposes, called an ORM texture.

Such texture defines:

- the **O**cclusion in Red channel and is assigned to none of the material attributes
- the **R**oughness in Green channel and is assigned to the material _Roughness_
- the **M**etalness in Blue channel and is assigned to the material _Metalness_

![glTF ORM map](/img/exporters/3DSMax/ORM.webp)

In this case the exporter does not merge textures, but instead assumes the texture provided is already merged.

You can see how to get [a merged ORM texture here](/features/featuresDeepDive/Exporters/Maya_to_glTF#get-a-merged-occlusionroughnessmetallic-texture).

## Emission

In the _Emission section_, the emission weight and the emission color values are supported. But only the emission color map is supported.
If the emission color map is used, then the emission weight and the emission color values are ignored.

## Normal

In the _Special Features_ section, only the normal map is supported.

## What you should know

## Babylon properties

Most Babylon properties are not used when exporting to glTF format. The only one that matters is:

- **Do not export**: Self-explanatory, this object/light/camera won’t be exported. False by default.

## Lights

Lights are not supported in glTF 2.0. An empty node is exported in place of light only when it is relevant to do so (when a light has a mesh or a camera as descendant).  
There is a glTF lights extension, [KHR_lights_punctual](https://github.com/KhronosGroup/glTF/pull/1223) that is in the process of ratification, so should be considered experimental. It can be enabled by turning on the KHR_lights_punctual extension checkbox.

## Left to right handed coordinate system

As glTF export relies on conversion from Babylon, the coordinate system changes from left-handed (Babylon) to right-handed (glTF).
To do this simply, a root node named "root" is added to the scene. All nodes are set as descendants of this root node. It has specific rotation and scaling to handle the conversion.

## Consideration about skins

In glTF, a skin is bound to a node. The skeleton (root bone) of a skin should be positioned at the origin, without rotation or scaling. The node to which the skin is applied is responsible for its transformation ([translation](/typedoc/classes/babylon.transformnode#translate), rotation, scale).

## Textures image format

glTF 2.0 only supports the following image formats: jpg and png. You are advised to use those formats for your textures when exporting to glTF.

Note that the exporter also supports textures with bmp, gif, tga, tif and dds formats. But, those textures will be automatically converted to png/jpg by the exporter to follow glTF specifications.

## Texture transform

glTF 2.0 supports the [KHR_texture_transform extension](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_texture_transform). When enabled during export, it is set to required, meaning that the loader is expected to support the extension. Disabling the extension checkbox from the exporter window will export textures without applying the texture transform, which may look visually incorrect when loading into a glTF importer.

## Environment texture

To enjoy PBR material rendering, you should have an environment texture in your scene. The plugin exports the environment map if any is provided in 3DS MAX.

However, glTF format does not support this feature and the environment map needs to be added manually in client implementations. The Babylon Sandbox, see below, provides such feature.

## Double sided material

The handling of the double sided material mimics the Babylon format. [Detailed explanations here](/features/featuresDeepDive/Exporters/3DSMax#double-sided-material).

## Babylon material attributes

Native materials are enhanced to have extra attributes under Babylon attributes section.

![3DS MAX babylon material attributes](/img/exporters/3DSMax/BabylonMaterialAttributes.webp)

Most Babylon attributes are common to all materials:

- **Unlit**: A material can be exported as Unlit, meaning independent of lighting. This implies that light-relative attributes or textures are not exported: ambient, specular, emissive, bump mapping, and reflection texture. Additionally, in glTF, the **KHR_materials_unlit** extension is added to the material. [More details on this extension here](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit). During export, enable the _KHR_materials_unlit_ checkbox.
- **Backface Culling**: When true, the back faces are not rendered. When false, back faces are rendered using the same material as the front faces. **This property is native to the Standard material and is called _2-Sided_.**
- **Opacity/Transparency Mode**: You can select how transparency is handled for this material among 3 choices:
  - _Opaque_: The alpha color and texture are ignored during export process.
  - _Cutoff_: The alpha cutoff value is 0.5 (not exported as it is the glTF default value). Alpha values under this threshold are fully transparent. Alpha values above this threshold are fully opaque.
  - _Blend_: This is how 3ds Max handles transparency when rendering. This is the default mode for any material with an alpha color or texture.

## Custom attributes

Attributes defined by you, the user, are exported as well!

Almost all types of parameters are supported (_Float_, _Color_, _Boolean_...). The only exceptions are _Texture_, _Node_ and _Material_ types.
All nodes (meshes, lights...) and materials have their custom attributes exported.

To define custom attributes either use the Parameter Editor window or scripting:

![3DS MAX custom attributes parameter editor](/img/exporters/3DSMax/CustomAttributesDefinition_3dsMax.webp)

Custom attributes are exported under _extras_:

![3DS MAX custom attributes glTF](/img/exporters/3DSMax/CustomAttributes_glTF.webp)

Note that the custom attributes are added to the node, not to the mesh or light component itself.

Following types have particularities you should know:

- _Angle_ : Set in degrees (°) in 3ds Max but exported as radians. Ex: 360° => 3.1416 rads
- _Array_ : An array in 3ds Max is an enumeration of values. Each value has an incremental index, starting from 1. Only one value can be selected. The index of selection is exported, not the displayed value.
- _Color_ and _FRGBA_ : Exported in base 1 as all other colors. Ex: Red (255,0,0) => (1,0,0)
- _Percent_ : Exported in base 1 as well. Ex: 80% => 0.8
- _Texture_ : **Not supported**. Custom attributes are exported as row values. Thus textures are exported under babylon format instead of glTF format. Bitmaps associated to textures are not exported.

## Shell material

In 3DS Max, the _Shell material_ is a container for other materials and controls which material is used in which rendering.

It contains two materials:

- _Original Material_ used for rendering (for example Arnold, Mental ray, V-Ray)
- _Baked Material_ exported by the Babylonjs exporter

![3DS Max Shell material parameters](/img/exporters/3DSMax/shellMaterial.webp)

## DirectX Shader material

In 3DS Max the DirectX shader material is used to represent more accurately how the material will render in another application. That is why only the material contained in its _Software Render Style_ section is exported. All other parameters are ignored.

![3DS Max DirectX Shader parameters](/img/exporters/3DSMax/directXShader.webp)

More information on how you could use this material in conjunction with the Shell material in the discussion [here](https://github.com/BabylonJS/Exporters/issues/296).

## Draco compression

On the export form, the _Use Draco compression_ option enables the Draco compression. It needs [Node.js](https://nodejs.org) and [gltf-pipeline](https://github.com/AnalyticalGraphicsInc/gltf-pipeline) in order to work.

To install the Node.js, go to the web site download and install it.
Then, to install gltf-pipeline, open a normal shell (cmd.exe or powershell.exe) and run the following command: `npm install -g gltf-pipeline`.
Once they are installed, check the _Use Draco compression_ option and the compression will be done automatically at the end of the export.

## How to export 3D model with animation to .babylon / .gltf format

## Single animation clip

You can export all animations of the objects in your scene into a single animation clip following these steps:

1. Open FBX / DAE or any other 3D model with animations in 3ds Max

2. Check / Apply texture to model

3. Go to “Time Configuration” window and change “Start Time:”, “End Time” under “Animation” section properly.

![3ds Time Configuration Window](/img/exporters/3DSMax/time_configuration_window.webp)

4. Right click on the imported 3D model. Navigate “Babylon... > Babylon Properties” and open the “Babylon.js Object Properties” window as below.

![3ds Babylon Plugin Properties Window](/img/exporters/3DSMax/3ds_babylon_plugin_properties_window.webp)

5. Update the “From:”, “To:” fields under “Animations” section with expected animation frames to be exported

6. Open “Babylon Exporter” window from menu “Babylon > Babylon File Exporter ...” as below.

![3ds Babylon Exporter](/img/exporters/3DSMax/babylon_exporter.webp)

## Multiple animation clips

You can also export multiple animation clips and play one of them depending on the situation. For example, a character might have "Walk", "Run", and "Jump" animations, each spread along the timeline.

To set up the animation clips (also called animation groups), right-click your scene and choose Babylon -> Babylon Animation Groups, which opens the Animation Groups window.

![3ds animation groups window](/img/exporters/3DSMax/animation_groups_window.webp)

Features are explained below:

- Create / delete an animation group

- Set a name

- Set start and end frames. Values out of timeline bounds are automatically clamped at runtime.

- Add / remove node selection. This acts as a layer per animation group: only added nodes will be part of the animation group. This is useful when you export a complex scene and want to animate only a small part of it.

- **Export non-animated node targets** option: when checked, all added nodes will be part of the animation group. Nodes that are not actually animated (no key in the timeline) will have a fake scale animation exported. This option might be useful if you want to add an in-game behavior to all the nodes of an animation group, such as toggling visibility.

When updating an input field or the animation nodes, changes are highlighted through a color. Press the _Confirm_ button to submit changes.

Note that when updating the scene hierarchy, like deleting a node, while the Animation Group window is opened, the Animation Nodes frame is not updated. Close the Animation Groups window and re-open it to take hierarchy updates into account.

## Try it out!

Export your own scene from 3DS MAX to glTF format and load it into the [Babylon Sandbox](https://sandbox.babylonjs.com/). Or load them via scripts using the [babylon loader](/features/featuresDeepDive/importers/glTF).


# Exporting to 3MF

## What is 3MF?

3MF (3D Manufacturing Format) is an open, XML-based file format designed for additive manufacturing and 3D printing workflows. Unlike formats such as STL, 3MF is a versatile container that carries geometry, units, materials, colors, metadata, and structural relationships in a single zip-based package (OPC — Open Packaging Conventions). It is natively supported by most modern slicers, CAD tools, and manufacturing pipelines.

Because 3MF is designed to faithfully represent manufacturing intent, a Babylon.js scene may need to be prepared before exporting. For example, you may want to apply world transforms, merge or split meshes by material, assign meaningful names, set a specific unit, or strip rendering-only data that has no manufacturing meaning. The exporter works directly on the meshes you pass to it, so you remain in full control of what goes into the file.

---

## Installation and prerequisites

The serializer relies on [fflate](https://github.com/101arrowz/fflate) for zip compression. By default it loads fflate lazily from a CDN:

```typescript
// Override the CDN URL before creating any serializer instance (optional)
import { ThreeMfSerializerGlobalConfiguration } from "babylonjs-serializers";
ThreeMfSerializerGlobalConfiguration.FFLATEUrl = "https://cdn.example.com/fflate.js";
```

If fflate is already present on `globalThis.fflate` (bundled by your application), the dynamic load is skipped automatically.

---

## Basic usage

### Serialize to a memory buffer

The simplest way to export one or more meshes is `ThreeMf.SerializeToMemoryAsync`. It buffers the entire 3MF archive into a `Uint8Array` that you can then save or upload.

```typescript
import { ThreeMfSerializer, ThreeMf } from "babylonjs-serializers";

const serializer = new ThreeMfSerializer();

const buffer = await ThreeMf.SerializeToMemoryAsync(serializer, mesh1, mesh2);

if (buffer) {
    // Save as a file in the browser
    const blob = new Blob([buffer], { type: "application/octet-stream" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "model.3mf";
    a.click();
    URL.revokeObjectURL(url);
}
```

### Stream to a custom sink

For large scenes or environments where you want to avoid buffering the entire archive in memory (e.g., writing directly to a Node.js file stream), use `serializeAsync` with a sink callback:

```typescript
import { ThreeMfSerializer } from "babylonjs-serializers";
import { createWriteStream } from "fs";

const serializer = new ThreeMfSerializer({ unit: ST_Unit.millimeter });
const chunks: Uint8Array[] = [];

await serializer.serializeAsync(
    (err, chunk, final) => {
        // append chunk to your stream / buffer
        chunks.push(chunk);
    },
    mesh1,
    mesh2
);
```

---

## Serializer options

Options are passed as an object to the `ThreeMfSerializer` constructor. All fields are optional.

| Option | Type | Default | Description |
|---|---|---|---|
| `unit` | `ST_Unit` | `ST_Unit.meter` | Unit used for all coordinates in the exported file. Must match the scale of your scene. |
| `exportInstances` | `boolean` | `false` | When `true`, `InstancedMesh` objects are exported as additional build items that reference the shared geometry of their source mesh — no geometry duplication. When `false`, instances are silently ignored. |
| `metadata` | `Record<string, string>` | `undefined` | Arbitrary key/value pairs written as model-level metadata. Standard keys include `Title`, `Designer`, `Description`, `Copyright`, `LicenseTerms`, `CreationDate`, `ModificationDate`, and `Application`. |

### Units

The `ST_Unit` enum provides the full set of units supported by the 3MF specification:

```typescript
import { ST_Unit } from "babylonjs-serializers";

// Available values
ST_Unit.micron
ST_Unit.millimeter  // most common for desktop 3D printing
ST_Unit.centimeter
ST_Unit.inch
ST_Unit.foot
ST_Unit.meter       // default for ThreeMfSerializer
```

> **Important:** The unit does not rescale coordinates. It declares to the consuming application how to interpret the raw numbers in the file. Make sure the unit you choose matches the actual scale of your mesh vertices.

### Example: millimeter export with metadata

```typescript
import { ThreeMfSerializer, ST_Unit, ThreeMf } from "babylonjs-serializers";

const serializer = new ThreeMfSerializer({
    unit: ST_Unit.millimeter,
    metadata: {
        Title: "My Part",
        Designer: "Jane Doe",
        Description: "Bracket assembly for prototype v2",
        CreationDate: new Date().toISOString().slice(0, 10),
    },
});

const buffer = await ThreeMf.SerializeToMemoryAsync(serializer, bracket);
```

### Example: exporting instances

When a scene contains many copies of the same object created with `Mesh.createInstance()`, enabling `exportInstances` avoids duplicating geometry for every copy:

```typescript
const serializer = new ThreeMfSerializer({ exportInstances: true });

// sourceMesh is exported once as a resource object.
// each InstancedMesh becomes a separate build item pointing to that object.
const buffer = await ThreeMf.SerializeToMemoryAsync(serializer, sourceMesh, ...sourceMesh.instances);
```

---

## Preparing your scene for export

Because 3MF targets manufacturing workflows, some aspects of a typical Babylon.js scene may need attention before exporting:

- **Apply transforms:** The serializer uses each mesh's current world matrix. If you want a "baked" export with no runtime transform, call `mesh.bakeCurrentTransformIntoVertices()` beforehand.
- **Units and scale:** If your scene is in centimeters but the slicer expects millimeters, either rescale the meshes or choose `ST_Unit.centimeter` so the consumer can convert correctly.
- **Submeshes and materials:** Each Babylon.js `SubMesh` is exported as its own 3MF object resource. This allows downstream tools to assign per-object colors or materials. If you want a single object per mesh, merge submeshes before exporting.
- **Names:** Object names in the exported file come from `mesh.name`. Give meshes meaningful names to make the 3MF easier to work with in slicer or CAD software.
- **Non-manifold geometry:** 3MF consumers typically require watertight (manifold) geometry for printing. Validate and repair meshes as needed before export.

---

## Advanced: using the builders directly

The serializer internally uses a set of fluent builder classes. You can use these directly if you need to construct a 3MF file from raw geometry data (independent of any Babylon.js mesh):

```typescript
import {
    ThreeMfModelBuilder,
    ThreeMfMeshBuilder,
    ThreeMfMaterialBuilder,
    ThreeMfDocumentBuilder,
    ST_Unit,
} from "babylonjs-serializers";

// 1. Define a material group
const material = new ThreeMfMaterialBuilder(1)
    .withColor("Red", { r: 0.8, g: 0.1, b: 0.1 })
    .withColor("Blue", { r: 0.1, g: 0.1, b: 0.8 })
    .build();

// 2. Define a mesh resource (positions: flat x,y,z array; indices: flat i,j,k array)
const mesh = new ThreeMfMeshBuilder(2)
    .withName("Cube")
    .withData({ positions: [...], indices: [...] })
    .withMaterial(1, 0) // reference material group id=1, entry index 0
    .build();

// 3. Assemble the model
const model = new ThreeMfModelBuilder()
    .withUnit(ST_Unit.millimeter)
    .withMetaData("Title", "My Model")
    .withMaterial(material)
    .withMesh(mesh)
    .withBuild(2) // add mesh id=2 to the build list
    .build();

// 4. Wrap in an OPC document
const document = new ThreeMfDocumentBuilder()
    .withModel(model)
    .build();
```

### Builder reference

| Builder | Purpose |
|---|---|
| `ThreeMfModelBuilder` | Assembles the root 3MF model: unit, metadata, resources (meshes + materials), and build items. |
| `ThreeMfMeshBuilder` | Creates a mesh resource object from a flat positions array and a flat indices array. Accepts an optional vertex/triangle post-process handler. |
| `ThreeMfMaterialBuilder` | Creates a `basematerials` resource group. Colors are expressed as linear RGB and converted to sRGB hex automatically. |
| `ThreeMfComponentsBuilder` | Creates a composite object made of references to other resource objects with per-component transforms. |
| `ThreeMfDocumentBuilder` | Wraps a model into a full OPC document (content types + relationships + model part). |

### `ThreeMfMeshBuilder` post-process handlers

If you need to transform individual vertices or triangles during export (e.g., to remap coordinates or inject per-triangle property references), you can attach handlers:

```typescript
const mesh = new ThreeMfMeshBuilder(id)
    .withData(data)
    .withPostProcessHandlers(
        (vertex) => {
            // transform or annotate the vertex
            return vertex;
        },
        (triangle) => {
            // assign per-triangle material references
            triangle.pid = materialGroupId;
            triangle.p1 = 0;
            return triangle;
        }
    )
    .build();
```



Since Babylon and Blender often do things differently, it can sometimes be a pain working with both of them together. Here are a few tips that will smooth things out a bit.

## Geometry

### Smooth shading

If you export the default Blender scene to BJS, you'll quickly see that your cube doesn't look exactly as it should:

![smooth-shading-issue](/img/exporters/blender/smooth-shading-basic-issue.webp)

This is because a 3D modeler's viewport doesn't act like a 3D real-time engine. By default, Blender always creates objects using flat shading.
If you want to see your scene smoothed as it appears in BJS, select all your objects and click _Shading_ > _Smooth_ in the 3D View Toolshelf.

![blender-smooth-shading](/img/exporters/blender/blender-smooth-shading.webp)

Now, your cube looks ugly. You have to adjust its sharpness by adding an _edge split_ modifier and playing with the edge angle and sharp edges. Job done!

![blender-sharp-edges](/img/exporters/blender/blender-smooth-shading-sharpness.webp)

---

## Cameras

### ArcRotate

When choosing the ArcRotate camera type, you have to add a target to your camera.

To do that:

- first select your camera, then its target (for example, an object or an empty),
- press `Ctrl` + `T` > `Track To Constraint`.

---

## Workflow

### Quickly Export

If you go to _File_ > _export_ and right click on babylon, you can select _Create Shortcut_, and make an easy-to-use shortcut to export to babylon! For example, you can use _Ctrl-E_.

![quick-export-shortcut](/img/exporters/blender/quick-export-shortcut.webp)

---

## Animation

### Commons

#### One file per animated object

Usually, you will have one master scene containing all static elements, and a blend file for each animated element.

To easily see your animated element inside the master scene, open your master scene and go to File > Link, then go inside the blend containing the animated element, and import your objects. It can be simpler to link groups instead of objects, which makes updating links easier.

#### Rotation mode

By default, Blender uses the `XYZ Euler` rotation mode, which is fine for most cases, but you should know that `Quaternion` (which avoids gimbal lock issues) is also supported.

- `XYZ Euler` will be stored in the [mesh.rotation](/typedoc/classes/babylon.mesh#rotation) property
- `Quaternion` will be stored in the [mesh.rotationQuaternion](/typedoc/classes/babylon.mesh#rotationquaternion) property

For armatures, it does not matter because the animation is kind of baked during export.

### Armatures

#### Maximum ## of influencers fix

If you ever get the error `WARNING: Maximum ## of influencers exceeded for a vertex, extras ignored`, never fear!

In weight painting mode, click _weights_ and then _limit total_. This will automatically limit the mesh's vertices to 4 influences.

![weight-limit](/img/exporters/blender/weight-limit.webp)


## Blender to BJS, using glTF

The glTF exporter allows you to export your scene using the PBR workflow.

## Features

Since Blender 2.8, the glTF add-on is enabled in Blender by default. You can update it from the official [Github repo](https://github.com/KhronosGroup/glTF-Blender-IO). The official documentation is in the [Blender Manual](https://docs.blender.org/manual/en/latest/addons/import_export/scene_gltf2.html).

It should be compatible with Blender 2.79b, but you may also note that the old exporter is [still available](https://github.com/KhronosGroup/glTF-Blender-Exporter) ([old documentation](https://github.com/KhronosGroup/glTF-Blender-Exporter/blob/master/docs/user.md)).

Axis conventions are not the same between Blender, Babylon.js (left-handed by default), and glTF (right-handed), so the conversion table below can help with coordinates. See [Coordinate Systems and Handedness](/features/featuresDeepDive/mesh/transforms/coordinateSystems) before adding any manual axis correction; the exporter and loader already perform the format conversions.

To help with transforms, note that the Babylon.js loader will automatically set glTF assets as children of an object:

- named `__root__`
- rotated by default to 180° on Y axis
- scaled on Z by -1

| Blender asset position | Babylon.js asset absolutePosition |
| :--------------------: | :-------------------------------: |
|           X            |                -X                 |
|           Y            |                 Z                 |
|           Z            |                -Y                 |

## Try it out

Once your scene is exported, you have multiple solutions to test it:

- quick check using the [sandbox](https://sandbox.babylonjs.com/)
- use the [viewer](//doc.babylonjs.com/extensions/the_babylon_viewer)
- script your own app using the [loader](/features/featuresDeepDive/importers/loadingFileTypes)

## Example

Let's say you have exported [WaterBottle.glb](https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/WaterBottle/glTF-Binary):

- export to .gltf or .glb in a folder
- create a file named _index.html_, and copy the code below:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Default .gltf loading scene</title>
    <meta charset="UTF-8" />
    
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <style>
      html,
      body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #canvas {
        width: 100%;
        height: 100%;
        touch-action: none;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
      const canvas = document.getElementById("canvas");
      const engine = new BABYLON.Engine(canvas, true);

      // here the doc for Load function: //doc.babylonjs.com/api/classes/babylon.sceneloader#load
      BABYLON.LoadSceneAsync("WaterBottle.glb", engine).then(function (scene) {
        scene.createDefaultCamera(true, true, true);
        scene.createDefaultEnvironment({
          createGround: false,
          createSkybox: false,
        });

        engine.runRenderLoop(function () {
          scene.render();
        });

        window.addEventListener("resize", function () {
          engine.resize();
        });
      });
    </script>
  </body>
</html>
```

- double-click on the _index.html_ file

  - some browsers may not allow loading the scene for security reasons (e.g.: Chrome). In this case, you have to open the HTML file through a web server ([local](/extensions/Babylon.js+ExternalLibraries/Running_a_local_webserver_for_BabylonJs) or not), or try another browser (e.g.: Firefox, Edge)

- ... profit!

![blender gltf scene loaded in BJS](/img/exporters/blender/gltf/gltf-loaded.webp)


This is a common error you may have when working with bones:

_"Too many bone influences per vertex: 5. Babylon.js only supports 4 bone influences per vertex."_

This is because Babylon.js supports a maximum of 4 bone influences per vertex.

Here is how to solve this in 3ds Max (by default, 3ds Max has a limit of 20):

In 3ds Max (English version)

![bones influences parameter En](/img/exporters/3DSMax/bonesEN.webp)

In 3ds Max (French version)

![bones influences parameter Fr](https://s3-eu-west-1.amazonaws.com/sdz-upload/prod/upload/structure_limit.jpg)

Simply add '4' to the red part of the image and you're done!



[Cheetah 3D](http://www.cheetah3d.com/) exports [Babylon.JS](https://babylonjs.com/) .babylon scene files. It currently supports the following:

- mesh export with functional transforms, naming, and parenting
- multi-camera export (perspective only; orthogonal is not currently supported)
- light export with all Babylon types handled:

  - Cheetah3D spot light is a babylon spot
  - Cheetah3D distant light is a babylon directional light
  - Cheetah3D ambient light is a babylon hemispheric light
  - every other type is a babylon point light
  - supports diffuse and specular color
  - rotations must be on the -Y axis

- materials export:
  - supports diffuse, emissive and specular color (plus specular power as "shininess")
  - supports only diffuse textures; the Cheetah3D API is very limited there

More info on [my blog](http://cubeslam.net/).

### Install

Put the JS script in this folder:

/Users/YOUR_USER/Library/Application Support/Cheetah3D/Scripts/Macro/

### Usage

Load your scene and go to Tools/Scripts/Macro/Babylon file export. Choose a destination, then load your scene in Babylon.js!



## Installer

### Installing the installer (so meta...)

We have recently introduced a new tool to simplify the installation of the plugin for both Max and Maya.

First, you can download the latest version of the installer from our [Github Releases](https://github.com/BabylonJS/Exporters/releases). Once on the releases page, you can find all our packages in the assets section of each release:

![releases](/img/exporters/installer/GithubPreRelease.webp)

From there, you can download the Installer.zip file. Chrome is currently warning about a potential threat because installer.exe has not yet been downloaded enough times to pass Chromium's checks. In this case, you might see a message like this:

![chrome warning](/img/exporters/installer/ChromeDLWarning.webp)

You can nevertheless continue to download by pressing the little arrow and choosing to "Keep" the file:

![chrome warning keep](/img/exporters/installer/ChromeDLWarningKeep.webp)

Once downloaded, you can extract the contents of the zip to your preferred location.

### Using the installer

Launch the executable file contained in the zip. On first launch, Windows, like Chrome earlier, will display a SmartScreen warning because the application has not yet been launched enough times to be trusted.

![smart screen warning](/img/exporters/installer/SmartScreen.webp)

As before, you can choose to continue by pressing more info and then Run anyway:

![smart screen warning keep](/img/exporters/installer/SmartScreenKeep.webp)

No worries, you are almost there. Windows raises a second warning because the installer needs to write files in Program Files and therefore must run in elevated mode. You can access the User Account Control and finally start using the application.

From this point, it gets simpler:

![smart screen warning keep](/img/exporters/installer/Installer.webp)

Once launched, the application should auto-detect all the installation folders for your Autodesk applications. If it fails to do so, you can still manually locate the target software.

You can now easily install or update any of your 3D authoring tools to the latest prerelease available on Github.

If you want to upgrade to the latest available pre-release of the exporter plugins, you can relaunch the installer and follow the same procedure to update the installed plugins to their latest versions.

Please note that the software you are installing the plugin for should be closed during installation.

## Manual Install

The plug-in is designed for Maya 2017 or later. This guide is about the Windows version (a macOS version is coming soon). To download it, go to the [Github project Releases](https://github.com/BabylonJS/Exporters/releases).

![releases](/img/exporters/installer/GithubPreRelease.webp)

In the assets section of the release, you can find one zip file per supported tool (like Maya_2019.zip) containing the plugin files.

Click the zip file to start downloading.

By default, Windows blocks all .dll files coming from the web, so we have to unblock them first. Select the zip file, right-click it, select _Properties_, select _Unblock_, and then _OK_.

![dll unblocking](/img/exporters/Maya/3_dll_unlocking.webp)

Then, extract the content of the zip file on your computer.

Finally:

- move all .dll files into a directory defined in the Maya plug-in path (for example `C:/Program Files/Autodesk/Maya2018/bin/plug-ins`). More information on how to install a plug-in in Maya [here](https://knowledge.autodesk.com/support/maya/learn-explore/caas/CloudHelp/cloudhelp/2016/ENU/Maya/files/GUID-FA51BD26-86F3-4F41-9486-2C3CF52B9E17-htm.html).
- and move all template files to their respective folders AETemplates and NETemplates. Those files are used for the UI. While not mandatory, they are always welcome!

You should find the _Maya2Babylon.nll.dll_ in the plug-in Manager (_Windows > Settings/Preferences > Plug-in Manager_).

![dll unblocking](/img/exporters/Maya/4_maya_plug_in_manager.webp)

Check _Loaded_ and _Auto load_, and a new tab should appear:

![plug-in visible](/img/exporters/Maya/5_plugin_visible.webp)

Congratulations! You did it!

## Dependencies

## Visual Studio

Visual Studio is required to build the Maya2Babylon project from source.

## .NET Framework

The [.NET Framework Redistributable](https://docs.microsoft.com/en-us/dotnet/framework/install/guide-for-developers) needs to be installed in order to run the Maya2Babylon plugin properly.

- Maya2Babylon 2017-2018

  - Requires at least .NET Framework 4.6.1

- Maya2Babylon 2019
  - Requires at least .NET Framework 4.6.1
- Maya2Babylon 2020
  - Requires at least .NET Framework 4.6.1

## Other Dependencies

- For Maya 2020
  - Maya2Babylon 2020 requires Maya 2020.1 or newer.

## Features

## Exported features

- _Meshes_
      * Visibility
      * Position / rotation / scaling
      \* Geometry (position, normal, tangent, texture coordinates (2 channels))

  - Skin
    _ Instances
    _ Morph targets (blend shapes)
    _ Animations: Position, scaling, rotation, bones, morph weights
    _ Custom attributes

- _Materials_

  - Standard materials (Lambert, Phong, PhongE and Blinn)
      - Color
      - Transparency

  - Ambient color
    _ Bump mapping
    _ Specular color and power
    _ Reflected color
    _ PBR materials (Stingray PBS, AiStandardSurface)
    _ Base color & opacity
    _ Normal
    _ Metallic
    _ Roughness
    _ Emissive
        _ Multi-materials
    _ Double sided materials
    _ Unlit
    _ Backface culling
    _ Max Simultaneous Lights
    _ Opacity/Transparency mode
    _ Custom attributes

- _Textures_

  - UV offset / scaling / angle
  - Level
  - Coordinates mode (spherical, planar, explicit)
  - Wrapping (clamp, mirror, wrap)

- _Cameras_
      * Fov
      * MinZ
      * MaxZ
      * Position
      \* Target / Rotation

  - Animations: Position, Target / Rotation \* Custom attributes

- _Lights_
      \* Point / spot / directional / ambient
  - Inclusion / exclusion lists
        * Position / direction
        * Intensity
        * Diffuse
        * Specular
    _ Animations: Position, direction
    _ Custom attributes

## The exporter window

When your scene is ready to be exported, click on the **Babylon** tab on the top menu, and click on **Babylon File Exporter** to display the exporter window.

![export window](/img/exporters/Maya/6_export_window.webp)

This window is composed of 3 panels:

- A top panel with a file path and a button. With this panel, you choose where your Babylon file will be exported by clicking on the right button
- Several options and two buttons Export and Export & Run
- A log panel

The _Export_ button should be used to create the Babylon file representing your scene. The _Export & Run_ button will also create the Babylon file, but will also launch your default browser and run the newly made Babylon file. This button is very useful if you just want to test the render of your scene in Babylon.js.

As the babylon.js script is retrieved directly from the official website, you should have internet access to use Export & Run correctly.

The log panel indicates in real time which meshes and materials have been exported and whether there are any problems with these objects.

Option _Optimize vertices_: The Babylon exporter will try to optimize the number of vertices to export instead of exporting everything naively (if a vertex is part of two faces, this vertex won’t be exported twice with this option checked).

The _Scale factor_ can be used to rescale the whole world. If you set a scale factor equal to 100, the resulting scene will be 100 times smaller (1%). By default the scale factor is equal to 1, meaning no rescale.

The _Texture quality_ sets the conversion quality of bitmap to JPEG. At 100 (the maximum value), it gives the highest image quality but no file size reduction. On the contrary at 0 (the minimum value), it gives the lowest image quality but the greatest file size reduction. By default the _Texture quality_ is set to 100.

The _Use Draco compression_ option is only available for gltf and glb output format. More details [here](/features/featuresDeepDive/Exporters/Maya_to_glTF#draco-compression).

In the _MorphTarget options_ section, the _Export normal_ and _Export tangent_ checkboxes allow you to customize the morph target export.

## What you should know

## Camera

If you want to test your scene right away by using the button Export & Run, your scene should have a camera created. Otherwise, the log panel will display the warning “No camera defined”, and a default one will be created at runtime but won't be exported in the .babylon file.

If you have more than one camera, the first one will be set as activeCamera in Babylon.

## Light

If you don’t have any lights in your scene, the exporter will add an ambient light by default. The log panel will display the warning “No light defined – A default ambient light was added for your convenience”.

## Locator

If you want to have a point in space used only for its transform attributes you can use a Locator. For example, a target camera naturally comes with a locator to indicate the position to look at. They can also be used as parent node when updating the scene at runtime with the Babylon engine.

## Group node

A group node is exported as a dummy, a mesh without vertices, just like a locator. However, only group nodes used as parent for other nodes are exported. If you have an empty group node, you should probably switch to a locator instead or it will be ignored.

## Textures and intermediate nodes

Maya provides a large range of tools to manipulate connections between textures and materials (like the Reverse node). For the most part, only a fileTexture is expected as input to a material.

Currently the following intermediate nodes are supported by the exporter:

- Projection node which is only considered for the reflected color texture of a standard material. You can choose the projection type between _Spherical_ or _Planar_. If no projection node is provided, the default projection type is _Spherical_ for the reflected color texture.
- Bump2d node which is automatically created when assigning a file to a bump attribute.

## Textures image format

Babylon engine fully supports the following image formats: jpg, bmp, png, gif, tga. You are advised to use those formats for your textures when exporting to Babylon.

Note that the exporter also supports textures with tif and dds formats. But, those textures will be automatically converted to png by the exporter to ensure compatibility with the Babylon engine.

## Physical materials

The handling of physical materials mimics the glTF format. [Detailed explanations here](/features/featuresDeepDive/Exporters/Maya_to_glTF#pbr-materials)

Along with the default supported glTF parameters, the Babylon format also supports the coating parameters of Arnold Standard Surface. You can see below the supported parameters:

![texture](/img/exporters/Maya/Coating.webp)

Please note that if a map is used for the weight or the roughness parameter, they will be combined in the same way the ORM texture is created in the Detailed explanations. In Maya, metalness and roughness maps are black and white images (R=G=B). The 2 maps must have the same size to be merged successfully.

In Babylon format, weight is stored in the red channel and roughness in the green channel.

## UV sets

Babylon engine supports only 2 UV sets. In Maya the first UV set, created by default (map1), is used as UV1 in Babylon. The second UV set (map2) is used as UV2. Other UV sets are ignored and UV2 is used instead.

![export window](/img/exporters/Maya/7_uv_set_editor.webp)

Moreover, Babylon engine supports only 1 UV set per texture. If a single texture is linked to UV1 and any other UV set, the log panel will display the warning “Texture is linked to UV1 and UV2. Only one UV set per texture is supported.” and the texture will be linked to UV1 or UV2 but not both.

Now that you know all about the exporter features, it’s time to use it!

## Double sided material

To create a double sided material there are different methods, but the only one exported is using two materials and a condition.

![double sided hypershade](/img/exporters/Maya/8_hyperShade_double_sided.webp)

When exporting, the geometry of all meshes using a double sided material is duplicated:

- the number of vertices and faces is doubled
- faces, normals and tangents are inverted for the duplicated geometry

This means that the exporter is automatically creating a back side. If you already have a back side, you should directly apply a material to it.

## Babylon material attributes

Native materials are enhanced to have extra attributes in a dedicated node. A Babylon attribute node is created after the first export using the material.

Here is an example for 3 different materials:

![Maya babylon material attributes nodes](/img/exporters/Maya/BabylonMaterialAttributes_LargeView.webp)

![Maya babylon material attributes details](/img/exporters/Maya/BabylonMaterialAttributes_AllNodes.webp)

Most Babylon attributes are common to all materials:

- **Unlit**: A material can be exported as Unlit, meaning independent of lighting. This implies that light-relative attributes or textures are not exported: ambient, specular, emissive, bump mapping and reflection texture.
- **Backface Culling**: When true, the back faces are not rendered. When false, back faces are rendered using the same material as front faces.
- **Max Simultaneous Lights**: Number of Simultaneous lights allowed on the material.
- **Opacity/Transparency Mode**: You can select how transparency is handled for this material among 3 choices:
  - _Opaque_: The alpha color and texture are ignored during export process.
  - _Cutoff_: The alpha cutoff value is 0.5. Alpha values under this threshold are fully transparent. Alpha values above this threshold are fully opaque.
  - _Blend_: This is how Maya handles transparency when rendering. This is the default mode for any material with an alpha color or texture.

## Custom attributes

You can add custom attributes to Meshes, Materials, Lights, and Cameras with the attributes window (_Modify > Add Attribute..._), which adds them to the extra attributes of those objects.

![native attributes window](/img/exporters/Maya/9_attribute_window.webp)

In Babylon, the custom attributes are added as metadata.

![custom attributes as metadata](/img/exporters/Maya/CustomAttributes_Metadata.webp)

The following types have specific behaviors you should know about:

- _bool_ : is equal to 0 or 1.
- _enum_ : corresponds to the index of your Maya enum.

## Exporter through MEL script

You can use the exporter through a MEL script. To do so, you need to generate the exporter parameters with the command 'GenerateExportersParameter' and specify a path and the export type.

![generate export parameter](/img/exporters/Maya/11_generate_export_parameter.webp)

Then you need to specify the other parameters and export with the command 'ScriptToBabylon'.

![export MEL](/img/exporters/Maya/12_script_to_babylon.webp)

You can find an example script in the [Maya\MELScripts](https://github.com/BabylonJS/Exporters/tree/master/Maya/MELScripts) folder of the exporter.

## Using the exporter

Export your own scene from Maya to babylon format and load it into the [Babylon Sandbox](http://sandbox.babylonjs.com/). Or load it via scripts using the [babylon loader](/features/featuresDeepDive/importers/assetManager).



Interested in getting Adobe Mixamo characters into Babylon.js? Mixamo uses .fbx files, so you'll have to go through either .glb or .babylon files to load your animated characters in Babylon.js.

- For the .glb route, go to this page: [Animating Characters](https://doc.babylonjs.com/features/featuresDeepDive/animation/animatedCharacter)
- For the .babylon route, which uses the Blender To Babylon Exporter, use this page. Follow the guide below!

Start by downloading and installing the [Blender to Babylon.js exporter](https://github.com/BabylonJS/BlenderExporter). Here are the [Installation instructions](/features/featuresDeepDive/Exporters/Blender#installation).

From [Mixamo](https://www.mixamo.com), under Characters, select Y Bot. Download Y Bot with the following settings:

![image1](/img/exporters/mixamo/1.webp)

Rename this file to ybot.fbx

In Mixamo, under Animations, choose the animations that you want to export (for this guide I chose punch and kick). Download the animations with the following settings:

![image2](/img/exporters/mixamo/2.webp)

Rename these files to ybot@animation.fbx, e.g. ybot@punch.fbx and ybot@kick.fbx.

Open a new Blender 2.8+ scene, and delete all 3 default objects (cube, camera, and light).

In the Blender top menu, click File → Import → FBX (.fbx). In Operator Presets on the right, check Manual Orientation and Automatic Bone Orientation. Select ybot.fbx and then click Import FBX.

![image3](/img/exporters/mixamo/3.webp)

Import ybot@punch.fbx and ybot@kick.fbx into Blender the same way you did ybot.fbx.

![image4](/img/exporters/mixamo/4.webp)

Rename Armature to Character and rename all animations, as shown in the image below (bordered in red):

![image5](/img/exporters/mixamo/5.webp)

Delete Armature.001 and Armature.002.

As shown in the image below (bordered in red), select Character (top right), click in the center of the circle (bottom right), and drag up to create a new sub-window. Select Dope Sheet (bottom left) and Action Editor (next to it), then select an animation (middle), for example Kick. Click Play (bottom middle) to play the animation. If your character is not animating, make sure you selected Character (top right, bordered in red). Also, make sure you're in Object Mode.

![image6](/img/exporters/mixamo/6a.webp)

Change animation back to TPose from Kick. In Blender, press N, which opens the Transform tab. Note that Rotation is not all 0° and Scale is 0.010 instead of 1.

![image7](/img/exporters/mixamo/7a.webp)

As shown in the image below (bordered red), in Object Mode, press A to select all. Press S to scale. Type 100 to scale from 0.010 to 1.

![image8](/img/exporters/mixamo/8.webp)

As shown in the image below (bordered red), press Ctrl + A to open the Apply menu. Click All Transforms. Location should all be set to 0, Rotation should all be set to 0, and Scale should all be set to 1.

![image9](/img/exporters/mixamo/9.webp)

[Possibly useful resource](https://blender.stackexchange.com/questions/24839/how-do-i-resize-an-armature-without-ruining-its-poses)

We need to change the two materials, as shown in the image below. Something in them is incompatible with the .babylon format.

![image10](/img/exporters/mixamo/10.webp)

Click Alpha_Joints_MAT. As shown in the image below (bordered red), click Material Properties (bottom most), Browse Materials (slightly above), and select Material (slightly above). Do the same for Alpha_Body_MAT.

![image11](/img/exporters/mixamo/11.webp)

You should be able to add custom colors and other material properties to Material.

In Blender top menu, click File → Export → Babylon.js ver 6.2.3. Click Export Babylon.js scene.

![image11b](/img/exporters/mixamo/11b.webp)

Open your .babylon file in Notepad. Scroll to bottom, and paste the following text:

```
"autoAnimate": true,"autoAnimateFrom": 1,"autoAnimateTo": 152,"autoAnimateLoop": true,
```

before "instances":[]. Save your .babylon file.

![image12](/img/exporters/mixamo/12.webp)

Go to [Babylon.js Sandbox](https://sandbox.babylonjs.com/). Drag your .babylon file into the browser.

autoAnimate lets your model animate automatically when dragged into the Babylon.js Sandbox. Why autoAnimateTo frame 152? According to the Sandbox animation list and the image of the .babylon file below, all 3 animations (Kick, Punch, and TPose) take a total of 152 frames.

![image12a](/img/exporters/mixamo/12a.webp)

So how do you trigger these animations in Babylon.js code? Check out PG: <Playground id="#BCU1XR#0" title="Animation Blending" description="Triggering Mixamo animations." isMain={true} category="Animation"/>

![image12c](/img/exporters/mixamo/12c.webp)

Click the image below to see the final result!

[![finalVideo](https://img.youtube.com/vi/_f4z--WKsU4/0.jpg)](https://www.youtube.com/watch?v=_f4z--WKsU4)

Check out this Babylon.js Demo: [Dancers](https://www.babylonjs.com/Demos/Dancers/). In this demo, a .babylon model of the dancer is loaded just once! Its mesh and skeleton are cloned many times. The dance animation can be applied to each cloned skeleton separately whenever we choose!

All .fbx, .blend, and .babylon files are included in files/.



Any scene or mesh can be downloaded as a file to your computer. This is achieved with the [scene serializer](/typedoc/classes/babylon.sceneserializer)

## Scene

Include the following code in your project to download your scene

```javascript
let objectUrl;
function doDownload(filename, scene) {
  if (objectUrl) {
    window.URL.revokeObjectURL(objectUrl);
  }

  const serializedScene = BABYLON.SceneSerializer.Serialize(scene);

  const strScene = JSON.stringify(serializedScene);

  if (filename.toLowerCase().lastIndexOf(".babylon") !== filename.length - 8 || filename.length < 9) {
    filename += ".babylon";
  }

  const blob = new Blob([strScene], { type: "octet/stream" });

  BABYLON.Tools.Download(blob, filename);
}
```

The following playground shows how to create a scene, use the serializer, convert it to a JSON file, and then offer it for download to your computer.  
PG: <Playground id="#1AGCWP#1" title="Save Scene" description="Example of saving a scene." image="/img/playgroundsAndNMEs/pg-1AGCWP-1.webp"/>

## Meshes

The following code shows the changes needed to download only a mesh to your computer.

```javascript
let objectUrl;
function doDownload(filename, mesh) {
  if (objectUrl) {
    window.URL.revokeObjectURL(objectUrl);
  }

  const serializedMesh = BABYLON.SceneSerializer.SerializeMesh(mesh);

  const strMesh = JSON.stringify(serializedMesh);

  if (filename.toLowerCase().lastIndexOf(".babylon") !== filename.length - 8 || filename.length < 9) {
    filename += ".babylon";
  }

  const blob = new Blob([strMesh], { type: "octet/stream" });

  BABYLON.Tools.Download(blob, filename);
}
```



## Overview

The glTF Exporter allows Babylon scenes to be exported to [glTF 2.0](https://www.khronos.org/gltf/), 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

<Alert severity="warning" title="Warning" description="The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN."/>

To quickly use the glTF Exporter on a page, import the compiled UMD JavaScript from the Babylon CDN like so:

<CodePen pen="raNGBqG" tab="html,result" title="glTF Exporter - Using the CDN" />

### NPM

When ready to build and bundle an app, use the `@babylonjs/serializers` ES6 package:

```bash
npm install @babylonjs/core @babylonjs/serializers
```

```javascript
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:

```javascript
GLTF2Export.GLTFAsync(scene, "fileName").then((gltf) => {
  gltf.downloadFiles();
});
```

To download a `.glb`, simply replace the `GLTFAsync` static function with `GLBAsync`:

```javascript
GLTF2Export.GLBAsync(scene, "fileName").then((glb) => {
  glb.downloadFiles();
});
```

## Export options

The glTF Exporter accepts an optional `options` parameter with various functions and properties.

```typescript
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](https://github.com/google/draco?tab=readme-ov-file#description).

## 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:

```typescript
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](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/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](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/EXT_mesh_gpu_instancing)
- ❌ Mesh Quantization Extension [KHR_mesh_quantization](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_mesh_quantization)
- ✔️ Draco Compression Extension [KHR_draco_mesh_compression](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression)
  - There is currently no built-in support for roundtripping Draco-compressed glTF assets.
- ❌ Meshopt Compression Extension [EXT_meshopt_compression](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Vendor/EXT_meshopt_compression/README.md)
- ❌ Pivot points

##### Materials

- ✔️ Metallic-Roughness [pbrMetallicRoughness](https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#metallic-roughness-material)
  - For `StandardMaterial`, `PBRSpecularGlossinessMaterial`, and any `PBRMaterial` whose `PBRMaterial.isMetallicWorkflow() === false`, the material will be converted to a metallic-roughness workflow while matching the original as closely as possible, though not all of their original Babylon.js features are supported in glTF.
- ✔️ Occlusion, Roughness, Metallic (ORM) map
- ✔️ Alpha coverage modes
- ✔️ Double-sided materials
- ❌ Specular-Glossiness Extension [KHR_materials_pbrSpecularGlossiness](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_pbrSpecularGlossiness)
  - `SpecularGlossiness` has been superseded by KHR_materials_specular. `KHR_materials_pbrSpecularGlossiness` will not be supported.
- ✔️ Index of Refraction Extension [KHR_materials_ior](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_ior)
- ✔️ Volume Extension [KHR_materials_volume](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_volume)
- ✔️ Unlit Materials Extension [KHR_materials_unlit](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_unlit)
- ❌ Material Variants Extension [KHR_materials_variants](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_variants)
- ✔️ Clearcoat Extension [KHR_materials_clearcoat](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_clearcoat)
- ✔️ Specular Extension [KHR_materials_specular](https://github.com/KhronosGroup/glTF/pull/1719/files)
- ✔️ Transmission Extension [KHR_materials_transmission](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_transmission)
- ✔️ Diffuse Transmission Extension [KHR_materials_diffuse_transmission](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_diffuse_transmission)
- ✔️ Dispersion Extension [KHR_materials_dispersion](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_dispersion)
- ✔️ Anisotropy Extension [KHR_materials_anisotropy](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_anisotropy)
- ✔️ Emissive Strength Extension [KHR_materials_emissive_strength](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_emissive_strength)
- ✔️ Iridescence Extension [KHR_materials_iridescence](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_iridescence)
- ✔️ Sheen Extension [KHR_materials_sheen](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_sheen)

##### Textures

- ✔️ PNG export
- ⚠️ JPG, WEBP export
- ✔️ Texture reuse
- ✔️ Texture Transform Extension [KHR_texture_transform](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_transform)
- ❌ Basis Universal Texture Compression Extension [KHR_texture_basisu](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_basisu)

##### 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](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_animation_pointer)

##### Metadata

- ✔️ Extras Data
- ❌ XMP Metadata [KHR_xmp_json_ld](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_xmp_json_ld)
- ⚠️ Asset Info
  - Copyright field specification not supported.



# Exporters
A range of 3D graphics software packages that can export files in a form that Babylon.js can import, together with hints and tips on getting the best from the export.


# Coroutines in Babylon.js

## Introduction

Babylon 5.0 brings with it a new way to write logic that runs over time:
coroutines!

Developers with experience using
[Unity 3D](https://docs.unity3d.com/Manual/Coroutines.html) and certain [native APIs](https://en.cppreference.com/w/cpp/language/coroutines) may already be familiar with some ideas and usages of coroutines. Broadly speaking, a coroutine is simply a function which can be paused and resumed.
In Babylon.js, we provide coroutine support through the `Observable` class to allow logic to be "spread" across multiple moments -- most commonly across multiple frames.

## Multi-frame Logic

Suppose you had a sequence of actions which were logically contiguous, but which you didn't want to all happen on the same frame. For example, suppose you want to spawn three meshes, but you don't want to spawn them all on the same frame and risk causing a frame hitch. Logically, then, what you want to do is something like the following:

- Spawn the first mesh.
- Wait until the next frame.
- Spawn the second mesh.
- Wait until the next frame.
- Spawn the third mesh.

Without coroutines, there are a number of varyingly-tricky things you could do to accomplish this with work queues, daisy-chained promises/callbacks, etc. With coroutines, however, you can do this pretty much by writing out the logic above directly.

```javascript
const spawnMeshesCoroutine = function* () {
  spawnTheFirstMesh();
  yield;
  spawnTheSecondMesh();
  yield;
  spawnTheThirdMesh();
};
scene.onBeforeRenderObservable.runCoroutineAsync(spawnMeshesCoroutine());
```

This coroutine will cause the logic of spawning the three meshes to be spread across three frames. If you run the above code on frame 100, for example, then `spawnTheFirstMesh` will be called on frame 100, `spawnTheSecondMesh` will be called on frame 101, and `spawnTheThirdMesh` will be called on frame 102. And, just like that, you've got logic running over multiple frames!

## How It Works

Babylon.js coroutines combine
[JavaScript generators](https://javascript.info/generators) with [`Observable`s](https://doc.babylonjs.com/divingDeeper/events/observables) to make it as easy as possible to spread logic across multiple frames.
At a high level, generator functions (an ES6 feature characterized by the `function*` syntax) don't return a simple return value object like traditional functions do. Instead, they return an intermediate object which allows the code inside the function to be run in "chunks," with the different chunks separated using the keyword `yield`. This intermediate object can then be invoked repeatedly, and each time it's invoked the generator function will "resume" from the last place it "paused" and keep going until it either gets to the next `yield` or reaches the end of the function.

This intermediate, repeatedly-invokable object is what `Observable.runCoroutineAsync` takes as an argument. The observable on which the coroutine is running will then invoke the generator -- causing another "chunk" of the coroutine's code to run -- every time that `Observable` itself is notified. This makes it very easy to write logic that "advances" every time a certain event monitored by an `Observable` occurs.

## Coroutines and Asynchronism

Coroutines are a clean and easy way to spread logic out over time, but they are not truly asynchronous in the same way as, for example, `Promise`s. Coroutines are polled per frame (or, more accurately, per `Observable`
notification), so they work very well for logic that happens densely -- for example, a logic sequence taking place over a series of consecutive frames. `Promise`s, by contrast, work very well for logic that happens
more sparsely -- network requests, file I/O, WebWorker calls, etc.
Coroutines and true asynchrony thus have separate but complementary strengths, so Babylon.js makes it easy to use a coroutine within a true async method and _vice versa_.

`Observable.runCoroutineAsync`, as the name implies, returns a `Promise<void>` which will either be resolved when the coroutine finishes or rejected if the coroutine is cancelled. This allows coroutines to be `await`ed as though they were true async functions. For example, the following code will print "Start", wait one second, print "A" and then "B" on back-to-back frames, then wait another second before printing "End".

```javascript
const coroutineFunc = function* () {
  console.log("A");
  yield;
  console.log("B");
};

const asynchronousFunc = async function () {
  console.log("Start");
  await BABYLON.Tools.DelayAsync(1000);
  await scene.onBeforeRenderObservable.runCoroutineAsync(coroutineFunc());
  await BABYLON.Tools.DelayAsync(1000);
  console.log("End");
};

asynchronousFunction();
```

Similarly, it's just as easy to pause a coroutine until a truly asynchronous function has completed. This is achieved using the `yield` keyword. The specifics are beyond the scope of this document, but `yield` can be thought of as an intermediate `return` command that pauses a generator function rather than terminating it. In Babylon.js coroutines, we typically use `yield` by itself to "return" nothing. The coroutine system will
interpret this as a command to pause the coroutine now and resume it the next time the `Observable` is notified. However, we can also `yield` a `Promise`:

```javascript
yield BABYLON.Tools.DelayAsync(1000);
```

When we `yield` a `Promise`, the coroutine system will again immediately pause the coroutine for now; however, it won't resume it until the first time the `Observable` is notified _after_ the yielded `Promise` has been resolved. Thus, yielding a `Promise` in a coroutine is very much like `await`ing a `Promise` in a true asynchronous function: it suspends execution of the function in question until the `Promise` is resolved.

```javascript
const asynchronousFunc = async function () {
  await BABYLON.Tools.DelayAsync(1000);
};

const coroutineFunc = function* () {
  console.log("A");
  yield;
  console.log("B");
  yield asynchronousFunc();
  console.log("C");
  yield;
  console.log("D");
};

scene.onBeforeRenderObservable.runCoroutineAsync(coroutineFunc());
```

This code snippet shows a coroutine `yield`ing a `Promise`; it will print "A" and "B" in back-to-back frames, then wait for one second, then print "C" and "D" in back-to-back frames.

## Advanced Usage

The examples above have all illustrated simple, linear, finite logic sequences, but coroutines are not confined to this. Coroutines can be infinite, branching, and arbitrarily complex. In fact, it is entirely possible to write an entire core logic loop using coroutines.

```javascript
const playGame = function* () {
  displayGameLogo();

  while (!enterKeyPressed() && !escapeKeyPressed()) {
    yield;
  }

  if (escapeKeyPressed()) {
    return;
  }

  yield loadTheSceneAsync();

  spawnTheFirstMesh();
  yield;
  spawnTheSecondMesh();
  yield;
  spawnTheThirdMesh();
  yield;

  while (!escapeKeyPressed()) {
    if (jumpButtonPressed()) {
      // 30 frame uninterruptable parametric jump animation
      const jump = function* () {
        for (let t = 0; t <= Math.PI; t += Math.PI / 30) {
          playerCharacter.y = Math.sin(t);
          yield;
        }
      };
      // Suspend game logic until jump animation is complete
      // (Nonsensical thing to do, just for demonstration purposes)
      yield scene.onBeforeRenderObservable.runCoroutineAsync(jump());
    }

    yield;
  }

  yield saveGameStateAsync();

  showGoodbyeMessage();
};
scene.onBeforeRenderObservable.runCoroutineAsync(playGame());
```


Exporters

Coming next

3DS MAX Plugin

How to install the 3DS MAX plugin.

glTF Exporter

The glTF Exporter allows Babylon.js scenes to be exported to the [glTF 2.0 format]

How to export 3DS MAX scene as glTF

With the 3DS MAX plugin, you can also export your project to glTF 2.0 format.

Blender to Babylon.js exporter

How to export from Blender to import into Babylon.js.

Blender Tips

Tips on exporting from Blender.

Blender to BJS, using glTF

How to export from Blender to gltf.

Exporting Bones from 3D MAX

Babylon.js Editor tool to preview, edit and add materials.

Export from Cheetah to Babylon.js

How to export from Cheetah to Babylon.js.

Install the Maya Plugin

How to install the Maya plug-in.

Export Maya scene as glTF

How to export a Maya scene as glTF.

Mixamo to Blender to Babylon.js

The workflow for exporting from Mixamo to Babylon.js via Blender.

Save Your Scene or Meshes

Using the scene serializer

3MF Exporter

Documentation page for 3MF Exporter