Black model shows up when viewed using GLTF-Viewer with add lights enabled

The GLTF file uploaded to gltf-viewer shows up completely black without enabling add lights option in the viewer even though the glTF file has internally reference KHR_lights_punctual

The same GLTF file gets rendered properly on babylonjs.sandbox with light.

Does babylon.js add default light on top of it or is there something different with three.js glTF loader and babylon.js glTF loader?

Here is the GLTF file which I am using - https://www.dropbox.com/s/afrkcxcqt76yri5/test19.gltf?dl=0

I have tested your model and it works fine in the Threejs viewer without adding any other light source. it seems babylonjs sandbox and threejs viewer recognizes the model’s light as directional light instead of a pointlight or rather it converts it into directional light by default. Anyway, i made a jsfiddle where i pulled the original light source from the model and added it to the scene. This is what the model should look like originally with its own light source:

http://jsfiddle.net/realhunts/akon94pq/15/

it seems babylonjs sandbox and threejs viewer recognizes the model’s light as directional light instead of a pointlight or rather it converts it into directional light by default.

Point lights are not converted to directional lights, no. That would be a serious bug if so, it’s more likely that a viewer has missed the light in the model and used a default directional light instead.

Viewing the model in http://gltf-viewer.donmccurdy.com/, the point light is there, but its values do not look physically-based. It has an intensity of 0.2 candela (a candle is roughly 1 candela), and is attempting to illuminate a 2000m-wide model. I think that is the problem.

If you’re creating this model in threejs and exporting it, be sure to enable renderer.physicallyCorrectLights=true. Without that, what you see before export is not going to look much like the results in glTF viewers.

1 Like

In the babylonjs viewer you’re not seeing the result of that point light – try clicking the inspect button in the bottom, then the Scene entry in the left sidebar, then disabling the “Environment texture (IBL)” in the right sidebar. The model then goes dark, indicating that all the light you see is coming from the IBL and not the point light. In my viewer (http://gltf-viewer.donmccurdy.com/) the light is also coming from the IBL and not the point light, which is too dim to be visible.

1 Like

I have the same issue that in Babylon it’s perfectly lightened and I also know that it’s coming from the environment. So how can I recreate the same light in ThreeJS? I added hemisphere light but it is not doing anything, the object is still black.

Environment lighting (material.envMap or scene.environment) is the highest quality type of lighting, and almost always what online viewers are using.