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 (Blender2Babylon-X.X.zip, you don't need to unzip).
  • 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.

blender user preferences

Features

Scene

Blender scene properties panel

BlenderBJS equivalent
Blender
Scene scene
  • Camera: set scene activeCamera
Blender
Exporter panelexporter-scene-options
  • 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 world properties panel

Blender Render

BlenderBJS equivalent
Blender
World world-br
  • Horizon Color: scene clearColor
  • Ambient Color: scene ambientColor
Blender
Exporter panel mist
  • Mist: when Blender Render Mist is enabled, you have access to Fog Mode & Fog Density parameters

Object

Blender object properties panel

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

Constraints

Blender constraints properties panel

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

Cameras

Blender cameras properties panel

BlenderBJS equivalent
Blender
Lenslens
  • Field of View: fov
  • Clipping: minZ & maxZ
Blender
Exporter panel exporter-cameras-options
  • Camera Type, choose between:
    • Arc Rotate (tip)
    • Device Orientation
    • Follow
    • Gamepad
    • Touch
    • Universal
    • Virtual Joysticks
    • VR Dev Orientation Free
    • Web VR Free

Lights

Blender lights properties panel

BlenderBJS equivalent
Blender
Lamp lamp
  • 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) spot-shape
  • Size: Angle
  • Blend: value * 2 = exponent
Blender
Exporter panel exporter-lights-options
  • Shadow Map (only for directional lights):
    • None
    • Standard
    • Poisson
    • ESM
    • Blur ESM

Meshes

Blender meshes properties panel

BlenderBJS equivalent
Blender
Normals normals
Auto Smooth is often use by Blender users, but is not supported. Use an edge split modifier instead, see tip.
Blender
UV Maps uv-maps
  • UVMap: coordinatesIndex
  • limited to 2 channels
Blender
Vertex Colors vertex-colors
  • if multiples layers exist, they will be merge
Blender
Exporter panel exporter-meshes-options
  • 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

Blender materials properties panel

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

BlenderBJS equivalent
Blender
header
  • multi-materials are supported
Blender
Diffuse diffuse
  • color intensity is multiplied by intensity value
Blender
Specular specular
  • color intensity is multiplied by intensity value
  • Hardness: specularPower
Blender
Shading shading
  • Emit: diffuse color * value
  • Ambient: diffuse color * value
Blender
Transparency transparency
  • when enabled, set alpha value under Z Transparency
Specials
  • you can temporary switch to Blender Game to gain access to some materials settings:

blender-game

BlenderBJS equivalent
Blender
Game Settings game-settings
  • Backface culling: true by default
  • Face Orientation:
    • Normal
    • Billboard

Cycles Render

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

Textures

Blender textures properties panel

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

BlenderBJS equivalent
Blender
header
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 type-image
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 image
BJS equivalent
  • texture filename will be texture name in BJS
Blender
Image Sampling image-sampling
BJS equivalent
  • Use Alpha: hasAlpha
Blender
Image Mapping image-mapping
BJS equivalent
  • Extension: choosing Clip will set Wrap value to 0
Blender
Mapping mapping
BJS equivalent
Blender
Influence influence
BJS equivalent
Be sure to enable only one influence by texture, to avoid automatic baking.

Animation

(Note: this part is under construction. You can also check this forum thread where some informations are centralised before it is written here.)

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:

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>

babylon default folder example

  • 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).

blender babylon scene loaded in BJS

Animated object