Forgeviewer Lighting on glb-files

Question

I'm working on a project using React and TypeScript, where I utilize the Autodesk Forge Viewer. In this project, I load GLB files into the scene at runtime. I have noticed that the colors on the loaded models appear very dark, and I have been struggling to correct this.

Here's a simplified version of the code I'm using to load an additional model into the scene:

        const data = await client.getGlb(glbRequest);
        await viewer.loadExtension("Autodesk.glTF");
        const glbBytes = Uint8Array.from(window.atob(data), (c) => c.charCodeAt(0));
        const blob = new Blob([glbBytes], {type: "model/gltf-binary"});
        const url = URL.createObjectURL(blob);
        viewer.loadModel(url, {fileLoader: (Autodesk.Viewing as any).FileLoaderManager.getFileLoaderForExtension("glb")});
        viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, async function adjustLights() {
            viewer.removeEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, adjustLights);
            viewer.setLightPreset(0);
            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
            directionalLight.position.set(0, 1, 0);
            viewer.impl.createOverlayScene('customLighting');
            viewer.impl.addOverlay('customLighting', directionalLight);
            viewer.impl.invalidate(true);
        });
        viewer.unloadModel(viewer.model);

Any suggestions on how I could improve the lighting and make the models appear brighter would be greatly appreciated.

I've also noticed that there's a light effect on the models that makes them appear grayish as they are rotated or moved towards the light. Here's an image that shows what I'm seeing right after a new model gets loaded into the scene: (https://i.stack.imgur.com/KMiBv.png)

As you can see the model is really dark with a bright light in the middle. The nails material color is bright red but it appears to be almost black.

I'm not sure why this is happening or how to control it. It seems like it might be related to the lighting or the materials of the models, but I haven't found a way to adjust these factors to get the desired appearance.

Any insights into why this might be happening, or suggestions on how to fix it, would also be very welcome.

I've attempted several solutions to solve the lighting issue:

1. Changing the light preset: I tried using different light presets offered by the Autodesk Forge Viewer, but there was no noticeable change in the appearance of the models.
2. Adjusting the light intensity: I tried increasing the intensity of the camera light, but this didn't make the models appear any brighter.
3. Adding additional lights: I added additional THREE.AmbientLight and THREE.HemisphereLight objects to the scene, but the models still appeared dark.

One thing I have noticed is that when I hover over the model in the viewer, it becomes highlighted and appears in a brighter tone that is closer to what I would like. However, I haven't found a way to apply this effect to the whole model permanently.

Answer 1

It's hard to tell from just a screenshot but it could be an issue with the GLB model using a material that's "incompatible" with the PBR system implemented in the viewer, or perhaps the model containing some unexpected normals.

Btw adding custom lights to overlay scenes probably won't have any effect as I don't think the viewer would use these lights to lit the actual design element.

I'd suggest that you try and tweak the material parameters of the glTF/glb before loading it into the viewer. Alternatively, you could load the glTF/glb as a vanilla THREE.Mesh object into one of the overlay scenes, and lit it with vanilla three.js lights.

If none of that helps, you might also want to consider sharing one of the files with us via aps (dot) help (at) autodesk (dot) com so that we could debug it on our side as well.