Babylon.js: How to load a .babylon file produced with Blender


In a previous post, I described Babylon.js, a brand new 3D engine for WebGL and JavaScript. Among others features, Babylon.js is capable of loading a JSON file through the .babylon file format.

During this post, I will show you how to use Babylon.js API to load a scene created with Blender.

image

One important thing to remember with Blender is to use the Blender Render if you want to export your scene to Babylon.js

Creating a scene and exporting a .babylon file with Blender

In my previous post, I already described how to install the .babylon exporter in Blender, but for the sake of comprehension, I copy/paste the process here:

First of all, please download the exporter script right here: https://github.com/BabylonJS/Babylon.js/tree/master/Exporters/Blender

To install it in Blender, please follow this small guide:

  • Unzip the file to your Blender’s plugins folder (Should be C:\Program Files\Blender Foundation\Blender\2.67\scripts\addons for Blender 2.67 x64).
  • Launch Blender and go to File/User Préférences/Addon and select Import-Export category. You will be able to activate Babylon.js exporter.

image

  • Create your scene
  • Go to File/Export and select Babylon.js format. Choose a filename and you are done !

image

Once the exporter is installed, you can unleash your artist side and create the most beautiful scene your imagination can produce. In my case, it will be fairly simple:

  • A camera
  • A point light
  • A plane for the ground
  • A sphere

image

Just to be something a bit less austere, I will add some colors for the ground and the sphere:

image

I will also add a texture for the sphere. This texture will be used for the diffuse channel of the material:

image

Please pay attention to:

  • Use Alpha checkbox to indicate to Babylon.js to use alpha values from the texture
  • Color checkbox to indicate that this texture must be use for diffuse color

image

Once you are satisfied (You can obviously create a more complex scene), just go to File/Export/Babylon.js to create your .babylon file.

image

Using the Babylon.js Sandbox

There is a great and easy way to test your scene: the Babylon.js Sandbox. With a single drag’n’drop into a web page, you will be able to test your scene without any more setup:

http://blogs.msdn.com/b/davrous/archive/2013/12/17/designers-test-amp-create-your-webgl-3d-worlds-inside-the-babylon-js-sandbox-amp-editor.aspx

Loading your .babylon inside your page/app

First of all, you should create a simple html web page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Using babylon.js - How to load a scene</title>
    <script src="babylon.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
 </body>
</html>

This page is pretty simple because all you need is just a canvas and a reference to babylon.js.

Then you will have to use BABYLON.SceneLoader object to load your scene. To do so, just add this script block right after the canvas:

<script>
    if (BABYLON.Engine.isSupported()) {
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        BABYLON.SceneLoader.Load("", "scene.babylon", engine, function (newScene) {
            // Wait for textures and shaders to be ready
            newScene.executeWhenReady(function () {
                // Attach camera to canvas inputs
                newScene.activeCamera.attachControl(canvas);

                // Once the scene is loaded, just register a render loop to render it
                engine.runRenderLoop(function() {
                    newScene.render();
                });
            });
        }, function (progress) {
            // To do: give progress feedback to user
        });
    }
</script>

the Load function takes the following parameters:

  • scene folder (can be empty to use the same folder as your page)
  • scene file name
  • a reference to the engine
  • a callback to give you the loaded scene (in my case, I use this callback to attach the camera to the canvas and to launch my render loop)
  • a callback for progress report

Once the scene is loaded, just wait for the textures and shaders to be ready, connect the camera to the canvas and let’s go!

Fairly simple, isn’t it?

Please note that the textures and the .babylon file must be side by side

Another function is also available to interact with .babylon files: BABYLON.SceneLoader.importMesh:

BABYLON.SceneLoader.ImportMesh("spaceship", "Scenes/SpaceDek/", "SpaceDek.babylon", scene, function (newMeshes, particleSystems) {
});

This function is intended to import meshes (with their materials and particle systems) from a scene to another. It takes the following parameters:

  • object name (if you omit this parameter, all the objects are imported)
  • scene folder (can be empty to use the same folder as your page)
  • scene file name
  • a reference to the target scene
  • a callback to give you the list of imported meshes and particle systems

Adding MIME types to your web server

You will need to authorize .babylon MIME type on your web server (and furthermore you will also need to authorize .babylonmeshdata MIME type if you want to use incremental loading)

For IIS, you will need to update your web.config with this section:

Comments (42)

  1. Tj Gienger says:

    This is incredible. My first question, is it possible to hide the mouse cursor and allow for unrestricted turn radius? As it is now once you reach the edge of the screen you can no longer turn.

    Second question, do you have a forum where people can post questions/comments? :)

  2. Yes you can capture the mouse with JavaScript and hide the cursor with CSS.

    Babylon is on Github where you will also find a wiki and an issue tracker

  3. Hubert Wilk says:

    About Blender – it is quite good but problem start when you rotate some mesh and export them , I try diffrent axis and just look wrong , completly diffrent angles on scene then on stage in blender ? is any help in this direction !?

    Thank you

  4. Could you try with the latest version on github?

  5. Marcin says:

    When I click on this link: tutorials/blogs/loadScene/loadscene.html – everything works fine.

    But when I get a loadScene.zip file, unpack it and wants to run from the hard disk or if upload this file on me server, nothing happens – display a white screen.

    What am I doing wrong?

  6. David Catuhe says:

    Hello, you have to use a web server to be able to run the files (security prevents the usage of these files on localhost :()

  7. Marcin says:

    Thank you for the quick reply :)

    I have uploaded the files to my web server and nothing.

    Maybe there is something wrong with the server?

    I tested on another server, and also nothing.

    This is link to files on my web server: beetle.pl/3d/loadscene.html (you can remove the link from comment, but please view this example)

  8. David Catuhe says:

    You should need to authorize .babylon and .babylonmeshdata MIME type on your web server

  9. Marcin says:

    Thank you very much, I will test this.

  10. Dida says:

    when I try this tuto, I don't see the floating sphere.

    Is there a problem with texture?

  11. David Catuhe says:

    Even using the provided sample?

    Do you host the files into a web server? If yes did you authorize .babylon and .babylonmeshdata MIME types?

  12. Dida says:

    In fact, I just see that I have the pb on Chrome but not on Firefox

  13. William L says:

    Hi, I have a problem to display the textures of the models which I creat with Blender on my wamp local web server.. and for the previews, I used Chrome and Firefox..  I can just see the models but without them textures.. There is also the same problem on this demo page. I can't see the texture of the sphere with Chrome.. but with Firefox I can see something.. Any idea about the settings I should use on blender? I had a look on the tutorial as well to export with Blender.. I tried to check the json file and I can see the png information is on it.. I hope someone can help me.. :)

    "diffuseTexture:{"name":"brick_base.png","level":1.0000,"hasAlpha":1.0000,"coordinatesMode":0,"uOffset":0.0000,"vOffset":0.0000,"uScale":1.0000,"vScale":1.0000,"uAng":0.0000,"vAng":0.0000,"wAng":0.0000,"wrapU":true,"wrapV":true,"coordinatesIndex":0}

  14. David Catuhe says:

    You can see the good result with Firefox and not Chrome?? In this case this is not related to Blender but to your driver perhaps

  15. William L says:

    Thx for your fast answer. On this page as example I can see the sphere with Firefox but not with Chrome.. Yesterday, after this post, I tried to apply my texture on different way in blender and I found that if I do an unwarp and apply my texture I wont see any texture on my local server with the.babylon same if the render is good in blender. Same problem if I add a material and put a texture on it.. I don't see anything (like for this sphere example and the 04 Material tutorial on Github which I cannot see the text with Chrome) but..  if I unwarp, then add my texture then add a material with the same texture then I can see it with Chrome, Firefox and Explorer 11! I really don't understand why but at least it works on that way.

  16. William L says:

    I just tried again with the 3 différents browsers this sphere view. The result is with Chrome I can't see the green transparant texture, with IE 11 I can see it but black (I had the same view on my local server), and with Firefox I can see the green texture! Do you really think it is related with my drivers? Then why on Firefox I can see it proprely? and why if I apply the textures with blender on the way I said before it works with the 3 browsers? anyway thanks for you answer :)

  17. David Catuhe says:

    The point is that you need uv map for your meshes in order to display textures. The problem is if you don't specify them even Firefox will not be able to display the texture.

    So for me it is related to driver issue. Could you share somewhere the scene that works only with Firefox?

  18. William L says:

    Thx for you answer and your time! Ok I understand about Blender. I don't need to share another example because the best one is in front of me, on this page. Now I am using Chrome and I can't see the green sphere in the:

    "Playing with your scene

    The result is as expected: an orange plane lighted by a point light with a floating sphere using an RGBA texture for its diffuse color. You can use the mouse and the cursors keys to move:"

    To illustrate this, I have taken few print screen with the differents browsers.

    http://www.dropbox.com/…/A9tGGn8R-A

    On another side, If I use IE11 I can see the transparent floating sphere but the texture is black. Finally, if I use Firefox I can see everything properly! My configuration is a ThinkPad W520 with Windows 7. Yesterday, I tried with a MacBook pro with Chrome installed and I was able to see the sphere on this page… I didn't try yet with another PC with Chrome installed.

    The thing is as I told before,  if I do an UV mapping, and then add after a material with the same texture but with a generated mapping then it works with all the browsers.

    Btw I have another problem but maybe I should ask the question in the page related with this lol.. the video textures make always disconnect my brower after few seconds maybe except the one displayed in flat 2009 but the one on github example gives me the same situation.

    I really want to settle this troubles because actually I am thinking to use babylon.js to realize my Bachelor thesis. :)

  19. David Catuhe says:

    I think the best idea could be to ask your question on the dedicated forum :)

    http://www.html5gamedevs.com/…/16-babylonjs

  20. pradeep says:

    Hi, I have a problem to display the textures of the models which I created with Blender on my xampp local web server. I can just see the models but without them textures. i'm new to babylon.js. Can you explain me how to fix this?

  21. David Catuhe says:

    I need more information to help you. But first of all could you post your question on our forum:

    http://www.html5gamedevs.com/…/16-babylonjs

  22. BlenderFriend says:

    Do you have plans for adding other Blender functionality to Babylon such as node materials? http://www.blend4web.com has them and you may consider to "borrow" it as it is open source.

  23. Daniel says:

    I have a problem, the file location is correct. I use everything in the same folder now and the babylon file is namen scene.babylon, all I see is a white screen and nothing happens :/ It isn't an empty file because the sandbox displays everything correctly.. Please Help!

  24. David Catuhe says:

    Could you post your question on our forum:

    http://www.html5gamedevs.com/…/16-babylonjs

  25. paulqq says:

    Hello, a little late fpr the discussion. do you know how to authorize .babylon and .babylonmeshdata MIME type on my MAMP server? googled it like hours and was unable to do it.

    regards paul

  26. David Catuhe says:

    Hey Paul, could you try to ask this question on our forum?

    http://www.html5gamedevs.com/…/16-babylonjs

  27. relikhunter says:

    hi

    i've tested your code above and created a test scene in Blender, but when it run on my browser (chrome or firefox) a blank page appear, and report onto consolle "WebGL not supported", else when hand-code a scene all works well.

  28. David Catuhe says:

    Could you share your code and your scene so that I can check that?

  29. relikhunter says:

    hi,

    that's my JS code:

    var canvas =document.getElementById("canvas");

    var engine = new BABYLON.Engine(canvas, true);

    var scene = new BABYLON.Scene(engine);

       BABYLON.SceneLoader.Load("", "testSceneFromBlender.babylon", engine, function (newScene) {

               newScene.executeWhenReady(function () {

                   newScene.activeCamera.attachControl(canvas);

                   engine.runRenderLoop(function() {

                       newScene.render();

                   });

                   window.addEventListener("resize", function () {

                       engine.resize();

                   });

                  // sezione per codice caricamento scena… "please wait… loading…"

               });

           });

    and if you want the scene code:

    mmm too many characters, i can't post it.

  30. David Catuhe says:

    Please use our forum(Link on http://www.babylonjs.com)

  31. relikhunter says:

    ok thanks

    it is on html5gamedevs.

  32. Sakrecoer says:

    Thank you for this delicious how to.

    This may come late, but to help out user Hubert Wilk who wrote ont the 15 Oct 2013

    "In blender (…) problem start when you rotate some mesh and export them"

    Have you tried to apply rotation, location and scale in blender (ctrl+a) to your objeccts?

    good luck! and thank you Eternal coding!

  33. Al says:

    Hi. I have the same problem of Marcin, how can I authorize .babylon and .babylonmeshdata MIME type on my web server if Im using Xampp?

  34. Al says:

    Thanks David for the quick answer, I dont know the parameters to add it, would be like this?:

    babylon/x-babylonmeshdata

    for xampp I learn from: community.apachefriends.org/…/viewtopic.php

  35. David Catuhe says:

    I think so but I have to admit that I'm not an Apache user:)

  36. Ronnie says:

    Hi, is possible to install the babylon exporter on Windows 32 bits? because when I try nothing happens or am I doing something wrong?  

  37. David Catuhe says:

    Yes there should be ok. The exporter is a python script (not dependent on the CPU architecture)

  38. vahi says:

    hi

    i am new to babylon, i want to create room outline in 2d view then i want to switch to 3d view, how i can do that.kindly suggest me and tell reference where i can get.

    thanks in Advance

    vahi

  39. Haraso says:

    Hi

    I have a problem with animation.

    In Blender ever everything works fine. When i export it says ok. But when i drop in to sandbox the model is not animating. How can i fix this?

  40. David Catuhe says:

    Hello, you could ask your question on our forum:)

    http://www.html5gamedevs.com/…/16-babylonjs

  41. kang says:

    i use 3dsmax to export a .skp model into .babylon. the position of some meshes  is wrong. i don't know why, can you  help? thanks!