Color space ... not working

Questions
1

I updated threejs from r70 to r75 ad the colors for MeshStandardMaterial are really dark, I don’t understand how to set the color correctly, I tried all day but I can’t make it look as it was in an older version.

Any help is appreciated it.

2

You mean r70 to r175, not to r75, I assume?

3

Yes 175, sorry:)

So I figured it out to work with the normal renderer if I tweak the lights it gets close but if I use post-processing is really dark… ad is not from the shader because it works with an older version is something else not clue what,this is what I mean with postprocessing composer.

this.composer.readBuffer.texture.colorSpace = FWDUFB_THREE.SRGBColorSpace; - this dose not seam to make much of a difference…

this.composer = new EffectComposer(this.renderer); 
    this.composer.setPixelRatio(this.pixelRatio);
    this.composer.setSize(this.width, this.height);

    // Set the color space of the composer’s render target if available

    this.composer.readBuffer.texture.colorSpace = FWDUFB_THREE.SRGBColorSpace;

    this.scenePass = new RenderPass(this.scene, this.camera);
    this.scenePass.clear = true;
    this.composer.addPass(this.scenePass);

    this.waveRgbShiftStrength = this.data.waveRgbShiftStrength;
    this.waveFrequency = this.data.waveFrequency;
    this.waveAmplitude = this.data.waveAmplitude;

    this.waveEffect = {
        uniforms: {
            tDiffuse: { value: null },
            uOpacity: { value: 1 },
            resolution: { value: new FWDUFB_THREE.Vector2(this.width, this.height) },
            uTime: { value: 0 },
            uDistortion: { value: 0 },
            uRGBOffsetStrengthX: { value: this.waveRgbShiftStrength },
            uRGBOffsetStrengthY: { value: this.waveRgbShiftStrength },
            uWaveFrequency: { value: this.waveFrequency },
            uWaveAmplitude: { value: this.waveAmplitude }
        },
        vertexShader: vertexSimple,
        fragmentShader: gridWaveFragment,
        transparent: true
    };

    this.wavePass = new ShaderPass(this.waveEffect);
    this.wavePass.renderToScreen = true;
    this.composer.addPass(this.wavePass);

…etc

4

I would recommend breaking the update into steps if possible. three.js keeps deprecation warnings in the code for 10 releases, so if you update in larger steps you could miss them. Or if that’s too much, I would at least try updating to a version around 149–151 first, and get things working there.

In three.js r152 the color management changes are described in Updates to Color Management in three.js r152. In three.js r155 there are lighting changes described at Updates to lighting in three.js r155. Since you’re coming from a very old three.js version I think it will be easiest to jump to a <152 version first and then tackle those two steps.

1 Like
5

On 151 works perfectly, Higher is not working with the composer but it works with the renderer, so i am not here not sure what to do…

I tried ChatGPT but is more confused than I am :slight_smile:

6

Try add pass examples\jsm\shaders\GammaCorrectionShader.js
or add this code to your waveEffect fragment shader at bottom:

gl_FragColor=vec4(mix(pow(gl_FragColor.rgb,vec3(0.41666))*1.055-vec3(0.055),gl_FragColor.rgb*12.92,vec3(lessThanEqual(gl_FragColor.rgb,vec3(0.0031308)))),1.0);

image
image960×270 39.4 KB

1 Like
7

Thank you it seams to fix things, now one last question in version 151 if I set ambient light to 1 I get the expected ressult, but in r 175 is way darker I need to set it to about 3.5 to get a similar result but this is not efficient in my project I need ti to work as expected.

I use MeshStandardMaterial

I am building this project Flip Book

8

Now need multiply all lights intensity to 3. Was ambient 1.4, now 1.4*3=4.2

2 Likes
9

This is wired…

10

That was already discussed 20-25 releases ago. There was also a migration guide how to change lights to the new color management in Three.js. Initially “good” intensities were mapped to 1. By “good” I mean values that produce well-lit scenes. However, this made physically based lightning harder and more computationally intensive, as such intensities did not fit equations of how light changes as it spreads. To make light units adhere to physical light units, the values had to be multiplied by Math.PI. As a side effect, intensity 1 became much weaker than before. This is where this “multiply by 3” come from. Read the migration guide for some other advises, light’s intensity is not the only thing to pay attention to.

2 Likes
11

Also for lights.color maybe need this: sun.color.SRGBToLinear();

12

Sun is the directional light?

13

Yes. And hemisphere, ambient, pointlight, spotlight, arealight

14

I tried that I get a error…

15

I made mistake. Try sun.color.convertSRGBToLinear();

16

I tried I don’t see any difference with this.