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.
An extension named Tower of Babel can also be used as exporter. It exports JavaScript modules with in-line geometry and simplifies the loading process. See its readme or that of the QueuedInterpolation extension, which it is part of, to know more about its functionalities, and access its proper documentation.
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. - (optionnal) If you already have an old version installed, search for Babylon.js into the filter, expand infos of BabylonJS 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 |
|
Blender Exporter panel |
|
World
Blender Render
Blender | BJS equivalent |
---|---|
Blender World |
|
Blender Exporter panel |
|
Object
Blender | BJS equivalent |
---|---|
Blender | BJS equivalent
|
Blender Transform | BJS equivalent
|
Blender Relations | BJS equivalent
|
Constraints
Blender | BJS equivalent |
---|---|
Blender | BJS equivalent
|
Cameras
Blender | BJS equivalent |
---|---|
Blender Lens |
|
Blender Exporter panel |
|
Lights
Blender | BJS equivalent |
---|---|
Blender Lamp |
|
Blender Spot Shape (only available when light type is Spot) |
|
Blender Exporter panel |
|
Meshes
Blender | BJS equivalent |
---|---|
Blender Normals | Auto Smooth is often use by Blender users, but is not supported. Use an edge split modifier instead, see tip. |
Blender UV Maps |
|
Blender Vertex Colors |
|
Blender Exporter panel |
|
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
Blender | BJS equivalent |
---|---|
Blender |
|
Blender Diffuse |
|
Blender Specular |
|
Blender Shading |
|
Blender Transparency |
|
Specials
- you can temporary switch to Blender Game to gain access to some materials settings:
Blender | BJS equivalent |
---|---|
Blender Game Settings |
|
Cycles Render
Blender | BJS equivalent |
---|---|
Blender Node Editor | BJS equivalent Exporter will do automatic baking, and try to detect some nodes:
|
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
|
Blender Texture Type | BJS equivalent
|
Blender Image | BJS equivalent
|
Blender Image Sampling | BJS equivalent
|
Blender Image Mapping | BJS equivalent
|
Blender Mapping | BJS equivalent
|
Blender 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:
- 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#loadBABYLON.SceneLoader.Load("", "babylonJS_logo_v3.babylon", engine, function (scene) {//as this .babylon example hasn't camera in it, we have to create onevar 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).