question-mark
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.

PMREMGenerator: FromScene behavior differs with renderer clear color vs scene.background

See original GitHub issue

Describe the bug

The resulting environment map from PMREMGenerator.fromScene differs when calling renderer.setClearColor( 0xffffff ) beforehand vs calling scene.background = new Color( 0xffffff );.

To Reproduce

You can see the difference in behavior in this fiddle:

https://jsfiddle.net/0saxwg6n/

Uncomment this line to see the behavior difference:

// NOTE: Uncomment this line to make it work
// scene.background = new THREE.Color( 0xffffff );

Code

Setting clear color:

renderer.setClearColor( 0xffffff );
const generator = new THREE.PMREMGenerator( renderer );
const rt = generator.fromScene( scene );
scene.environment = rt.texture;

Setting scene background:

scene.background = new THREE.Color( 0xffffff );
const generator = new THREE.PMREMGenerator( renderer );
const rt = generator.fromScene( scene );
scene.environment = rt.texture;

Expected behavior

The look of the resulting map is the same regardless of whether or not the background color is set via scene.background or renderer clear color.

Screenshots

renderer.setClearColor( 0xffffff );

image

scene.background = new Color( 0xffffff );

image

(an aside but is it expected that the background become so much darker when rendering to the environment map?)

Platform:

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
gkjohnsoncommented, Dec 31, 2020

I agree it’s a bit confusing, but I’m not sure what would be less confusing.

What was getting me was that this section of code is specifically designed to be the inverse of the RGBEToLinear shader function which means that setting a white background should get converted to RGBE when writing to the cube map and get converted back to white when sampling but instead we’re getting the tinted gray color.

After some testing this seems to be related to the premultipliedAlpha setting on the renderer and the fact that the alpha component is being overloaded to represent the exponent in this case. Setting it to false in the example above yields more expected results:

PremultipliedAlpa : True

image

PremultipliedAlpha : False

image

This StackOverflow answer mentions that there can be quirks when the premultiplied alpha color used to clear is invalid (white to RGBE is 1.0, 1.0, 1.0, 0.5...) and ultimately the result shouldn’t be dependent on the premultiplied alpha setting. I think this can be fixed and made resilient to the setting by clearing the background with a flat color mesh with opacity rather than using the renderer clear color but I have to do more testing.

'm actually more surprised that setting the clear color to white gives a white background, since PMREM is calculated in RGBE space. I don’t know what #ffffff is in RGBE, but I don’t think it’s what you’re expecting.

Heh I think it’s just an extremely blown out white, which is why we’re not seeing the red tinting from the plane in the example image above.

1reaction
mrdoobcommented, Dec 4, 2020

(an aside but is it expected that the background become so much darker when rendering to the environment map?)

Hmm, should be fairly fixable actually… We should just take renderer.outputEncoding into account when rendering the background color?

Read more comments on GitHub >

github_iconTop Results From Across the Web

PMREMGenerator – three.js docs
This class generates a Prefiltered, Mipmapped Radiance Environment Map (PMREM) from a cubeMap environment texture. This allows different levels of blur to be ......
Read more >
Threejs - rendering different models and animating out of ...
When you do camera.position.x += mouseX - camera.position.x , you're using the x-position to set itself. These self-referencing values will ...
Read more >
Three.js Generate Environment
Scene(). 7. //scene.background = new THREE.Color('black') ... Apply the above cubemap as the background, then render a blurred version. 29. scene.background ...
Read more >
Building the Ocean with Three JS
A renderer is the main object in three.js, as it renders or draws the 3D space that we create based off of the...
Read more >
Vite X ThreeJS
(renderer);. scene.environment = pmremGenerator.fromScene. (environment).texture;. scene.background = new T.Color(0xbbbbbb);.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found