Spoke Mirror Color not accurate

[qiangjiadong]

Description Mirror color presented in Hubs room is not consistent with Spoke preview. The color seems too brighter and cannot be corrected with the exact match (Hubs room vs Spoke preview) If fog is enabled.

To Reproduce Steps to reproduce the behavior:

1. Go to 'Scene Properties', set 'Background Color' to 4a4a4a, 'Fog Type' to exponential, 'Fog Color' to 4a4a4a, 'Fog Density' to 0.08
2. Get 'Mirror' into Scene, default Mirror 'Color' is 7f7f7f, which matches Background Color and Fog Color in Spoke preview (see screenshot 1),
3. Scenario 1: Publish Scene with default Mirror 'Color' 7f7f7f, Hub room mirror too bright compared to Spoke preview see screenshot 2),
4. Scenario 2: Publish Scene with set Mirror Color 4a4a4a, Hub room mirror still too bright compared to Spoke preview see screenshot 3 and 4),
5. See error screenshots below and sample scene link: https://hubs.mozilla.com/scenes/Xz98Ma5

Expected behavior Mirror color consistent between Spoke preview and Hubs room.

Screenshots Mirror Color 7f7f7f in Spoke Mirror Color 7f7f7f in Hubs room Mirror Color 4a4a4a in Spoke Mirror Color 4a4a4a in Hubs room

Hardware

• Device: Desktop,
• OS: Windows, iOS
• Browser: Firefox, Chrome

Additional context Add any other context about the problem here.

[takahirox]

Thanks for the problem report. The issue might sound similar to #5571 and there might be a chance that it was broken by the recent our Three.js upgrade #5488, too.

[qiangjiadong]

Thks Taka for fast reply :))), hope it can be fixed soon :)))))

[juunini]

this is github:mozillareality/three.js#hubs-patches-133

and this is github:mozillareality/three.js#hubs-patches-141

@takahirox it seems Three.js version issue

[takahirox]

Probably I have figured out the root issue. The root issue seems to be in the official Three.js. Color space conversions for fog can mismatch between render target and screen. I'm thinking of

1. Filing an issue to Three.js GitHub repository
2. Discussing the solution and making a PR
3. Cherry-pick it to our Three.js if it will be merged

Although I said I hope we can fix the problem in one or two weeks on Discord but there is a chance that it takes longer.

A short-term workaround that you can do on your end so far is to disable fog in your scene if the scene has mirrors.

[takahirox]

Filed an issue in Three.js github repo https://github.com/mrdoob/three.js/issues/24362

[takahirox]

Another workaround may be using LinearEncoding for output encoding.