Blender to Babylon.js exporter

The Blender export plugin can be found on github repository. We assume your using the last version.

Note that v6 is for Blender 2.8 (currently in beta), v5 for Blender 2.79b or below can be found in the deprecated folder.

Installation

This add-on use the standard Blender installation procedure:

• Download the last version from github (click on the zip file with the appropriate exporter version you'd like to download: Blender2Babylon-X.X.zip and then hit the "Download" button).
• In Blender, go to File menu > User Preferences.
• Switch to the Add-ons tab.
• (optional) If you already have an old version installed, search for Babylon.js into the filter, expand infos ofBabylon.js add-on and click Remove button.
• Click the Install from File... button at the bottom.
• Select the zip file and click the Install Add-on from File... button.
• Check the box to enable it.
• Click Save User Settings to enable it at every Blender launch.

Features

Scene

Blender	BJS equivalent
Blender Scene	BJS equivalent Camera: set scene activeCamera
Blender Exporter panel	BJS equivalent Export: All: all the file will be exported Selected: only selection will be exported Layers: hidden layers will not be exported Max Decimal Precision: how values are rounded during export

World

Blender Render

Blender	BJS equivalent
Blender World	BJS equivalent Horizon Color: scene clearColor Ambient Color: scene ambientColor
Blender Exporter panel	BJS equivalent Mist: when Blender Render Mist is enabled, you have access to Fog Mode & Fog Density parameters

Object

Blender	BJS equivalent
Blender	BJS equivalent object name will be exported as it is
Blender Transform	BJS equivalent Position Rotation XYZ Euler Quaternion Scale do not forget to apply Scale before exporting: 'Ctrl' + 'A' > 'Scale'
Blender Relations	BJS equivalent parenting is supported

Constraints

Blender	BJS equivalent
Blender	BJS equivalent Track To: useful when using ArcRotate camera (tip)

Cameras

Blender	BJS equivalent
Blender Lens	BJS equivalent Field of View: fov Clipping: minZ & maxZ
Blender Exporter panel	BJS equivalent Camera Type, choose between: Arc Rotate (tip) Device Orientation Follow Gamepad Touch Universal Virtual Joysticks VR Dev Orientation Free Web VR Free

Lights

Blender	BJS equivalent
Blender Lamp	BJS equivalent Sun as Directionnal, Area as Point, other named like in BJS This Layer Only: includedOnlyMeshes when Sphere is checked, Distance value is exported as range
Blender Spot Shape (only available when light type is Spot)	BJS equivalent Size: Angle Blend: value * 2 = exponent
Blender Exporter panel	BJS equivalent Shadow Map (only for directional lights): None Standard Poisson ESM Blur ESM

Meshes

Blender	BJS equivalent
Blender Normals	BJS equivalent Auto Smooth is often use by Blender users, but is not supported. Use an edge split modifier instead, see tip.
Blender UV Maps	BJS equivalent UVMap: coordinatesIndex limited to 2 channels
Blender Vertex Colors	BJS equivalent if multiples layers exist, they will be merge
Blender Exporter panel	BJS equivalent Tags: allow using scene.getMeshesByTags() Materials: Name Space: automatically add a suffix to the mesh materials. Default is Blender filename. Procedural Textures / Cycles Baking: texture baking settings when using procedural textures (Blender Render) or Cycles

Materials

General

• as you can notice in BJS mesh panel, materials will be suffixed by .babylon filename,
• other options can be found on this mesh panel, like max simultaneous lights, texture size for baking, etc,
• texture baking will be automatic when:
  • cycles render is the current render engine,
  • procedural textures are used.

Blender Render on Babylon.js

Blender	BJS equivalent
Blender	BJS equivalent multi-materials are supported
Blender Diffuse	BJS equivalent color intensity is multiplied by intensity value
Blender Specular	BJS equivalent color intensity is multiplied by intensity value Hardness: specularPower
Blender Shading	BJS equivalent Emit: diffuse color * value Ambient: diffuse color * value
Blender Transparency	BJS equivalent when enabled, set alpha value under Z Transparency

Specials

• you can temporary switch to Blender Game to gain access to some materials settings:

Blender	BJS equivalent
Blender Game Settings	BJS equivalent Backface culling: true by default Face Orientation: Normal Billboard

Cycles Render

Blender	BJS equivalent
Blender Node Editor	BJS equivalent Exporter will do automatic baking, and try to detect some nodes: Diffuse BSDF Ambient Occlusion

Textures

General

• Blender can handle packed images, even if their isn't source file on disk, but you have to unpack all before export,
• about automatic baking, see Materials.

Blender Render

Blender	BJS equivalent
Blender	BJS equivalent multiple textures can be assigned if two textures are assigned to the same Influence (see below), automatic baking will be used this name is only used in Blender
Blender Texture Type	BJS equivalent as seen above, this name is only used in Blender texture type: for image file, choose Image or Movie for procedural textures, choose any one but voxel data, point density, ocean
Blender Image	BJS equivalent texture filename will be texture name in BJS
Blender Image Sampling	BJS equivalent Use Alpha: hasAlpha
Blender Image Mapping	BJS equivalent Extension: choosing Clip will set Wrap value to 0
Blender Mapping	BJS equivalent Coordinates: choosing between UV: EXPLICIT_MODE Reflection: by setting Projection to Sphere, you gain access to spheremaps through SPHERICAL_MODE Offset X and Y: uOffset and vOffset Size X and Y: uScale and vScale
Blender Influence	BJS equivalent Be sure to enable only one influence by texture, to avoid automatic baking.

Commons & Good practices

• you should export one .babylon file per animated object to make your life easier (once in BJS, but also to handle the timeline in Blender). See tip for a basic workflow.
• be sure, before starting animation in Blender, that your objects have their transformations applied! (3DView > Object > Apply)

Classic Animations

You will find an example on this .zip archive. 3D sources files are on sources folder, BJS app is on BJS folder.

In sources, we have our master scene, with only static objects (on the layer 1), and just for us to see it, we have the logo linked on the layer 6. When exporting, take care to have only layer 1 active, as we have checked in the scene panel Export only selected layers.

Once exported, you can see in BJS/index.html that we create our main scene using this .babylon: line 36

BABYLON.SceneLoader.Load("", "01.master-static-scene.babylon", engine, function (scene) { });

Same way for out animated object in sources/02.classic-animation.blend: layer 1 is for our object, layer 6 is just for us to see the main scene in our .blend. Export only selected layers is used to help us exporting only the first layer to babylon.

Once exported, we can import our meshes inside the onSuccess of our Loader above. Check on BJS/index.html, line 64:

BABYLON.SceneLoader.ImportMesh("", "", "02.classic-animation.babylon", scene, function (importedMeshes){ });

Now, you already have a basic scene with animations autoplaying in it.

Armatures

• you can use any Blender rotation mode you want, the animation will be kind of baked during the export

Try it out

Once your scene is exported, you have multiple solutions to test it:

• quick check it into the sandbox
• edit the file through the editor
• use the viewer
• script your own app using the loader

Example

Simple scene

Let's say you have exported your first scene. In this example we will use blend files of the BJS logo:

• export the babylon into a folder
• create a file named index.html, and copy the code above:

<!DOCTYPE html>
<html>
  <head>
    <title>Default .babylon loading scene</title>
    <meta charset="UTF-8" />
    <!-- this link to the preview online version of BJS -->
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <!-- this is needed for BJS to load scene files -->
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <style>
      html,
      body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        color: white;
      }

      #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/typedoc/classes/babylon.sceneloader#load
      BABYLON.SceneLoader.Load("", "babylonJS_logo_v3.babylon", engine, function (scene) {
        //as this .babylon example hasn't camera in it, we have to create one
        var camera = new BABYLON.ArcRotateCamera("Camera", 1, 1, 4, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, false);

        scene.clearColor = new BABYLON.Color3(1, 1, 1);
        scene.ambientColor = new BABYLON.Color3.White();

        engine.runRenderLoop(function () {
          scene.render();
        });

        window.addEventListener("resize", function () {
          engine.resize();
        });
      });
    </script>
  </body>
</html>

• double-click on the index.html file... profit!
  • 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 or not), or try into another browser (e.g.: Firefox, Edge).

Animated object