2.5D Depth Compositing

Psst… wanna hear a secret? In an earlier incarnation of Fatal Attractions the game had a different name: It was known as Libera Me.
Libera Me never really got past the tech demo stage. But a key element of the game’s tech was its 2.5D compositing. The idea here is to have pre-rendered background images which contain information about each pixel’s depth. Through some clever shader tricks this allows us to perform several graphical feats that usually require full 3D scenes:

  • Depth compositing
  • 3D lighting
  • 3D shadows

This concept was used heavily in the earlier Resident Evil games.

I’ve decided to revive this technology for Fatal Attractions. The cool thing is that the entire background scene as well as the character are just billboard sprites; that makes for a whopping 4 (!) polygons being rendered in the clips below!
The 2.5D depth compositing is implemented via custom shaders and provides correct depth occlusion, as seen in this short clip when the character walks towards the background and ends up behind the tomb stones:

Traditionally this kind of depth compositing would require a fairly elaborate setup of masks and/or occluder geometry. Not so with 2.5D compositing where we get the occlusion for free without any extra effort.

But wait, there’s more! Here we can see a real-time directional light casting shadows from a 2D sprite onto a 2D background… and thanks to 2.5D depth compositing we get correct 3D shadows just like in a proper 3D scene:

Of course we’re not limited to static light sources – we can even move a light around. Here we have a dynamic point light moving around and lighting up just the appropriate region of the scene. Also note how the character sprite casts proper shadows onto the background geometry.

I plan to use the dynamic 2.5D lighting to allow the player to investigate using a flash light as well as other sources of light. Of course dynamic shadows will also have their place.

Unfortunately the video compression made a bit of a mess with the image quality, so here’s how the background render is meant to look:

The spooky cemetery