Website powered by

Occlusion Cutout Shader - Inspired by Baldur's Gate III

I spent far too many hours pivoting the camera around this corner of Sharess' Caress in an attempt to understand what was going on with the circle cutouts

The size of the spherecast we perform to detect if the avatar is occluded makes it so the cutout appears if the player enters any narrow space like a doorway

The subtle 'lag' of the cutout is both a feature and an optimisation. We only spherecast every 0.1 seconds, and lerp the cutout region over time to give a nice smooth motion and save on physics checks

Here's some more raw 'gameplay' footage! While it's hardly the star of the show, it was fun setting up the camera pan/pitch/zoom controls too!

Breakdown p1

Breakdown p2

Breakdown p3

Occlusion Cutout Shader - Inspired by Baldur's Gate III

I spent a few days recreating the occlusion cutout feature as seen in Baldur's Gate III. Ultimately it ended up being a lot more straightforward then expected!

While originally I thought it was just a perfect circle mask shown in screenspace, it's actually a sphere mask localised around the player. Specifically, we do a spherecast from the avatar to the camera to detect if it's blocked from view, pass that hit point to a material to draw a sphere mask around that point, perform some math to include all pixels within that mask, and then add some polish here and there to make it pretty! Check out the videos for a more in-depth explanation!

Notes:
- run spherecast on delay to save perf
- only tick logic is FInterp of 'AvatarPos'/'CutoutTransition' values
- separate ground/walls to not fade out stuff characters walk on
- use 'ShadowPassSwitch' to keep shadows from faded geo

This technique could easily be adapted to Unity / Godot too btw - nothing proprietary to Unreal to enable this :)