Pixel Post FX Shader

I was playing Persona 4 recently and just got to this dungeon:

Persona_4_void_quest_2.png

This gave me an idea for a post fx shader. I imagine the assets for this dungeon were purposely made to look pixelised, but since the rest of the game doesn’t look like that I figured it could be cool to swap styles using the shader.

I made the shader by getting the postion for each pixel on the screen and the multiplying it to scale it up. I floored this to prevent decimal values so that we’d get nice blocky pixels. I then divided this by the amount I multiplied to remap it back to the same uv space.

2

Plugging this into the UV coords of the G-buffer contents gave us this!

highresscreenshot00007

I thought there was something off looking about this image, and I think the problem was that something that low res is unlikley to be handling so many colours.

I added a LUT to my post process volume and created some textures using photoshop’s indexed colour mode. This allowed me to limit the amount of colours in the image.

1

rgbtable16x1_256

Here’s the scene in 256 colours:

highresscreenshot00006

Combining the two we get a pretty nice effect!

highresscreenshot00009

I had a go with pixel scale values of 64, 128 and 256, as well as colour amounts of 8, 16, 128 and 256. Using material instances made this simple to swap in  and out.

rgbtable16x1_128

rgbtable16x1_16

rgbtable16x1_8

highresscreenshot00017highresscreenshot00016highresscreenshot00015highresscreenshot00014highresscreenshot00012highresscreenshot00011highresscreenshot00010highresscreenshot00008

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s