
Since Babylon and Blender often do things differently, it can sometimes be a pain working with both of them together. Here's a few tips that will smooth things out a bit.

## Geometry

### Smooth shading

If you export the default Blender scene to BJS, you'll shortly see that your cube doesn't look like exactly as it should:

![smooth-shading-issue](/img/exporters/blender/smooth-shading-basic-issue.png)

This is because a 3D modeler viewport don't act like a 3D realtime engine. By default, Blender always create object using flat shading mode.
If you want to see your scene smoothed as in BJS, you have to select all your objects and click to _Shading_ > _Smooth_ in 3D View Toolshelf.

![blender-smooth-shading](/img/exporters/blender/blender-smooth-shading.png)

Now, you're cube looks ugly. You have to set up its sharpness, by adding an _edge split_ modifier, and play with edge angle and sharp edges. Job done!

![blender-sharp-edges](/img/exporters/blender/blender-smooth-shading-sharpness.png)

---

## Cameras

### ArcRotate

When choosing arc rotate camera type, you have to add a target to your camera.

To do that:

- first select your camera, then its target (object or empty for example),
- 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 a easy to use shortcut to export to babylon! For example, you can use _Ctrl-E_.

![quick-export-shortcut](/img/exporters/blender/quick-export-shortcut.png)

---

## Animation

### Commons

#### One file per animated object

Usually, you will have one master scene containing all statics elements, and a blend file for each animated elements.

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 more simple to link groups instead of objects, to update links in an easier way.

#### Rotation mode

By default, Blender use the `XYZ Euler` rotation mode, which is fine for most of cases, but you have to know that `Quaternion` (which avoid gimbal lock issue) 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.png)


## Blender to BJS, using glTF

glTF exporter will allow you to export your scene using PBR workflow.

## Features

Since Blender 2.8, glTF addon comes with Blender enabled by default. You can update it from the official [Github repo](https://github.com/KhronosGroup/glTF-Blender-IO). Official documentation is on [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)).

Axys conventions aren't the same between Blender,Babylon.js (left handed) & glTF (right handed), so you can see below a conversion table to help you about coordinates.

To help transforming, note that theBabylon.js loader will automatically set glTF assets as children of an object:

- named `__root__`
- rotated by default to 180° on Y axys
- 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 above:

```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">
      var canvas = document.getElementById("canvas");
      var engine = new BABYLON.Engine(canvas, true);

      // here the doc for Load function: //doc.babylonjs.com/api/classes/babylon.sceneloader#load
      BABYLON.SceneLoader.Load("", "WaterBottle.glb", engine, 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 want loading the scene, for some security issues (e.g.: Chrome). In this case, you have to open the html file through a webserver ([local](/extensions/Babylon.js+ExternalLibraries/Running_a_local_webserver_for_BabylonJs) or not), or try into another browser (e.g.: Firefox, Edge)

- ... profit!

![blender gltf scene loaded in BJS](/img/exporters/blender/gltf/gltf-loaded.png)

Blender Tips

Geometry

Smooth shading

Cameras

ArcRotate

Workflow

Quickly Export

Animation

Commons

One file per animated object

Rotation mode

Armatures

Maximum ## of influencers fix