3D model color is dull or not as bright

Questions
, ,
1

Hello I’m having abit of trouble with color on my model. the first image shows the model to have bright red while the other is more dull/whiter.

image image (1)

The bright red is from 8thwall editor preview link while the dull is self-hosted. Not sure why there is a difference though. I’m using a mix of Aframe and ThreeJS.I have this in < a-scene >:

renderer=“colorManagement: true; physicallyCorrectLights: true;”

i have these renderer settings:

this.el.sceneEl.renderer.format = THREE.RGBAFormat
this.el.sceneEl.renderer.outputEncoding = THREE.sRGBEncoding
this.el.sceneEl.renderer.physicallyCorrectLights = true
this.el.sceneEl.renderer.toneMappingExposure = 1.1
this.el.sceneEl.renderer.gammaFactor = 2.2

texture set like this:

const image = document.getElementById('thetexture').src
texturetwo = texLoader.load(image)
texturetwo.flipY = false
texturetwo.encoding = THREE.sRGBEncoding

and color set like this:

middleColor = new THREE.Color('#000000')
finalColor = new THREE.Color(colorstr)
theModel.traverse((node) => {
    node.material.color.copy(middleColor).lerp(finalColor, op2)
})

I’m not sure why the output is inconsistent but any guidance is much appreciated.

2

That line is not required if you use THREE.sRGBEncoding as the output encoding.

If you don’t use HDR in your scene, do not touch tone mapping properties.

Why do you have these lines in your code? Does 8thwall do the same? Otherwise it’s not surprising when there is a difference in color.

3

noted on the gamma and tone mapping.

theModel.traverse((node) => {
    node.material.color.copy(middleColor).lerp(finalColor, op2)
})

I want to lerp the color from middle color to final color and this option is what I’ve found and does work as intended in both 8thwall and self-hosted, just that the color is dull in self-hosted. Is this not the correct way to use .lerp from color A to color B in material setting?

4

The lerp looks right. There must be something else in your app that produces the difference :thinking:.

5

What usually impacts color output of models? Just so I can really understand. Currently the base texture is white, and we’re just adding colors to it.

6

What is renderer.toneMapping? If it’s just NoToneMapping (default) then I think exposure would have no effect… If it’s something else, that’s important to know and would affect colors.

If you don’t use HDR in your scene, do not touch tone mapping properties.

I think I would loosen this statement a bit, if you are using lights in the scene then tone mapping is appropriate. For unlit materials and baked lights, you generally do not want tone mapping.

Are you able to share this GLB, or a demo to reproduce the issue?

7

My problem is solved. Added:

finalColor = finalColor.convertSRGBToLinear()

8

I see! In that case, you could instead set…

THREE.ColorManagement.legacyMode = false;

… before initializing colors. This will convert hexadecimal and CSS-style colors from sRGB to Linear-sRGB automatically.

2 Likes