Today's top tip: screen space wipes/reveals

This may well not be news to most, but I’ve only just noticed it’s possible, and it could be handy for making zippy UI stuff.

The technique for making portals, where you use a transparent/invisible object to mask off parts of the scene, works in Z.screen space too, even though screen space … well, it’s kinda just not proper 3D. Flatland. Let’s call it Flatland.

Use layer modes in the same way as portals - have your mask layer above the stuff you want to mask in the hierarchy, set it to full_3d, dial its Alpha to 0. Then underneath that, set the stuff you want to mask to test_3d.

Even though moving objects around on the Z axis in Z.screen space doesn’t make them bigger or smaller – there’s no concept of perspective – the Z axis still affects render order for objects in full_3d / test_3d. But for flat things positioned at Z = 0, like most image planes / text we tend to use in screen space, the hierarchy order is what matters.

Means you can wipe on text or other flat graphics: or you could have a masked area, then move graphics around behind it. You can use more than one mask, too; with a few interestingly shaped flat meshes, set up as masks, animated so they pull away from the centre of the screen, you could do some quite complex reveals. The built-in Square Mask and Circle Mask work too.

Quick bare-bones example - move the plane around: 2D Masking.zpp (132.2 KB)

Thanks to the renderLayer property, this can be combined with other groups of separately masked objects, whether in real 3D space or Z.screen space Flatland. Nice.

2 Likes

Nice way to use it!

Steve

Hi @howiemnet,

Great post, this is a really clever way to add some ‘oomph’ to your projects!

I thought this might also be a great place to highlight the Render Order documentation for anybody looking into this sort of behaviour! You can find it here. :sunglasses:

Have a great day!
Francesca :blush:

1 Like