The Interactive & Immersive HQ
TouchDesigner Tutorial: Output Video and Other Content
TouchDesigner Tutorial 15: Output Video and Other Content
Join The HQ PRO 7-Day Free Trial!
Join The Interactive & Immersive HQ PRO and get over 200 hours of TouchDesigner training, 100+ custom-built tools and project files, and access to a private community where Matthew Ragan and Elburz Sorkhabi answer your questions daily.
TouchDesigner Beginner Course Content
The final thing we’re going to look at is how to take the things we’ve been building and show you how to move your video output to a window, onto a screen, a projector, or an LED wall. It’s the same process for all of these different kinds of displays.
Set Up a Small, Quick Project
Let’s quickly set up a small project.
Create a Movie File In TOP, and load in one of the sample nature ones that TouchDesigner has. Make a Text TOP, type whatever text you want (I’m using “this is art” for my example).
Create an Over TOP and connect both the Movie and Text to it (make sure the Text is connected to the top input so it’s above). Change the pre-fit overlay to native resolution, and finally create a Null at the end of the chain.
Using Window Comp
The Null is that part that we’ll want to display on our screen, and there’s one very useful operator that we’re going to use for that: Window COMP.
This COMP’s only job in life is to take textures and create windows that we’re going to use for display purposes.
Create a Window after you Null, and first, go to the window operator parameter. We need to tell it what we want to display in the window. So drag and drop your Null to the window operator parameter and you’ll see inside of the window, you now have a preview of what it’s going to be drawing.
Using Window Parameters
There are also a lot of parameters for this COMP.
For new users, it can be a little bit intimidating, but trust me, you don’t need to touch most of them. The ones you need to know, I’ll show you.
Open as a Separate Window
The first one that I think is most important is “open as a separate window”. If you click the open button beside it, it will open the window in whatever setting shape it is, and it won’t close your network editor. This is handy if you want it to open the window while still working, you can open as a separate window (and you can also make it bigger or smaller).
Borders Parameter
What I like to do is go to the borders parameter of the Window COMP, and toggle it off. Now, re-open that open in a separate window button, and you’ll have the same thing, but without a header bar.
You might be wondering how you get rid of it now that there’s no header, there’s no “x” to click. One of the big hotkeys and shortcuts you need to know when working with TouchDesigner is you can just click on a window, hit Escape on your keyboard and it’ll close it.
Monitors Parameter
Another parameter to know about is monitors. This is useful because after you create your output, if you have two monitors (or more), you can go here and be like, this is the one I want it to go on.
After you open a separate window, you can drag the monitor parameter index around until you find the right screen.
Texture Size vs. Display Size
Currently, when we open our separate window, it’s not actually filling the screen. This is because our texture is only 1280 by 720, while our display is 1920 by 1080. There’s a few different ways we can deal with that.
One way is we can use some of the handy features of the Window COMP which allow us to fill and resize our texture.
Opening Size Parameter
Go down to the opening size parameter of the Window. Right now it’s set “Automatic from COMP/TOP”. What that means is the window is just going to take whatever native resolution our texture is at, and that’s the size that it’s going to use when opening the new window.
Instead, you can set it to fill. When you do that and hit open in separate window again, it actually fully fills your screen edge to edge over the task bar. And now we have our art piece fully displayed on our screen.
When you open as a separate window, TouchDesigner is actually still running in the background. The network editor is still working, and you can still work in there and touch stuff and fill stuff.
This is therefore the sub optimized way of creating the output because all of TouchDesigner’s beautiful graphics inside of the window takes some of your systems resources away. To deal with this, TouchDesigner has something called perform mode.
Using Perform Mode
Instead of open as a separate window, click the parameter above that which is open as perform window. This will actually get rid of your network editor completely, it shuts it down, puts it behind the scenes, and gives full processing power to the window that’s creating our content.
This will give you much better performance in 99.99% of cases. If you’re using the open as a separate window while you’re working it’s okay, but when you get to that time for show, you really want to switch it over to perform mode. And remember, to get back to your network editor, click on the window, and hit Escape.
Basic Outputs Summary
So with perform window, open as a separate window, borders, how to choose your monitor and the opening size, you should have most of your use cases covered, and these should be enough to get you up and running.
What About Outputting Video and Stills?
So far we’ve covered outputting live and real time content out of TouchDesigner using a Window COMP but what if you’re trying to output stills or videos? Whether you’re looking for our thoughts on animation codec (and which codecs are best for what) or Adobe Media Encoder as a batch encoder, check out our other resources linked below:
Output Movies from TouchDesigner
TouchDesigner Beginner Tutorial Wrap Up
Congratulations and thanks for finishing our TouchDesigner Beginner Tutorial Series!
You should now have a decent understanding and practice experimenting with all the operator families, a decent understanding of TouchDesigner technology in general, including the application and the workflow, as well as how to take some of these experiments you’ve been making and plugging them into an output whether it’s a display, a projector, an LED wall.
If you enjoyed going through this course, I highly suggest you take a look at The HQ PRO.
Inside of The HQ PRO, you get access to 200+ hours of TouchDesigner video training, and a private Facebook group where myself and Matthew Ragan answer your questions daily. You can also become certified as a TouchDesigner developer through our certifications exams and take advantage of the many other features that we have for HQ PRO members, such as twice-monthly group coaching/mastermind calls.
If you’d like to get more information and join The HQ PRO, use the link below. I look forward to seeing you there!
Now that you’ve completed our TouchDesigner beginner series, try out these tutorials to create some fun, quick projects:
Create a Stunning TouchDesigner Display Background
Mastering TouchDesigner Trails: Techniques and Tips
Exploring the World of TouchDesigner GPU Particles and Optical Flow
About The Author
Elburz Sorkhabi
I possess a deep knowledge in many professional fields from creative arts, technology development, to business strategy, having created solutions for Google, IBM, Armani, and more. I'm the co-founder of The Interactive & Immersive HQ. Yo!