Incorrect color displaying, some colors are too light

Questions
1

Hi everyone
I use the 8th Wall for WebAR, which uses Three js to create and display scenes.
Now I have an issue with incorrectly displaying some colors.

photo_2022-10-14_10-44-33
photo_2022-10-14_10-44-33517×607 47.7 KB

In this image, you see the expected result (it is my other Three js scene)

photo_2022-10-14_10-44-47
photo_2022-10-14_10-44-47513×735 63.2 KB

in this image, the 8th Wall scene result. I use the same settings for both scenes and the same light but it is no effect. I tried to change toneMaping, exposure, outputEncoding but is no effect

      onStart: ({ canvas }: any): void => {
        const { scene, camera, renderer } = (window as any).XR8.Threejs.xrScene();

        this.scene = scene;
        this.renderer = renderer;

        renderer.colorManagement = true;
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.physicallyCorrectLights = true;
        renderer.toneMappingExposure = Math.pow(1.2, 5.0);
        renderer.outputEncoding = THREE.LinearEncoding;

        this.initialScale = this.objectWrapper.scale.clone();
        this.scaleFactor = 1;
        this.internalState = {
          previousState: null
        };

        initXrScene({ scene, camera, renderer });

        this.customLoader8W.remove();
        this.tapToPlaceBlock.init();

        canvas.addEventListener('touchstart', emitGestureEvent, true);
        canvas.addEventListener('touchend', emitGestureEvent, true);
        canvas.addEventListener('touchmove', emitGestureEvent, true);
        (window as any).XR8.XrController.updateCameraProjectionMatrix({
          origin: camera.position,
          facing: camera.quaternion
        });
      }
2

The appearance of any metallic PBR surfaces will depend — very heavily — on the environment lighting. In three.js that’s usually an environment map, or IBL. I’m not sure if 8th Wall samples environment lighting from the AR session, or does something else.

If this is a glTF/GLB model, I think my suggestion would be to first load it in a viewer or two (like https://gltf-viewer.donmccurdy.com/), confirming that it looks as you expect. If incorrect, then probably changes should be made to the model. If correct in the viewer, i would look into lighting in 8th Wall.

3

You are right, it depends on the environment, my 8th Wall scene uses a custom environment (CubeMap). if you look at metal surfaces it is noticeable. I tried to reduce envIntesity but it has an effect on other models they all become darker

4

Each material should have a material.envMapIntensity property, I don’t think that would affect other models unless they share the same material?

5

Thanks. I tried that, but it no fix the problem in the 8th Wall.

6

Ok, I haven’t use 8th Wall before sorry, it sounds like you may need to ask in their channels about color management and lighting configuration.

1 Like