Lights significantly differ when switching r147 to r157

Questions
1

In r147 I had lights set up like this and they were logical (1.25 intensity total) and working fine :ok_hand::

let directionalLightTop = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLightTop.position.set(0, 1, 0);
this.scene.add(directionalLightTop);

let directionalLightRight = new THREE.DirectionalLight(0xffffff, 0.25);
directionalLightRight.position.set(1, 0, 0);
this.scene.add(directionalLightRight);

let ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
this.scene.add(ambientLight);

But when I switched to r157 I observe two changes:

  1. The 3D scene is much darker.
    • I have to set the ambient light to about new THREE.AmbientLight(0xffffff, 2.5); to make it look like before, but even then it looks different.
  2. All 2D sprites are much lighter (so much that #000 color now appears as approximately #777).

What has changed? Why? How to fix this?

2

Hello :eyes:

See Updates to lighting in three.js r155
It should contain all the information you’re looking for

3 Likes
3

Thanks!

Multiplying by Math.PI solved the rendering of 3D elements.

But 2D THREE.Sprite are still too bright. All I’m doing it inserting a sprite like this:

MyLoader.load(path).then((texture) => {
	let material = new THREE.SpriteMaterial({
		// color: '#f00',
		map: texture,
	});
	let sprite = new THREE.Sprite(material);
	
	sprite.position.set(x, y, z);
	sprite.scale.set(scaleX, scaleY, 1);
	
	this.scene.add(sprite);

	// The sprite has like #777 color instead of #000.
	// As if the brightness/exposure is set to 150% instead of regular 100%.
	// In Photoshop I'm reading #e7ce5f for one sprite but the scene displays it
	// as #f4e8a3
});

It seems there must have been another change between r147 and r157 as well for 2D rendering (because when I disable the lights completely the sprites are still too bright, so it seems it’s unrelated to the lights)?

4

This post seems to contain the answer: Updates to Color Management in three.js r152

I applied texture.colorSpace = THREE.SRGBColorSpace and it seems it solves the issue.

I didn’t convert all textures yet to verify but the ones that I converted look normal now.

So, it seems to be solved, thank you for your help!

2 Likes