[SOLVED] GSAP modify the material color of a GLTF model but normalize the rgb, result in bad color

GSAP modify the material color of a GLTF model but normalize the rgb, result in bad color

i work on R3F, i set the material color with "0x292929" and the color is great! Like i want!

if (modelModifier.color !== undefined) {
  gsap.to(material.color, {
    r: ((modelModifier.color >> 16) & 255) / 255,
    g: ((modelModifier.color >> 8) & 255) / 255,
    b: (modelModifier.color & 255) / 255,
    duration: 1,
    immediateRender: false
  })
} else {
  material.color.setHex(0x292929)
}

But now if i change the color with

modelModifier.color: 0xf64941,

The color isnt red but very very light white/red. So i change back to

modelModifier.color: 0x292929,

And the color material isnt dark but is now very very light white/grey.

I think its because of course i normalise the RGB on base/255 so 292929 is now, on normalized RGB: 0.16, 0.16, 0.16 ... Hmm, what i am doing wrong ? I cant normalize the RGB without having the good color i want ? ( Because hex 292929 in rgb is normaly 41, 41, 41 )

Thanks for your help guys!

I try to animate the transition color from hex to hex but GSAP didnt like that at all or with some bad trick. So i need Normalized RGB or maybe simple RGB ?

Solution

You haven't mentioned color spaces above, but I think that — not 0–1 or 0–255 normalization — is likely to be the issue. Only hexadecimal and CSS string inputs are assumed to be sRGB in three.js. Other color inputs are assumed to be in the working color space (Linear sRGB) unless otherwise specified.

Assuming your hex inputs to GSAP are sRGB, the output will be sRGB, and you need to tell three.js that the RGB components you provide are sRGB, with something like:

material.color.setRGB(r, g, b, THREE.SRGBColorSpace);

Perhaps that should be done in the GSAP onUpdate callback.

three.js r152+