Basic Compositing

Curriculum Navigator:

If you’re viewing this page from the TouchDesigner curriculum explorer, you can use the buttons below to interact with this topic.


Compositing is a common operation when working with real time graphics. From adding backgrounds, composing bottom-third graphics, or blending images, the Composite TOP is helpful for similar operations we might do with Photoshop After Effects, Motion or Nuke. In this set of examples we’ll look at some of the essentials for compositing in TouchDesigner.

A Composite TOP combines two or more images. It has most of the same blend modes that you find in other compositing tools. It can be configured to control the blend order of inputs both by manipulating the connection order, or with the `Swap Operation Order` parameter.

While the Composite TOP is a single operator that performs multiple types of composite functions, there are also some TOPs that perform a single type of operation on two inputs. The Add, Subtract, and Multiply TOPs are examples.

The Composite TOP can be configured to work like a traditional compositing tool by setting the Pre-Fit Overlay parameter to Native Resolution. This workflow is often useful for working with assets whose resolutions are fixed and need to be maintained when compositing.

Scroll to Top