Imported glTF color looks lighter

Hello, I have a question about the color of imported glTFs.

Vivid colors like R(#ff0000), G(#00ff00), B(#0000ff)
I can display vivid colors like “R(#ff0000)”, “G(#00ff00)”, “B(#0000ff)” as expected,

However, light colors such as pink are displayed brighter than the setting.
What should I do to display the expected colors?

How to create a glTF:

  • The glTF is exported in C4D.
  • We want the object to appear flat, so we set the color in luminance material.
    *I want glTF to look like MeshBasicMaterial.
  • No lights are set in Three.js.

What I tried :

  • With or without lights on Three.js
  • Change renderer.toneMapping
  • Set renderer.outputEncoding = THREE.sRGBEncoding;.

after the modal has loaded, experiment settting any materials in it to use a colorspace.

E.g.,
material.map.colorSpace = THREE.LinearSRGBColorSpace

Comment out line 65 in this example to see difference,
THREE.LinearSRGBColorSpace : SBEDIT : Online Code Editor

1 Like

What do you mean by luminance material here?

  • Change renderer.toneMapping
  • Set renderer.outputEncoding = THREE.sRGBEncoding;.

Note that neither of these settings are exported – the expectation is that C4D should do color management correctly. Perhaps it is not.


Based on the result that fully-saturated colors appear the same in C4D, but unsaturated colors do not, I think this is a color management problem. Are these vertex colors, texture colors, material colors, or something else? Could you share the cube glTF shown above? If it’s reloaded into three.js at https://gltf-viewer.donmccurdy.com/ is the glTF shown correctly?

My hunch, unfortunately, is that C4D’s importer color management may be incorrect.

1 Like

Note that this also will not be exported – it will change the result in three.js, with no effect on the glTF exported to C4D.

1 Like

Thank you all for your comments.

As per your comments, it seems that C4D’s glTF export function may not be working properly.

I exported the glTF file in Blender to try it out, and…I got the expected colors!

I usually use C4D, but it looks like I should use Blender for glTF export.
(e.g. export file created in C4D to .fbx → export to glTF in Blender)


FYI:
This is the pink (#ff6baf) box in the first post, exported to a glTF file in C4D.
ff6baf.gltf (3.4 KB)

It shows up in gltf-viewer and three.js, but the color is brighter than #ff6baf.

Hm. Here’s the material extracted from the file:

Screenshot 2024-05-09 at 9.59.56 AM

There are two problems here, the emissive color is given in sRGB (it should be Linear-sRGB) and the whole metallic PBR model there is probably not what you intended. I’m not sure if C4D supports unlit exports; Blender does, and that would give the precise match you’re after (+/- tone mapping).

A quick way to ‘fix’ the model would be to load it up in https://gltf.report/, open the script tab, and run the script below:

import { ColorUtils } from '@gltf-transform/core';
import { unlit } from '@gltf-transform/functions';

const defaultMaterial = document.createMaterial();
for (const material of document.getRoot().listMaterials()) {
	const color = material.getEmissiveFactor();
	ColorUtils.convertSRGBToLinear(color, color);
	material.copy(defaultMaterial).setBaseColorFactor([...color, 1]);
}
defaultMaterial.dispose();

await document.transform(unlit());

Result:

ff6baf-v1.zip (2.8 KB)

1 Like

Wow, I was able to fix it in my environment.
Thank you very much!

1 Like