Gamma correction in fragment shader

[grantwill74]

Hello, I really appreciate this book and what a great resource it is for learning WebGPU.

One small bug that is very common in 3D graphics tutorials is to forget about gamma correction. In chapter 1.04, this leads to an incorrect blended triangle to be displayed, because linear colors are being interpreted as if they were perceived colors, so they are too dark (human brightness perception is non-linear).

Here is a screenshot of an incorrect blended triangle:

Notice that it does not match the sRGB color gamut, in particular the cyan, magenta, and yellow are too dim.

Here is what a gamma-correct blended triangle looks like:

Notice that it actually shows all the colors evenly weighted, including the secondary colors.

It is understandable if gamma correction is considered too much to cover at that stage, but it might be worth a footnote. It's important when lighting and textures are handled together. Textures are normally stored in perceived brightness (this is part of the sRGB color profile), but lights can only be correctly blended in linear brightness. If you don't correct for gamma, you'll compute the wrong color in the fragment shader.

If you want to correct it, here is a shader that is gamma correct. It assumes the input brightnesses are perceived (so it applies the transformation to make them linear so they can be blended correctly). Then it applies the gamma transformation to the output, so the secondary colors look correct:

 const gamma: f32 = 2.2;
const inv_gamma: f32 = 1.0 / gamma;

struct VertexOutput {
    @builtin(position) pos: vec4f,
    @location(0) linear_color: vec3f,
};

@vertex fn vs(
    @location(0) pos: vec2f,
    @location(1) color: vec3f,
) -> VertexOutput 
{
    var vo: VertexOutput;
    vo.pos = vec4f(pos, 0, 1);
    vo.linear_color = pow(color, vec3f(gamma)); 
    return vo;
}

@fragment fn fs(vo: VertexOutput) -> @location(0) vec4f {
    let perceptual_color = pow(vo.linear_color, vec3f(inv_gamma));
    return vec4f(perceptual_color, 1.0);
}

I apologize if this has come up before, but I didn't see a discussion for it and it didn't appear in the book, so you might not have been aware. Here's a useful article with more information about gamma to use as a source. Could be a good footnote.

[grantwill74]

I should have thought of this, but a better solution would be to initialize the pipeline and texture view to -srgb format, so the device does the color correction automatically. This is more accurate than assuming a constant gamma (since the actual sRGB function is piecewise).

The format returned by navigator.gpu.getPreferredCanvasFormat() will never be srgb, so this normally doesn't happen.

Instead, when creating the canvas context, we add an -srgb compatible format:

context.configure({
        device: device,
        format: gpu.getPreferredCanvasFormat(),
        viewFormats: [ 
            (gpu.getPreferredCanvasFormat() + '-srgb')
        ],
        colorSpace: "srgb",
        alphaMode: "opaque",
    });

And then add it to the pipeline fragment target:

targets: [
            {format: (context.getCurrentTexture().format + '-srgb') }
 ]

And then add it to the color attachment, too:

colorAttachments: [{
            loadOp: 'clear',
            storeOp: 'store',
            view: context.getCurrentTexture().createView({
                format:  
                    (context.getCurrentTexture().format + '-srgb') 
            }),
            clearValue: {r: 0.7, g: 0.8, b: 0.9, a: 1},
}]

This will make it automatic.