Electric Girl Post FX

I was listening to the album Electric Girl by She the other day and wanted to try creating a post fx shader in the style of the album artwork.

a1739426881_10.jpg

There are several things that the art is doing that I’d like to recreate:

  • R + B Shifting
  • Vignette
  • Subpixel Overlay
  • Grid Overlay
  • Glitching

R + B Shifting

I did the R + B shifting using the sobel edge detection technique I discussed in a previous post. When drawing the pixel, this depth checks the adjacent pixels and if the value difference is large enough, colours the pixel. I pushed out the values a little so it was checking 2 adjacent pixels to give a thicker edge.

9

The red/blue colour was done by getting the UVs of the screen position and getting the sine of the U component. I used this to lerp between my two colours. I then added this to a lerp between the red and blue components of the gbuffer contents, based on the same interpolator. Multiplying this by the gbuffer contents gave me a blend that brought out the red and blue areas of the scene depending on what the blend colour was.

21

5

Grid Lines

If you’re reading this as a “how to” – don’t. This is super wrong and hacky. But it works for me!

I made the grid lines by multiplying the screen position UV with my scale UVs and feeding this into two linear gradients. I added these gradients to the U or V component divided by the line thickness, then added one on one side and subtracted one on the other. Flooring this then subtracting one from the other gave me a line! Adding them gave me a grid, but I changed my scale UVs to have lots of horizontal lines and the occasional vertical one.

10

I used this as an interpolator between my scene colour and line colour to give a bit of choice in the colour of the line.

11

13

LED Subpixel Element

The subpixel element was just a very small texture tiling texture. I tried adding and multiplying this, but went for an overlay blend in the end to get the look I was after.

14151617

Vignette and Grain

These were both from the scene post process volume settings, but I added an extra vingette to the shader to darken it – just used the radial gradient node that unreal has and used this as an interpolator between scene colour and scene colour raised to the power of 3.

181920

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