Hacker News Reader

Comment by gavanwoolery | Hacker News Reader

Note on the usage of lookup tables: Color transitions are hard - their example here looks pretty good but in general tweening between two color spaces in a linear manner can produce unwanted "washing out" or dull in-between states. The problem is not just within the transition of individual colors, but how the relative values of nearby color affect our perception. For example, see this illusion in action: https://twitter.com/AkiyoshiKitaoka/status/10284735661933158...

View on HN

Color transitions are hard, and that illusion is pretty trippy. Beyond that, my sense is another big problem most people run into when they try to light pixel art (or any hand-painted asset) is that the asset is almost always "pre-tonemapped" by the artist. By first inverse-tonemapping the asset before applying any lighting, and then re-tonemapping afterwards, you can get pretty good results (assuming you can work out your artist's intuitive tonemapping function). Here's a fun article which explores the idea a bit more: http://www.codersnotes.com/notes/untonemapping/

I think cause of this article problem is not that textures require some "untonemapping", but that they are typically stored with sRGB gamma, and thus should be converted to linear for lighting, and converted back to sRGB gamma in final pass. (either by explicitly using 2.2 gamma in shaders, or graphics API conversion, eg. in GL using GL_SRGB8_ALPHA8 format and sRGB framebuffer with enabled GL_FRAMEBUFFER_SRGB)

That’s a really cool idea. Thanks for the article too, it provided for some excellent illumination. (Badum-tish. Sorry.)

Thanks, I will take a look :)

I find that RGB color space has lots of washed-out colors with linear interpolation, but other color spaces like HSV or HCL don't have the same issue. I tend to use those color spaces for creating gradients for charts with D3. I don't know if any games make use of them.

Agreed, here is one good comparison of color spaces: http://davidjohnstone.net/pages/lch-lab-colour-gradient-pick...

Things like CIELAB are also interesting in that they provide more perceptually uniform color spaces, but at a greater computational cost.

There's also a good discussion of colorspaces and perceptual linearity in "A Better Default Colormap for Matplotlib": https://bids.github.io/colormap/

Agreed. I found the YIQ color space for perceived luminance to be extremely useful for foreground/background color readability. http://blog.nitriq.com/BlackvsWhiteText.aspx

There are other tricks you can use like stroking/bordering the text with the opposite color as it provides contrast when white is on a light background or black is on a dark background. You can also have the text "glow" or some use a drop shadow. But these don't work that great when your text is small. However you have to use these tricks when you are putting text on top of a gradient.

HSV has been my color space of choice when I made simulators for government and industry. That's been my technique since 2007. Lerping through colors that way always looks atleast fine.

I faced what I think is a similar issue on Android : colors in RGB are gamma encoded; which make linear animations between 2 RGB values not linear at all.

There I solved it once I realized what was going on by converting the start and end colors to linear sRGB values and then interpolate between these two.

Would this work here too ?

Even worse, directly tweening between two colors in RGB space can produce other unwanted colors.

One has to switch to HSV for proper tweening.

Reply on news.ycombinator.com