resources

Blender to glTF


Table of contents

Blender to BJS through glTF

glTF exporter will allow you to export your scene using PBR workflow.

Features

glTF exporter is directly provided from KhronosGroup. You can find the github repository here , check their readme to know all you need.

However here some shortcuts to key points of their documentations:

At this moment, the Cycles Principled Shader is not yet directly supported (probably waiting for Blender 2.8 version). As the doc say, you have to append their custom node group into your blend scene.

A good practice could be to import the default glTF material as fake user, and then assign only a copy of it on your objects, so as to always keep the default gltf materials settings on your hands.

Try it out!

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

Example

Let's say we want try exporting the KhronosGroup 02_suzanne.blend scene from their repo:

  • export to glTF in a folder.
  • the HDR environment need a little tweak, you can also use the environment from the BJS repo. Place the converted environment texture in the glTF folder too.
  • create a file named index.html, and copy the code above:
<!doctype html>
<html>
<head>
    <title>Default .gltf 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;
        }

        #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: http://doc.babylonjs.com/api/classes/babylon.sceneloader#load
        BABYLON.SceneLoader.Load("", "02_suzanne.gltf", engine, function (scene) {

            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 1, 4, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            //we tell to BJS where to find the environement texture
            var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("environment.dds", scene);
            hdrTexture.name = "envTex";
            hdrTexture.gammaSpace = false;
            scene.createDefaultSkybox(hdrTexture, true, 1000, 0);

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

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

gltf 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 gltf scene loaded in BJS