Lock or Align images/pngs in editor viewport with post processing materials.

Hi Everyone!

I’ve been trying to use a Post Process material to have images locked in place in the viewport. So far I’ve managed to lock the image in the bottom left corner, but I want to have the freedom of just aligning any type of image to the editor’s viewport.

I started the test with a crosshair, but then moved to actual images with color.

Example image:

image

This is so far what I’ve accomplished:

The little image is locked in the bottom left corner of my viewport as a post processing material.

image

It doesn’t matter if I change the proportion of the viewport, the image won’t move and the image will stay in proportion as well.

image

This is the code for the material so far:

Can somebody give me further assistance with this?

I want to better understand post processing materials and explore more options like Vignettes, Crosshairs, non-blueprint widgets, Branding positioning etc.

Shout out to @EliasWick for his kindness in helping me so far.

Hello Nico!

I want to properly introduce myself, before we dive into the post process materials. My name is Elias Wick, and I have been working with post process materials for such a long time now. Here is a collection of the ones I have published: Elias Wick | Post Process Shaders.

To understand what you can do with post process materials, you need to understand what they are and how they work.

Post process materials are materials bound to a post process volume or a camera. They can be toggled on and off and they function pretty much the same as a normal material. The big difference is that you lose access to some functionality, and gain access to many of the graphical buffers (Scene Textures). Post process materials are usually used to modify or change the graphical appearance on the screen. If you want to create a cel shader or an outline shader like the one you’ve seen in the Borderlands series, post process materials are the way to go.

A post process material is a shader, and with shaders you can do a lot of stuff. You can create entire games using just materials / shaders. Have a look at this to see shaders taken to the next level: Super Mario Shader.

Although shaders can be used to do a lot of stuff, it’s important to remember that there are other tools better suited for certain types of work. Even though post process materials aren’t that expensive to use, there are at times more optimized routes to take. If you wish to display an image on the screen, you can just as well use UMG widgets or some other form of image overlay.

To answer some of your questions:

  • Vignette - If you wish to create a Vignette effect, using a post process material would be the way to go. Here is a product I have created for a Vignette effect: Elias Wick | Vignette. The basics of how to create it is to use a mask or texture to mask out the corners of the screen and then darken those areas.
  • Crosshairs - Although crosshairs are often created using UMG widgets, it’s possible to create them using post process materials. You would have to expose parameters that are then modified by code to have the crosshair change size when shooting, etc.
  • Brading Positioning - For branding, it would in most cases be reasonable to use UMG widgets as they already support everything you would need to use.

In conclusion, you can think of post process materials as a way to get the viewport screen and do something with it. I highly suggest you check out my work to see what is possible: Elias Wick | Post Process Shaders

2 Likes

I really love your shaders!

Thank you very much! I really appreciate it! :smiley: