Babylon.js: How to load a .babylon file produced with Blender - Eternal Coding - HTML5 / JavaScript / 3D development - Site Home - MSDN Blogs

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


 

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

  • Comments 36

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:

Leave a Comment
  • Please add 1 and 3 and type the answer here:
  • Post
  • 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? :)

  • 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

  • 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

  • Could you try with the latest version on github?

  • 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?

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

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

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

  • Thank you very much, I will test this.

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

    Is there a problem with texture?

  • Even using the provided sample?

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

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

  • 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}

  • 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

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

Page 1 of 3 (36 items) 123