Fix it in post

This weekend’s UE4 challenge was to start working on my “teleport Dr Freeman to Xen” effect.

I wanted to keep it much in the same vein as the original, so it’s a flashy greeny glowy thing πŸ™‚


I’ll probably need to do more work on it at some point. It’s pretty weighty, sitting at 94 shader instructions and 4 texture samples (including the colour buffer). Having just screenshot the thing, there’s at least a few places with redundant nodes to clean up πŸ™‚

I can probably also remove the colour buffer and a bunch of instructions, I had planned to run distortion over it, but the effect is pretty quick, so I’m not sure it really needs it.

Here’s a screenshot of the Blueprint (I know, the resolution isn’t great):

UE4 teleport post fx
UE4 teleport post fx

A quick breakdown:

  • “Distance from Centre” group gets the pixel’s UV position relative to the middle of the screen
  • “Ring bounds” these are the two dynamic properties that control the width of the ring that expands out from the centre.
  • “Is Pixel In Ring” is more or less like a big switch statement saying “if we’re outside the ring, do this… In the ring part, do this… In the centre of the ring, do this… Etc. I don’t use branches though, I just generate out mask values and use those in a big stack of lerps πŸ™‚
  • “Overlay Texture Value” this is where most of the work happens. I use the “ScreenAlignedPixelToPixelUVs” to sample two textures with the correct aspect ratio, then I create two copies of the UV values rotating in different directions (from the centre of the screen). I have a noisy web-like texture that gets masked by the Ring part generated in the last group, and a more general noisey texture that looks a bit like frosted glass, which blends in from the centre of the ring. At this point, we’re talking greyscale images for all these things, btw, which leads into…
  • “Mix masks…” in this group, I mix the background (colour buffer) with a black circle that expands out of the centre of the screen. I think I could probably just use alpha to blend to the background instead, since I’m not taking advantage of distorting the background (like I mentioned before). The other thing that happens in this group is I add colour to my textures, using a 256 * 1 lookup texture, so I can move the values between various shades of green before going to white. Pretty much a “Gradient Map” from Photoshop πŸ™‚

    And that’s about it! There’s some other bits and pieces in there, but nothing too exciting.
    If you’re curious about the textures, I made them in World Machine πŸ™‚ I will probably change them quite a bit over the course of the project.

    This was a good fun crash course in my first UE4 material (with dynamic properties), first full screen effect, and post-processing volumes, etc.
    I’ll probably to another post process effect when the good doctor recovers on Xen, but we’ll see!

    Previous related updates:

    Not a leg to stand on
    Bevels and Blueprints
    Chamber update #2
    Resonance cascade

  • Leave a Reply

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

    You are commenting using your 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