Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reflector (WebGLRenderTarget): Fog Color problem in sRGB outputEncoding

See original GitHub issue

From https://github.com/mozilla/hubs/issues/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:

Device: Desktop
OS: Windows 10
Browser: Chrome
Three.js version: dev

Issue Analytics

State:
Created a year ago
Comments:12 (2 by maintainers)

Top GitHub Comments

2reactions

WestLangleycommented, Nov 11, 2022

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) /ping @bhouston (legacy conventions)

1reaction

takahiroxcommented, Nov 10, 2022

Unfortunately the problem doesn’t seem to be resolved yet

Top Results From Across the Web

Issues · mrdoob/three.js · GitHub

Reflector (WebGLRenderTarget): Fog Color problem in sRGB outputEncoding Suggestion. #24362 opened Jul 18, 2022 by takahirox.

THREE.js: Textures become grayish with renderer ...

The result is quite disappointing as the texture now renders very grayish due to the OutputEncoding of the renderer (sRGB Encoding).

sRGB texture encoding gives color banding issue - Questions

Hello everybody, I have a 8bit sRGB png image that I need to render in my game. I haven't done this before but...

Three.js Versions - Open Source Agenda

Update the default color space settings. ... outputEncoding for background, clear color, and fog. ... Set stencilBuffer property of WebGLRenderTarget .

Issues · mrdoob/three.js · GitHub

... WebXR Device Issue. #24369 opened on Jul 19 by danrossi · 8. Reflector (WebGLRenderTarget): Fog Color problem in sRGB outputEncoding Suggestion.