
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)

Blender Tips

Geometry

Smooth shading

Cameras

ArcRotate

Workflow

Quickly Export

Animation

Commons

One file per animated object

Rotation mode

Armatures

Maximum ## of influencers fix