breakdown

Prismic Display

UE5, Blueprint, Material, procedural

This project started with an idea for a parallax screen material in UE5, and a simple scene to show it off in context, with randomly generated graphics.

The core of the screen material is a parallax effect which uses a reflection vector to fake depth. It takes the texture and renders it at three depths, each layer tinted a different colour and drawn together additively. The inner and outermost colours can be manually chosen, the third colour is calculated so that the three combined always add up to white.

The generated texture is a single channel Render Target which is drawn to using Canvas in Blueprint. I created many small drawing functions - one for each style of graphic, and then created graphic collection functions which randomly choose the individual graphics and fit them into a subdivided area.

The overall algorithm divides the screen into a grid layout with randomly sized and spaced columns & rows. Graphic collections are chosen to fill the resulting spaces based on rules like row height / column width. Selective repetition and a wide range of scale help create a sense of visual hierarchy and believable designs.

Additonal branches produce the title card screens, as well as texture overlays. I found that you can draw a render target onto itself which made for some cool glitchy chaos, but I ended up dropping this from the final look.

The material has a number of distortion, glitching and scrolling effects which are controlled by the Blueprint, and are mostly variations of using noise to offset UVs. The screen gets updated on a random timer. I keep this frequency below the recommended 3Hz threshold to avoid triggering photosensitive epilepsy.

There's a few things I didn't get time to finish, the scrolling effects make some noticable temporal ghosting at runtime, so it would be good to look into writing to the velocity buffer in the future.