Canonical gamma correction since r112


The recent migration guide says:

WebGLRenderer.gammaOutput has been removed. Please use WebGLRenderer.outputEncoding instead.

There are examples online describing the old gammaOutput approach but I can’t find anything about the default behaviour of the new encoding approach.

What is the correct way to get gamma corrected output from a Three.js scene with no textures? For example a scene with geometries of various solid coloured Basic, Lambert and Standard materials, lights and shadows and I want to correct for gamma 2.2.

What about scenes with simple jpeg textures? And what about scenes with custom materials where colours are determined in a fragment shader? Do we do gamma correction before outputting the fragment colour or do we leave it to the renderer?


Then use this line of code:

renderer.outputEncoding = THREE.sRGBEncoding;

Normally, JPEG textures are sRGB encoded. So if you want to retain the original color as good as possible, you should define the texture’s encoding if you load it manually like so:

texture.encoding = THREE.sRGBEncoding;

The renderer can then decode the texels into linear space for lighting equations in the shader. Notice, that this only happens for built-in materials. When implementing custom materials, you have to perform the decode by yourself.

Custom shader materials are not automatically part of the renderer’s output encoding process. This only happens if you include the encodings_fragment shader chunk into your fragment shader code.


Thanks, that is very helpful.

1 Like