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., = 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 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)

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, 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]);

await document.transform(unlit());

Result: (2.8 KB)

1 Like

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

1 Like