Imported glb/gltf model looks totally black

Questions
1

Hi, i’m trying to import glb/gltf models
But, the model looks totally black.
In sandbox or the other 3d viewers, it looks totally normal.
(I think model/exporter has no problem)
Weirdly, when using scene.createDefaultEnvironment(), the models looks normal.
Is it a bug?
If not, what should i append to my own scene?

(irrelavent parts are omitted)

window.addEventListener('DOMContentLoaded', function(){
        let isKeyPressed = {}; //object for multiple key presses
        let inclinationSpeed = 0.002;
        let canvas = document.getElementById('renderCanvas');
        let engine = new BABYLON.Engine(canvas, true);
        let camera;
        BABYLON.Database.IDBStorageEnabled = true;
        let createScene = function () {Preformatted text
            let scene = new BABYLON.Scene(engine);

            // scene.createDefaultEnvironment({
            //     createSkybox: false,
            //     enableGroundMirror: false,
            // });

            let skyboxMaterial = new BABYLON.SkyMaterial("skyMaterial", scene);
            skyboxMaterial.inclination = 0;
            skyboxMaterial.backFaceCulling = false;
            skyboxMaterial.disableLighting = true;
            let skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);
            skybox.material = skyboxMaterial;
            skybox.renderingGroupId = 0;


            let meshes = [];
            let assetsManager = new BABYLON.AssetsManager(scene);
            let meshTask = assetsManager.addMeshTask("takeName", "", "models/", "untitled.glb");
            meshTask.onSuccess = function (task) {
                var originalMesh = task.loadedMeshes[0];
                for (var i= 0; i< 10; ++i) {
                    for (var j= 0; j< 10; ++j) {
                        console.log(originalMesh);
                        var newClone = originalMesh.clone("index: " + i);
                        newClone.position.y =+ i*3;
                        newClone.position.x =+ j*3;
                        meshes.push(newClone);
                    }
                }
                console.log(task);
            }
            meshTask.onError = function (task, message, exception) {
                console.log(message, exception);
            }
            assetsManager.load();


            let light = new BABYLON.PointLight("light01", new BABYLON.Vector3(0, 100, 100), scene);
            light.shadowEnabled = true;

            camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, true);

            let ground = BABYLON.Mesh.CreateGround("ground", 500, 500, 5, scene);
            ground.position.y = -0.5;
            ground.receiveShadows = true;
            attachImposter(ground,scene,0);

            return scene;
        }

        let scene = createScene();
2

Try creating Hemispheric light and see what will happen. I assume you don’t have light on your scene (i see you have point light but that might not do the job if not set properly).

Use this and see what happens
var light = new BABYLON.HemisphericLight(“HemiLight”, new BABYLON.Vector3(0, 1, 0), scene);

When you use createDefaultEnvironment() it creates light for you. So that might be the reason it works in that case.

2 Likes
3

Thanks for answer.
But i tried it before.
Models internally created do not look black.
Only imported models have problem.

[EDIT: url deleted]

4

Hmm. To be honest I am no sure what is going on. Can you create a playground and import your mesh?

You can see here how can you import your mesh into playground. It will help a lot narrowing down the problem
https://doc.babylonjs.com/resources/external_pg_assets

1 Like
5

Set scene.environmentTexture=… any hdr texture. It’s not a bug, indirect lighting comes from that texture only.

2 Likes
6

Same here and setting a scene.environmentTexture did nothing. Created sphere gets illumination but all meshes coming from glb file (exported from Blender 2.8) are black. The glb file opens fine on Sandbox.

My test scene:

from my index.html:

html_result
index.html_result.png1234×782 31.1 KB

7

same glb dropped on Sandbox:

sandbox_result
sandbox_result.jpg1260×768 152 KB

8

Update: replacing the light by a HemisphericLight it worked (I may have some normal inverted though):

var light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), scene);

Figured out by reading the following post:

1 Like
9

You can also call scene.createDefaultEnvironment() after loading your gltf to get an IBL texture setup for you

10

Thanks… just getting started and help is very welcome. Problem now is that BJ is inverting some normals. I have created a new post as it seems to be an unrelated bug to this post.

11

Why do I see this reflection after calling scene.createDefaultEnvironment()? How to delete it?

Playground (try to rotate the ball)

image
image530×514 51.6 KB

12

you material is probably a PBR which will automatically use the scene environment for IBL. You can set material.reflectionTexture = null;

1 Like