[mwkaufma]

>> The mix function is an interpolation function that linearly interpolates between the two input colors using a blend factor between and ( in our case).

>> A mix function for two colors works the same way, except we mix the color components. To mix two RGB colors, for example, we’d mix the red, green, and blue channels.

Colorspace alert! mix != lerp in sRGB

[rikroots]

I agree with the colorspace alert. Lerping red and blue in OKLAB or OKLCH colorspace produces a much nicer effect. Also, the article details linear interpolation, but I think there's a lot of fun to be had by introducing some easing functionality into the interpolation[1] - it's not difficult to achieve in code, even in shader code?

I do disagree with the article about the need to do such work in the WebGL space. Modern CPUs are insanely fast nowadays, and browsers have put in a lot of work over the past few years to make the Canvas 2D API as performant as possible - including moving as much work as possible into the GPU behind the scenes. With a bit of effort, gradients can be animated in 2D canvases in many interesting ways![2][3]

[1] - Easing a linear gradient in different color spaces: https://scrawl-v8.rikweb.org.uk/demo/canvas-003.html

[2] - Animated gradient effect: https://codepen.io/kaliedarik/pen/poRLBLp

[3] - Animating a gradient over a live video feed: https://codepen.io/kaliedarik/pen/MWMQyJZ

[meindnoch]

WebGL/OpenGL doesn't use sRGB in the shaders. If you load an sRGB texture, or render to an sRGB surface, the API automatically applies the gamma- (or inverse gamma) curve, so the shader only ever sees the linear values.

[kookamamie]

Correct, it uses just numbers without any specific information about a colorspace being involved. Decoding and encoding sRGB happen during (texture) read and write stages.

[danwills]

Quite right! I think if the values were linearized (~gamma 0.5) lerp might be mostly ok though, right?

And what about doing rgb->hsv, then lerp, then hsv->rgb? I'm unclear whether that also needs linearization, or whether the gamma can maybe just be done to the 'v' component before lerping?

Color is a surprisingly deep and fascinating topic, that's for sure! :)

[mwkaufma]

Perceptual colors -- both sRGB and HSB -- are nonlinear, so you can't expect linear combinations to produce meaningful results (they often "interpolate through mud").

If you just want optical phenomena, you can just convert to luminescence -- WegGL and other modern graphics APIs actually does this internally when you load or render textures, so all shaders are handling optically-linear data, which is why the shader-produced images in the post look better than the javascript gradients.

[virtualritz]

Luminance[1], not luminescence[2].

[1] https://en.wikipedia.org/wiki/Luminance

[2] https://en.wikipedia.org/wiki/Luminescence

[mwkaufma]

Lol autocorrecttt ty

[eurekin]

Googled "luminescence" and OpenGL -- don't seem to return relevant results. Could you point to where it's described?

[mwkaufma]

replace/luminescence/luminance (thanks autocorrect).

Legacy OpenGL APIs used to assume sRGB, so you had to specify GL_LUMINANCE for non-color 'intensity' maps (which couldn't be blitted to FBOs, e.g.).

Modern OpenGL assumes linear color, so instead you have to specify sRGB on texture load to direct the driver to do colorspace conversion (e.g. GL_SRGB8 for typical RRGGBB byte triples).

More info: https://www.khronos.org/opengl/wiki/Image_Format

[pornel]

Mixing of colors in an "objective" way like blur (lens focus) is a physical phenomenon, and should be done in linear color space.

Subjective things, like color similarity and perception of brightness should be evaluated in perceptual color spaces. This includes sRGB (it's not very good at it, but it's trying).

Gradients are weirdly in the middle. Smoothness and matching of colors are very subjective, but color interpolation is mathematically dubious in most perceptual color spaces, because √(avg(a+b)) ≠ avg(√(a) + √(b))

[itishappy]

To be fair, lerp still mixes colors, it just mixes ugly colors.

[immibis]

(1,0,0) and (0,0,1) are each twice as bright, in terms of photons, as (0.5,0,0.5).

If you quickly apply gamma=2 so the midpoint is (0.707,0,0.707) your gradient will look much better. Although other commenters suggested mixing in more complicated colour spaces.