Making Peace with Blending and Color Spaces

originally i just wanted to make a patch that explains blending on the GPU.
then i fell into a hole of color spaces and hardly came out again. long story short - here is a patch that tries to explain some things around color blending and color spaces (which is something that anyone trying to be precise sooner or later runs into and pulls his/her hair out).

Stride_Rendering_Blending_ColorSpace.vl (127.9 KB)

what you will see in this patch:
i just wanted to proof how AlphaBlending works by manually implementing the calculation to Blend RGB and A values, like it is done on the GPU. Unfortunately it becomes hard to show this in a patch, because standard Stride works in linear space and the VVVV Editor (IOBoxes, etc.) handles colors in Gamma/sRGB space. so you cannot just put renderers and IOBoxes next to each other, because they will not look alike and are therefore confusing. so i had to go deeper and try to explain what conversion actually do happen and how to deal with the situation to get expected results.

to be honest: even though it took a lot of time i’m not yet really happy with the outcome as it is still kind of hard to read/follow. if you know what you are getting into, it might help you to understand but i doubt that it is a valuable resource for newbies. but that’s why i’m putting this here in the WIP category in the hope that with your feedback, error checking and suggestions we can make this a serious explainer patch. eventually i’d like to PR it for the help-patches of VVVV, VL.Addons, @tobyk 's intermediate tutorials, … whatever.

thanks for all the guys on the matrix for pushing me to release it anyways, even in the current state.

some more comments:

  • to keep it “simple”, i was only using Stride.Rendering (to leave out everything that is related to PostFX/ColorMapping that you will experience with the standard Stride Engine Setup
  • interestingly it seems that the RenderWindow and TextureWindow seem to handle 16Bit floatingpoint textures differently: while the RenderWindow displays them linearly/dark (on my system), the TextureWindow will not but with gamma correction (same goes for IOBoxes displaying this texture). not sure if this is a problem of my graphics driver or intended behaviour in VVVV. one more thing i had to wrap my head around - i find it confusing.

It looks like SetColorSpace is not connected in ColorBlendingExplained?


That connection is most likely only for ensuring the execution order.

here is also a good website with many visual examples, you can see that when blending/mixing/blurring colors in sRGB/gamma space you get these dark edges on gradients that you don’t have in linear space. Also, light calculations are physically accurate in linear space, these two reasons are why modern (like for >10 years now) GPU pipelines work in linear color space:
image image
Color blending in linear (left) and gamma/sRGB (right) with visible dark edges

Another one, more about light calculations:

More to come…


some more:


nice lenghty colorful and interactive article


Was just going through my bookmarks and these came up: