Saturday, August 18, 2018

webgl - How can I simulate a limited (256) color palette in OpenGL?


On Twitter, I found this screenshot of a game in development:


enter image description here


The image on top seems to be without any color limitation. But the two other pictures at the bottom have a 256 color palette.


I want to achieve a similar effect in my game (I am using OpenGL). How can I do so?



Answer



I am the creator of that image.


The image on the right is rendered using a color look-up texture. In the final GLSL shader, I apply the dither, then convert the RGB values into integers in the range 0<=x<40, combine them into a single index, then look up the resulting color value in this image:



color look up table


The lowest row is the raw palette.


The image to the left is made purely in the shader by downsampling the red and green channels to 8 values, and the blue channel to 4 values after applying the dither, resulting in RGB332. I've also played around with 7 red, 9 green and 4 blue shades, resulting in only 252 colors, but with a bigger emphasis on green, which the human eye is the most sensitive to.


No comments:

Post a Comment

Simple past, Present perfect Past perfect

Can you tell me which form of the following sentences is the correct one please? Imagine two friends discussing the gym... I was in a good s...