Easy Scenes & Transitions in TouchDesigner

Managing different scenes and moving between them in an efficient manner can seem like a daunting task. You start to think about all the different tools and networks you need to make just to get this simple functionality in your project. Never fear! Luckily in the palette there is the sceneChanger component that can help you get up and running quickly and easily!

Setup

The first thing we need to is get out environment setup. We’ll start by finding the sceneChanger in the palette and dragging it into our project. We can find the sceneChanger in the Tools section of the palette:

Now there are a few more pieces of setup that we need to do. The first is to create an area of our network that will hold all of our scenes. I’ll create a Base COMP named scenes and then I’ll reference it on the sceneChanger’s Scenes COMP parameter:

That final piece of setup we need to do is create a scene template and move it into our scenes component. We can do this by clicking the Generate Scene Template button on the sceneChanger component. This creates a new component just underneath it called sceneTemplate. We can cut and paste this component into our scenes component and give it a new name for our scene:

Great, our general setup is complete! We can now get to building some scenes!

Scene building rules

Scene building is surprisingly easy in this setup. There’s only two rules we need to follow here:

  1. The resolution of all our scenes need to be the same! This isn’t a strict requirement but it’s an important one when it comes to experience the full power of the sceneChanger, which includes how optimized it is as a tool. Switching resolutions between each scene will ruin a lot of the hard optimization work that has gone into it.
  2. Every scene needs to have an out1 TOP at the end. While you could switch these to nulls that are named out1, I’d recommend sticking to the template format and making sure that the final output of every scene you make it plugged into an Out TOP named out1. This consistency is how the sceneChanger component knows what content to get out of each of the scenes when it’s performing transitions.

So let’s build 2 simple scenes for our testing. The first will be the default scene, which includes a Text TOP displaying the scene name. So we don’t need to change anything about it. To make our second scene, we can simply copy the myScene1 component I made in the previous step and name it to something else:

If we go inside and follow the rules outlined above, we can add a Movie File In TOP, ensure the resolution is 1280×720 using a Fit TOP, and then connect that to our out1 TOP:

That’s it! Scene building could be as simple as this or it could be much more complicated in terms of content generation but as long as your final output of the scene gets to the out1 TOP, that’s all that matters. So now with 2 test scenes available, we can look at how to actually use the sceneChanger component.

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.

Transitioning through scenes

Now the moment we’ve all been waiting for: moving between our scenes easily. This is where the sceneChanger component comes up big time. There are 3 main parameters we’ll be using:

The Next Scene is where we tell the sceneChanger which scene we want to transition to next. The Fade Time is how long of a crossfade we want to have when we start the transition. And the Fire Scene will launch the transition! That’s about it as far as your regular controls! But how can we know the index of our scenes? The View Scene Index button when you click it will open a new window that will show you the related index for each of your scenes, that’s how we can tell what index to use for the Next Scene parameter. Below we can see our two scenes and the row index number next to them is the scene we’ll use for our transitions:

So let’s activate this! We’ll start by setting our Next Scene to 1 and we’ll click the Fire Scene button:

That’s all there is to controlling the sceneChanger! If we wanted to go to scene 0 using a 5 second transition we can update the Fade Time to 5, set the Next Scene to 0, and then hit Fire Scene:

That’s all there is to it! Behind the scenes, the sceneChanger is efficiently pulling the outputs of the scenes, performing the transition, and then switch to only allow the currently active content to pass through it.

Useful Extras

Now that we’ve got our system setup there are a few extras that might be nice to know about.

The first is that the scene templates that we used actually have a set of custom parameters:

We won’t dive into every single one here, but the Play button, Init pulse, and Start pulse can be extremely helpful in setting up your more complex scenes. The sceneChanger component will automatically click those Init, Start, and Play button dynamically based on whether the scene is active or not. This means that you could easily create a Timer CHOP in your scene and connect the Start pulse from the custom parameter to your timer’s start button, giving you a timer that will properly start as your scene comes up. You can do very similar things using a Parameter Execute DAT with the Init and Start buttons as well, allowing you to trigger your scene to reset or start more complex behaviours.

Wrap up

Whether you’re working on a theatre show, a music concert, or needing to transition between scenes in a permanent installation, having an efficient way to manage your transitions is fundamental to the project. Using the sceneChanger available in TouchDesigner’s palette is an easy way to build your shows or projects without having to stress about building everything from the ground up yourself!