Gamma correct treatment of sRGB textures in THREE.js

Description of the problem

As far as I can tell, my sRGB texture is not getting handled correctly within the THREE.js framework.

Essentially, the checkerboard area of my image gets too dark due to naive, seemingly gamma-unaware decoding, sampling, filtering, or encoding.

The image is mostly a black and white checkerboard pattern, with three stripes of (188,188,188) (Which is 50%% grey). You can visually confirm that the intensity of (188,188,188) is 50%% by looking at this image on any reasonably calibrated display at native 1:1 resolution with no scaling. The solid bars should be the same intensity as the checkerboard.

explaination: see Wikipedia article for sRGB which says that a normalized 50%% intensity should get an sRGB value of (1.055*0.5^(1/2.4))-0.055 = 0.735358, which is about 187.516 in 8-bit sRGB, hence the logic of encoding it as 188.

gamma_srgb

When scaling down this image, most naive software will simply average the sRGB encodings and arrive at bogus intensities that are too dark. The black and white pixels will be naively averaged as (0+255)/2, to get a color of (128,128,128), which is only about 22%% intensity (((128/255)+0.055)/(1.055)^2.4) =~ 0.215861. This is considerably darker than the desired intensity of 50%% that would be the average intensity of equal contributions of 0%% and 100%%. And intuitively, “half brightness” is 50%%.

But here’s what it looks like when rendered with THREE.js. Notice the bars are easily visible but they’re not supposed to be. The checkerboard parts of the image are too dark.

qms2l

In OpenGL, this is easy. You simply treat the texture as sRGB and use an sRGB frame buffer. Texture samples are converted from the sRGB encoding to linear when sampled, and linear values are encoded as sRGB when written to the frame buffer and all is well.

I’m at a complete loss for how to achieve this within the three.js framework though. Can someone help?

Additional Info

See my post at stackoverflow for slightly more detailed information about the math of my expectation.

Live Repro

Here is a live repro. https://jsfiddle.net/fvusxp1g/

Three.js version
  • master / r85
Browser
  • All of them
OS
  • All of them
Hardware Requirements (graphics card, VR Device, …)

Nothing special required.

Author: Fantashit

1 thought on “Gamma correct treatment of sRGB textures in THREE.js

Comments are closed.