glTF - setting colors - baseColorFactor

user_3981111 0
Viewed 1075

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.

gltf colors
2 Answers

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

user_8367080

It is RGBA format, but with numbers between 0 and 1. If you want to insert a color in the Format:

  • RGB (255, 255, 255) [=white] divide all values by 255 and use 1 (=fully opaque for the last value
  • RGBA (255, 0, 0, 255) [=fully opaque red] divide all components by 255

Documentation can be found here.

Actually the only difference is, that you can insert more color nuances because you have more than 255 possible values per channel.

user_45934330
Related