Page 1 of 1

Color effect

Posted: Tue Mar 20, 2018 3:27 am
by rrTea
I'm thinking of implementing an effect that would make the whole screen look as if it were rendered in 8 bit palette. The effect should look something like in the attached screenshot - note the glitchy effects on the background etc. This particular example was done by just recording the screen and reducing it to 256 colors. Ideally there could also be some dithering effects and varying color fidelity for a slightly "gif-y' effect.
https://imgur.com/wuGbA2r

How would I go about this? Right now I draw the screen using one single RenderTarget, so I assume the next step would be to plug a shader into the Material that I use to draw the RenderTarget texture? Or?...

Re: Color effect

Posted: Tue Mar 20, 2018 11:15 am
by Kjell
Hi rrTea,

Basically yes .. but there quite a few different dithering algorithms ( each with their own specific look ). Attached are two simple examples; one that simply reduces the output to 256 colors / 8-bit ( red and green are 3-bit while blue is 2-bit ) and another one that dithers the output using ordered dithering ( Bayer matrix ).

By the way, i'd strongly recommend not going this route. Your game is already "difficult to read" at times due to the low resolution. Reducing the color-depth would only make this worse ( in my opinion ).

K

Re: Color effect

Posted: Wed Mar 21, 2018 3:18 am
by rrTea
Gave it a quick test - it works! I tried using it in my current project - actually looks pretty good... for the most part ;) (but there are some things that turn into a mess). Right now I don't really understand how it works so I'll have to study it a bit before trying to (eventually) use it seriously. Still, good to know this is how it's done, thanks!

Re: Color effect

Posted: Wed Mar 21, 2018 12:29 pm
by Kjell
Hi rrTea,
rrTea wrote:Right now I don't really understand how it works so I'll have to study it a bit before trying to (eventually) use it seriously.
The way that it works is that the screen is divided up in blocks of 8x8 pixels ( using modulo ). Each color component of those pixels are compared against a value from a 8x8 dithering threshold matrix ( you can find these values on Wikipedia ). So when you want 3-bit depth ( just like red and green in the example ), you multiply those components by 7 ( 3-bit ranges from 0 to 7 ), use the floor as the base-value and test whether the remaining fraction is above or below the dithering threshold for that pixel.

K

Re: Color effect

Posted: Thu Mar 22, 2018 10:31 am
by rrTea
Yes, I thought so - after a bit of testing it seems this approach can't work well for my particular situation without significant tweakings.

The actual game itself looks almost the same but without even going into the whole readability issue, some things look almost unrecognizable, especially the parts where lots of gradients are used (the banding takes over the whole image - cutscenes etc).

Too bad, some parts look very interesting rendered like this, especially various fadings. I'll try to use this for some other things.