Every industry has its own sets of trick and techniques for getting things done. One of the greatest bits of fun in our industry is trying to harness everyone else’s techniques in real time! A great technique that we recently talked about in one of our HQ PRO group coaching calls is how we can use pre-rendered transition mattes in a real-time system like TouchDesigner to make simple yet extremely effective transitions.
What is a matte?
The first thing we need to understand is what a matte is. Different fields will have a different definition of it, but the kind of mattes we’re talking about are essentially masks. They’ll be black and white mask textures where they usually begin on full black, do some kind of animation to fill the screen with white, then either hold the last frame on full white or animate back to full black. You can image that black represents the first piece of content and white represents the second piece of content. So as the black pixels become white, those pixels crossfade from the first piece of content to the second.
Think about a simple example like this where the screen starts black and fills in white from the right side:
While that may seem a bit simple and basic, even a transition as simple as this is still used in Hollywood movies! Great examples of these that most people can relate to are the wipe transitions from movies like Star Wars (even the new ones!).
You can see above and imagine that the frame with Harrison Ford would be correlated to when the matte is full black (start of transition) and the tie fighters in the mountain would correlate to full white (end of transition). Hopefully your imagination is already getting a bit excited for what’s possible!
Why is this awesome?
You might be excited, but you might also be thinking “who cares if how you do a cheap wipe like that?” I don’t blame you! What you should consider instead is that the film and broadcast industry has a system for building transitions that they’ve been using for a long time. And what does that mean?
It means that there are TONS of assets available, it’s going to be cost effective, and people have more than likely already tried to push the creative boundaries of it. All of these apply to matte transitions. You can go on any kind of creative asset store and you’ll find hundreds if not thousands of transition matte packages in all different styles for very affordable prices. Above, I did a quick search for transition matte on VideoHive and found 1800 results. You can see not only the volume (100 mattes in a pack, 20 mattes in pack, etc) but also the range of styles. Just because you can only make pixels go from black to white doesn’t mean you can’t have fun doing it. Here’s a preview from one of the packages focused on glitch effects (it shows all the mattes in the pack in a grid for previewing):
Those look pretty slick! And what happens when you plug in your content to this and put a few of them back to back?
Damn! You can do that for about $15?? Yes you can!
Get Our 7 Core TouchDesigner Templates, FREE
We’re making our 7 core project file templates available – for free.
These templates shed light into the most useful and sometimes obtuse features of TouchDesigner.
They’re designed to be immediately applicable for the complete TouchDesigner beginner, while also providing inspiration for the advanced user.
Real-time time!
We’ve learned about this new trick but how do we get this into TouchDesigner? Luckily it’s extremely easy with….*drum roll*…. Matte TOP! Yup, we have a TOP specifically dedicated to this task. It’s so easy I don’t even need a gif to show you how it works:
The content you want associated with the white pixels in your matte go into the first input. Content you want associated with black pixels go into your 2nd input. Your black and white matte goes into the 3rd input. The only other thing you’ll need to do is change the Matte Channel parameter from Alpha to Luminance unless black pixels are also alpha value 0 in your file. In many of the ones I’ve used, there wasn’t an alpha channel, and changing that to luminance will tell the Matte TOP to just use the pixel colours instead. In the image above you can see I used the same simple rectangle from the beginning of this post and have the transition rolling along. I could even use one of the previews from VideoHive as an example:
That’s the middle of one of those glitch transition mattes being applied to my two inputs of the Matte TOP. That’s it! Nothing super complicated here!
What next?
The sky is really the limit. Transitions are often some of the most processing expensive portions of our projects and can be particularly time consuming to make, especially when the focus on most projects is what comes before or after the transition. When you start to think about the fact that you could buy or pre-render complex transitions into black/white transition mattes and run your content through a Matte TOP, you’re getting a lot of benefits for very little tradeoffs. Low system resource needs, low cost to acquire assets, tons of pre-existing libraries and assets to choose from, and low complexity in your TouchDesigner project often make them a no-brainer choice in the projects I’m working on. Enjoy!
