-
-
Notifications
You must be signed in to change notification settings - Fork 35.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reflector (WebGLRenderTarget): Fog Color problem in sRGB outputEncoding #24362
Comments
Probably the root issue is color space conversion. In short, the fog color in the main scene doesn't seem to be applied color space conversion when rendering to the screen. In the example, first rendering the scene including the fog to the reflector render target, and then rendering the scene including the reflector render target texture to the screen. Three.js does color space conversion in shader ( When rendering to the screen the fog color in the reflector render target texture set to three.js/src/renderers/shaders/ShaderLib/meshphysical.glsl.js Lines 210 to 211 in 12f550e
Therefore, the fog colors in the reflector and in the main scene can mismatch. An easy solution may be swap the order of This is the screenshot of sRGB output encoding + fog + swap the order. The fog color in the reflecor looks the same as the one in the main scene. |
I believe this explains the history, although at the moment, I am unable to locate the original discussion on the topic. |
Related: #23937 |
Thanks @WestLangley @LeviPesin for pointing out the related threads. |
I expect there will be similar challenges with tone mapping and fog, too. |
Is this still an issue after #23937? |
Unfortunately the problem doesn't seem to be resolved yet |
Note that #23937 will require setting |
https://raw.githack.com/takahirox/three.js/MirrorFogExample/examples/webgl_mirror_fog.html |
As I commented #24362 (comment) , swapping the order of https://raw.githack.com/takahirox/three.js/MirrorFogExample2/examples/webgl_mirror_fog.html If I understand correctly, the reason why the current order |
Fog should be applied in scene-referred linear color space. Since tone mapping converts from scene-referred color space to display-referred color space, the fog chunk should precede tone mapping. #include <fog_fragment>
#include <tonemapping_fragment>
#include <encodings_fragment> Ideally, we should adhere to that convention -- and make whatever changes are required to accommodate it. /ping @donmccurdy (color management) |
Yes, agreed. This would be simpler and easier to reason about than the current ordering. For implementation purposes it would be clear improvement, and makes bugs like this easier to address. The troublesome part is breaking convention, and explaining that to users. Consider a user writing this today: // (A) ColorManagement.legacyMode = true
renderer.outputEncoding = sRGBEncoding;
scene.fog.color.setRGB( 40, 40, 40 ); // sRGB → Linear-sRGB 🚨
scene.background.setRGB( 40, 40, 40 ); // sRGB
renderer.setClearColor( new Color( 40, 40, 40 ) ); // sRGB
material.color.setRGB( 40, 40, 40 ); // Linear-sRGB
light.color.setRGB( 40, 40, 40 ); // Linear-sRGB Or, this: // (B) ColorManagement.legacyMode = false
renderer.outputEncoding = sRGBEncoding;
scene.fog.color.setRGB( 40, 40, 40 ); // Linear-sRGB
scene.background.setRGB( 40, 40, 40 ); // Linear-sRGB
renderer.setClearColor( new Color( 40, 40, 40 ) ); // Linear-sRGB
material.color.setRGB( 40, 40, 40 ); // Linear-sRGB
light.color.setRGB( 40, 40, 40 ); // Linear-sRGB Under Under Most users (and examples) are currently in case (A). I wish there were a gentler way to make the change under that scenario, but I'm not sure there is. |
^My concerns above are addressed in r152, as color management is now enabled by default. Discussion continued in: |
From Hubs-Foundation/hubs#5572
Describe the bug
Fog color in
Reflector
(WebGLRenderTarget
) can mismatch the one in the main scene.I made an online example to show the problem.
https://raw.githack.com/takahirox/three.js/MirrorFogExample/examples/webgl_mirror_fog.html
Screenshots
sRGB output encoding + fog. Fog color in the reflector looks brighter than the one in the main scene. (See the green wall.)
sRGB output encoding + no fog. Color in the reflector looks the same as the one in the main scene.
Linear output encoding + fog. Fog color in the reflector looks the same as the one in the main scene.
Live example
https://raw.githack.com/takahirox/three.js/MirrorFogExample/examples/webgl_mirror_fog.html
Expected behavior
Fog color in the reflector looks same as the one in the main scene even in sRGB outputEncoding.
Platform:
The text was updated successfully, but these errors were encountered: