Outputting content in TouchDesigner

Why is outputting content from TouchDesigner hard?

TouchDesigner is an interesting software. There aren’t many other tools like it. The amount of capabilities and flexibility make advanced users feel all-powerful while new/intermediate users might feel paralyzed or lost. When it comes to outputting your finished content from TouchDesigner to your displays, many of the issues users experience including tearing, stuttering, or judder involve a lot more moving parts than you might realize. Three terms that underpin all issues and strategies for outputting content from TouchDesigner are FPS, Hertz, and VSYNC. 

What is FPS?

This one might be a little obvious for anyone working with video or with basic TouchDesigner experience. FPS is an acronym for Frames Per Second. It is the target amount of new frames (or images) your application is trying to output every second. When an application is set to 30 FPS, it is trying to draw 30 new images every second. Your application does its best to render that many frames per second, and it might even render way more frames than that depending on the application settings. FPS is a property of your application/system/video player. Your system load can change and cause fluctuations in your FPS. I’m deliberately being detailed, because the lack of detail is what leads to confusion and leads to people using the next term interchangeably with FPS.

What are Hertz?

You’ve probably seen Hertz (Hz) on specifications for monitors or different displays. Hz are a unit used to measure frequency, and in this context they represent the frequency at which the display will refresh its image. A display that refreshes at 60hz will refresh the image on screen 60 times every second. One that is set to 59hz will refresh its image 59 times a second. This sounds an awful lot like FPS…but it’s very different. Hz are a property of displays. They are not impacted by your application/system/video player workload in any way. Screens continue to refresh consistently whether your application is running smooth or crashed. Displays have their own clocks that control their refresh frequency. So although Hz might sound similar to FPS, the devil is in the details here!

What is VSYNC?

I like using caps so I write it as VSYNC, but you may have seen V-Sync or VSync or just plain of vsync (boring…). Now that we know the difference between FPS and Hz (in the context of our industry at least), why does it even matter? It just sounds like we’re splitting hairs here. But first, what is VSYNC? VSYNC is a setting that can be found in applications, games, operating systems, and graphics drivers that attempts to synchronize your applications / games / OS / drivers output FPS with the refresh frequency of the display. It tries to make new frames from the application and refreshes of the display to happen at the same time, so that they move together to the next frame. So what’s so hard about that and why is it so important? The importance of VSYNC (and FPS and Hz) lie in the fact that the different combinations, mismatches, and poor setups of the three are the root causes of screen tearing, stuttering, and judder. We won’t dive deeply into what those are in this post, but they’re artifacts that range from barely noticeable to complete show-stoppers. In many sense, VSYNC is the only thing on your side trying to keep things consistent and artifact-free!

So what do I do??

Well, it’s complicated! There are a lot of factors at play including:

• display drivers
• operating systems
• OS compositing engines
• signal paths to displays
• graphics cards hardware
• software infrastructure
• production computer setup

And those are just to name a few at a high level. The best advice you can receive at a high level without a deep dive is the follow:

1. Make your application FPS match the display refresh frequency (Hz)
2. Make your application FPS evenly divisible into the display refresh frequency (Hz)

What does this cryptic language mean? Simply put:

1. If your 4K screen runs at 60hz, try to run your application and content at 60 FPS
2. If your 4K screen runs at 120hz, but your content is costly to generate in real time and won’t be able to run at 120 FPS, so either run it at 30 FPS or 60 FPS

By evenly divisible, we mean that you want an integer result when you divide your refresh rate by your application FPS. 120 divided by 60 = 2. That’s evenly divisible. 120 divided by 30 = 4. Still evenly divisible. 120 divided by 48 = 2.5….not good, avoid this. As long as your application and content FPS are equal to, or can evenly divide the displays refresh rate, then neither the OS, the GPU, nor the displays will need to do fancy tricks to make things work.

You can also check out our YouTube tutorial, which will give you a basic start on outputting content:

How to go even further?

As mentioned, outputting content is oddly complicated and has a lot of moving parts. If you want to learn more about it and all other things TouchDesigner, then I highly suggest you become an HQ PRO member.

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.

1. Head over to our HQ PRO home page
2. Sign up for our free 7-day trial
3. Check your email for links to stream and download the videos and project files

You’ll have all the tools you need to avoid tearing, stuttering, and judder for all of your TouchDesigner projects.