Image Texture Washed Out in R155 - have adjusted useLegacyLights

Questions
1

My skybox is being blown out in the R155 compared to R149. The same is happening to 5 other projects I am working on. I have simplified it to just the skybox and the same thing.

This is before applying renderer.useLegacyLights = true;

image
image801Ă—647 40 KB

This is after applying renderer.useLegacyLights = true;

image
image885Ă—708 57.3 KB

And this is what it looked like in R149 - which I like!

image
image903Ă—717 51.6 KB

The renderer is
new THREE.WebGLRenderer({alpha: true, antialias:true});

The skybox is
const skyTexture = new THREE.TextureLoader().load(“assets/sky.jpg”);
const skyBoxGeometry = new THREE.SphereGeometry(100000, 32, 32);
const skyBoxMaterial = new THREE.MeshBasicMaterial({map:skyTexture, side:THREE.BackSide});
const skyBox = new THREE.Mesh(skyBoxGeometry, skyBoxMaterial);
scene.add(skyBox);

Lights should not affect it? Or at least they have not in the past. Any thoughts?

2 Likes
2

It seems to be on the MeshBasicMaterial - so here is an example from R155

image
image718Ă—603 39.2 KB

and here it is in R149

image
image844Ă—539 55.1 KB

Note… look at the difference in the cube. The skybox is washed out to start - although you can still see the difference in the live example.

3

This looks like color management rather than (or in addition to) lighting – see Updates to Color Management in three.js r152 for details. You may need to mark your textures with texture.colorSpace = THREE.SRGBColorSpace.

3 Likes
4

Yes - thank you. Glad it was something simple - sorry I missed the message ;-). And again, thanks for your quick reply. Cheers.

1 Like
5

@danzen did you need to do anything else other than set texture.colorSpace = THREE.SRGBColorSpace on textures?

6

There were three things I played around with
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
THREE.ColorManagement.enabled = true; // or false
renderer.useLegacyLights = false; // or true

And then on the lights multiplying the intensity by Math.PI - although had to adjust the intensity still to get a rough match. And for a SpotLight set the decay = 0;

So, with those things in various combinations, I think I am happy.

1 Like
7

That’s interesting. What made you think to multiply light intensity by Math.PI? What’s the thought behind this?

8

It was mentioned at the top of Updates to lighting in three.js r155 to go from the user-friendly to the linear lighting…

2 Likes
9

Thanks, this fixed my problem

2 Likes