Unbeknown to you, 99% of the images on your computer are in sRGB color space. You name it, jpg, png, etc. All of them are most likely in sRGB color space.
However, when you render something in WebGL, light calculations, for example, you need to work in linear-sRGB color space and output in sRGB color space.
The difference between linear-sRGB and sRGB is that the lather has gamma correction applied to it. Gamma correction makes it non-linear.
To use these sRGB images in our linear workflow, we need to remove the gamma correction when sampling the image in the shader. Then, once everything is said and done, re-add the gamma correction back for the final output of the shader.
Some textures are already in Linear-SRGB while some others are in sRGB. Most of the time, ThreeJS makes this a non-issue.
However, sometimes models don't have the correct color space. Either because the 3D software sets the incorrect color space, or because you had to load images manually. This is when understanding color management is important.
Getting started
- Linear sRGB vs sRGB
- ThreeJS Color Management
- In depth article on the importance of being Linear
- A nice video intro to color Corrections for games
- What is linear and gamma correction
sponsor
Become a sponsor with your sponsor spot here!
Promote your product/company in this spot to hundreds of creative developers interested in learning and creating. One spot per issue!
Learn More!Data Textures in Linear-sRGB
If you come from the far reaches of userland like me, you'll be surprised to hear that not all images have color. There are non-color images like Metalness maps.
This means that this texture isn't in any color space. While you can visualize the image in any image viewer, these are not actual colors and therefore don't require any color transformations:
- Metalness Maps
- Roughness Maps
- Normal Maps
- Ambient Occlusion
Color Textures in sRGB
Some images do represent colors. And more often than not, they are in sRGB color space.
- Emissive maps
- Albedo Color (color maps)
- CSS colors
- Most regular images you have in your computer.
These textures need to be correctly transformed into linear space before being used for light calculations or shading.
In those cases, identify the correct image format and set it on the texture
texture.colorEncoding = THREE.SRGBColorEncodingCSS hex colors are also in sRGB. Three.Color is aware of this and transforms them into linear when they are detected.
Renderer output
Most of the time, when rendering color, you want the default encoding.
renderer.outputEncoding = THREE.SRGBColorSpaceIn case you want to use three to render some data texture (maybe something you'll use for another render), set the output encoding to
renderer.outputEncoding = THREE.NoColorSpaceWhile renderer.outputEncoding is set on the renderer, this setting tells all the shaders to transform their final output from Linear to sRGB as a final step. The work is all done by the shaders.
The Photoshop problem
Photoshop, and programs alike, are made to modify color images. They will often import and export your image in sRGB even though your metalness Map may be in Linear-SRGB.
A quick fix for these cases is to label your Metalness map as sRGB and let the renderer take care of the conversion.
However, the most appropriate fix is to indicate to Photoshop that you don't want this image imported or exported as sRGB.
