Search code examples
colorsgltf

glTF - setting colors - baseColorFactor

I am trying to manipulate a gltf 3D model, however I am not sure how the colors are derived. All the numbers in the baseColorFactor between 0 to 1 (or less than 1).

This is surely not RGB nor RGBA (I took this page as a reference: https://www.december.com/html/spec/colorrgbadec.html)

"materials" : [
  {
      "doubleSided" : true,
      "name" : "Material",
      "pbrMetallicRoughness" : {
          "baseColorFactor" : [
              0.8000000715255737,
              0.91026470959186554,
              0.909551368653774261,
              1
          ],
          "metallicFactor" : 0,
          "roughnessFactor" : 0.4000000059604645
      }
  },
]

Any pointers would be most appreciated.

Solution

  • This is indeed Red, Green, Blue, and Alpha, mapped to the 0.0 to 1.0 range, but with an additional transformation as well: These values have been converted from the sRGB colorspace to linear using the sRGB transfer function. (The back story here is, the baseColorTexture is supposed to be stored in the sRGB colorspace and subject to hardware sRGB decoding, but the baseColorFactor has no hardware decoder and therefore is specified as linear values directly.)

    The simple version of this, if you have a value between 0 and 255, is to divide by 255.0 and raise that to the power 2.2. This is an approximation, but works well. So for example if your Red value was 200, you could run the following formula, shown here as JavaScript but could be adapted to any language:

    Math.pow(200 / 255, 2.2)

    This would give a linear red value of about 0.58597.

    Note that the alpha values are not subject to the sRGB transfer function, so for them you simply divide by 255 and stop there.

    Some packages will do this conversion automatically. For example, in Blender if you click on the Base Color color picker, you'll see it has a "Hex" tab that shows a typical CSS-style color, and an "RGB" tab that has the numeric linear values.

    Blender color picker

    This can be used to quickly convert typical CSS colors to linear space.

    The VSCode glTF Tools (for which I'm a contributor) can also show glTF color factors as CSS values (going the other way).