Color Space seems to be inconsistent with reflection after r152

Questions
, ,
1

I have created a simple demo to show what im talking about:

In version 0.163.0 of three js:
https://codesandbox.io/p/sandbox/ocean-forked-ksd8hz?file=%2Fsrc%2Findex.js%3A120%2C5

image
image984Ă—853 32.8 KB

VS version 0.150.0 (Correct and expected behaviour):
https://codesandbox.io/p/sandbox/ocean-forked-5j25j9

image
image903Ă—935 29.2 KB

I know it has something to do with colorspace or encoding but im at a loss for how to make this consistent. I tried to force the color encoding inside the shader by adding: #include <colorspace_fragment>

But this also causes more inconsistencies. This is my first post on this forum so apologies for the formatting.

image
image3015Ă—975 265 KB

When adding the colorspace fragment to the skybox portion it makes the color of the skybox consistent with the render target image. But its no longer corresponding to the original color. And the reflection is still wrong. I would just like it behaving the same as in the older versions for consistency.

I had a look at this post but it doesnt seem to mention anything as to why its inconsistent when it comes to reflections and rendering to a renderTarget:

2

If you need to restore the old behavior, you can do so with:

THREE.ColorManagement.enabled = false; // assign as early as possible.

renderer.outputColorSpace = THREE.LinearSRGBColorSpace;

The THREE.Reflector class does not currently handle color management correctly. There’s some related discussion in Reflector (WebGLRenderTarget): Fog Color problem in sRGB outputEncoding · Issue #24362 · mrdoob/three.js · GitHub, mostly focused on using Reflector + Fog, but I think you’re seeing something similar.

1 Like
3

Thanks for the reply. That was one of the first things i tried. And in theory it works:

image
image2984Ă—1212 279 KB

However it now just means everything is much darker and not lit the way the scene was intended to. And it deviates from the image i show of the working version in 0.150.0

I saw the discussion about the fog etc. Theyre mostly suggesting to just apply this: #include <colorspace_fragment> after the fog. But it doesnt fix the reflector still. This scene doesnt use fog and the result is still very different from what it looks like in 0.150.0

4

The Reflector/Fog discussion does not contain a solution, no, just linking there as illustration that Reflector is known to be broken, with no ready-to-use solution.

However it now just means everything is much darker and not lit the way the scene was intended to. And it deviates from the image i show of the working version in 0.150.0

I think the difference in lighting is not color management in r152, but lighting changes in r155. You can revert those changes with renderer.useLegacyLights = true;, or decrease the decay of your lights to 0 or 1, or increase light intensity.

5

Setting the useLegacyLights and the 2 other variables you suggested works. But that means we are basically reverted back to old versions. And useLegacyLights is being removed soon. I think its an issue with the renderTarget/reflector not using the same values as the default renderer outputs. Even without any fog the issue exists. Doesnt that mean its a bug or unintended by three?

https://codesandbox.io/p/sandbox/ocean-forked-3yd5pt?file=%2Fsrc%2Findex.js

There are all using default values and the output is not correct unless i revert all the stuff you suggested. So does that mean that reflector/render target has different defaults from the normal renderer in three js now? I dont understand why making those 3 changes fixes the reflection in this example.

I even created a custom reflector where it literally just sets the frag color to the reflection and its still the same. So i think there is a difference between how the render target and renderer now process/output colors.

6

Reflector is broken, and does not do color management correctly. The issue is, partially, that shaders must use a different output colorspace when rendering to a render target vs. rendering to the drawing buffer, and in this case your shader must do both. I don’t think there’s been a volunteer to invest much time into Reflector lately.

It is a bug that Reflector does not work with color management, but I don’t have solution to offer you for that. My suggestions above amount to disabling color management, because a fix for the bug does not appear to be forthcoming.

1 Like