Color Mapping!

So, despite the lack of posts here I haven't stopped working on Unsafe! In fact I've been getting a lot done on it over the past several months, generally on low-level systems. It would be difficult to list it all so I'm just not going to and instead I'll talk about color mapping. As our color image, we'll be using a promo pic from that classic of 1980s animation, Dirty Pair:

Color mapping involves taking an image, and then mapping all the colors to their closest values in a different palette. (If you're getting all HDR, or you're one of the people in charge of making modern Hollywood movies look as flat and bland as possible, you might refer to it as tone mapping instead.) A relatively easy way to accomplish this is to make a shader that takes pixel colors from the input texture, uses that color as texture coordinates in a 3D texture (r, g, b -> x, y, z), samples the color there, and puts that on the screen. The shader looks like this:

#version 330 core
uniform sampler2D i_texture;
uniform sampler3D i_colormap;
in vec2 io_texCoord;
layout(location = 0) out vec4 o_color;
void main() 
{
    vec4 originalColor = texture(i_texture, io_texCoord);
    float bias = 0.5 / float(textureSize(i_texture, 0).x);  // Half a texel to avoid sampling right on the edge and creating artifacts
    vec3 coord = clamp(originalColor.rgb, bias, 1.0 - bias);
    o_color = texture(i_colormap, coord);
}

So now we need to create that 3D texture. To do that, we start with an input palette texture which contains the colors we want to support -- here's an example of a Commodore 64 16-color palette from the excellent Lospec palette site.

We simply need to find the closest color in this palette to every color on our display (or, technically, every color that appears in the source image.) Now, modern true color displays support over 16 million colors, so not only would it take a while to generate but the output 3D texture would be over 16 megabytes in size... which admittedly is fine on modern hardware, but feels like too much to somebody like me who grew up in the era when those 16 colors in the palette above were the pinnacle of consumer technology. So instead we'll make a texture that's 32 texels on a side, for a total of 32,768 color entries, and when it's sampled by the shader it will effectively be finding the closest match to the source color among the "input colors" provided. And to find the closest matching color, we'll just do a "color distance" calculation like so for all potential colors and find the closest one:

float cColormapGeneratorState::ColorDistance(const tColorRGBA& a, const tColorRGBA& b) const
{
    float dr = a.r - b.r;
    float dg = a.g - b.g;
    float db = a.b - b.b;
    // Weighted RGB for better perceptual matching
    return (dr * dr * 0.3f) + (dg * dg * 0.59f) + (db * db * 0.11f);
}

Note the weighted RGB calculation -- the human eye is more sensitive to some colors and less sensitive to others, so we're more interested in the green proximity, less so in the red proximity, and least of all in the blue proximity. You might want to sit back and think about the hints that provides about how humans evolved! Anyway, with that done and the results packed into the 3D texture, we can now do our mapping and here's the wonderful result:

It is admittedly the case that the Commodore 64 did not have the most attractive color palette, but yeah, there we go! At the bottom of the image you can see slices through the 3D texture, which are just neat to look at.

We can now do as much colormapping as we want. Here we've used the Windows 95 default 256-color palette:

And here's the IBM PC Color Graphics Adapter's palette:

It's funny, the sense of nostalgia that just colors, even ugly ones, can provoke. So I'd better wrap up this post before I accidentally smell a madeleine and recapitulate my entire childhood. See you in the funny papers.