Load GLTF with EXT_lights_image_based extension

Questions
1

I’m new to Babylon and have a .gltf file that utilizes the EXT_lights_image_based extension. I want to view my scene with babylon but I’ve been unable to get it working anywhere. In the sandbox, I see my entities but the Image based lighting, and corresponding skybox, from the gltf are not applied. I’ve also tried using the previewer in vs code with the same result. Lastly I’ve tried using the code supplied here on the Blender to Gltf page (https://doc.babylonjs.com/resources/blender_to_gltf) to view it using an index.html file. I stringify the gltf file and am using firefox to get around the same site, local file issue. This leaves me with the following:

<!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> -->
        <script src="https://preview.babylonjs.com/loaders/babylon.glTF2FileLoader.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);

            var stringified = "" //my gltf stringified

            // here the doc for Load function: //doc.babylonjs.com/api/classes/babylon.sceneloader#load
            BABYLON.SceneLoader.Load("", "data:" + stringified, engine, function (scene) {

                scene.createDefaultCamera(true, true, true);

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

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

    </html>

Do I need to register the gltf extension loader? If so, how do I do this? I’ve found examples for custom extensions, but none for built-in extensions. My assumption was since EXT_lights_image_based is supported that the image based lighting and skybox supplied by the gltf would be automatically applied to the scene. Any guidance would very helpful.

2

I admit the documentation is a bit light for built-in extensions. The API docs has some minimal info about the extensions that are supported, but it’s bare bones.

There is nothing you need to do to register or enable the extension. It eventually gets set on the environmentTexture of the scene. The sandbox should work with it. It works with the EnvironmentTest sample model. It would help if you can give me a copy of the glTF you are trying to load.

3

It turns out there was an issue with the gltf file I had that prevented the extension from being usable, but thanks for the quick response.

1 Like