Creating custom video FX for VDMX6 Plus with TouchDesigner

Introduction

Download the completed .tox file from this tutorial.

In this tutorial we will be creating a simple ‘flip’ FX in TouchDesigner to use inside of VDMX6 Plus with a basic set of sliders and buttons to control the composition.

The workflow described here can be used to adapt existing TouchDesigner compositions for use as sources and FX including custom published input parameters.

Requirements:

  • VDMX6 Plus (demo mode or full license)

  • TouchDesigner (paid or educational license)

Tip: The ‘TouchDesigner Extras’ folder on the VDMX6 Plus dmg also contains several useful .tox files to help get started.

Completed example Flip FX.

Overview

This tutorial is broken up into four major sections:

  1. Initial setup: Setting up the composition to receive the render size from VDMX and prepare for passing images back and forth with In & Out TOPs

  2. Making the TouchDesigner composition: Fill in the child component where the video processing will take place.

  3. Publishing control parameters: Published parameters for our component will appear as sliders, buttons, and other UI elements when loaded in VDMX.

  4. Exporting as a .tox file: Export .tox files by right-clicking on the parent component and selecting the “Save Component .tox…” option from the contextual menu.

Initial setup

In this example we are starting with a standard TouchDesigner starting point with the default rendering ops removed.

Render Width & Height

The first step in creating our video generator to use as a source in VDMX is to set up our parent component to receive the width and height of the layer that the generator is rendering to.

  1. Right click on the parent component in the composition and choose the “Customize Component…” option.

  2. Create a page for the published parameters titled “custom”.

  3. In the Component Editor window create a new parameter titled “Rendersize” of type “WH” (width and height).

  4. Inside of the component the parameters Rendersizew and Rendersizeh should be available from the “Parameter” CHOP.

  5. When loaded into VDMX, the width and height values are automatically updated along with the layer that the composition is playing on.

Set the default size and max range values on the Rendersize to use during testing within TouchDesigner.

Video Input and Output

The second step is creating the input and output from the component that will be used by VDMX to pass video back and forth with our composition.

  1. Open the main component in the composition.

  2. Right-click or press tab to open the op create dialog.

  3. Create a new Out TOP.

  4. Set the name of the Out TOP to outputImage.

  5. Right-click or press tab to open the op create dialog again.

  6. Create a new In TOP.

  7. Set the name of the Out TOP to inputImage.

Making the TouchDesigner composition

Once we’ve finished the basic setup, we can begin to fill in our composition. As TouchDesigner is extremely open ended, for this introduction walkthrough tutorial we are keeping things extremely simple.

  1. Right-click or press tab to open the op create dialog.

  2. Create a new Flip TOP.

  3. Connect the Flip TOP to the Out TOP.

Publishing control parameters

For this Flip FX we will want to be able to toggle the flip from within VDMX when it is loaded using the standard VDMX toggle button.

  1. First we will add the toggle input to the parent component:

  2. Right click on the parent component in the composition and choose the “Customize Component…” option as before.

  3. In the Component Editor window create a new parameter titled “Flipx” of type “Toggle” on our custom page.

  4. Inside of the component the new Flipx parameter should be available from the “Parameter” CHOP.

  5. When loaded into VDMX, the toggle values will be automatically passed in from the provided toggle button UI element.

Next we will connect the Parameter CHOP to the Flip TOP in our component. The easiest way to do this is using the OP inspector.

  1. Click on the Flip TOP to inspect it.

  2. Click the + button next to the Flip X parameter in the inspector.

  3. For the flipx component switch to ‘expression’ mode and enter:

    • flipx: op('par1')[Flipx]

  4. An arrow from the Parameter CHOP to the Flip TOP should appear.

The touch-flip loaded into VDMX6 Plus, with toggle button for the Flipx parameter

VDMX supports a wide variety of input types:

  • Float (numbers) -> Slider

  • Toggle (boolean) -> Toggle Buttons

  • Pulse -> Momentary Button

  • Int (Integer) -> Slider

  • 2D Point -> 2D Point controller

  • str (String) -> Text Field

  • StrMenu (String menu) -> Pop Up Menu

  • TOP (Image) -> Video Input menu

See the TDIO_xxx examples in TouchDesigner Examples for demonstrations of each of these other input types.

Exporting for use in VDMX6 Plus

The regular ‘Save’ command in TouchDesigner produces a .toe file. These Environment files are the default file type for creating projects.

For VDMX6 Plus we will need to create .tox files. TouchDesigner Component files let you save out components. .tox files enable the re-use and portability of component libraries, which is a great way to think about how they are used inside of VDMX.

Export .tox files by right-clicking on a component and selecting the “Save Component .tox…” option from the contextual menu.

If your TouchDesigner composition conforms to the "Image Filter" protocol, it can be used as an image filter in VDMX- just place it in the "TouchDesignerFX" folder in your VDMX Assets folder (choose "Open Assets Folder in Finder" from VDMX's "Help" menu). It will immediately be added as an available effect in VDMX, and can be previewed in the Workspace Inspector's "Assets" tab or added to layers.

Additional tips and notes

  • Using TouchDesigner compositions in VDMX6 Plus requires a TouchDesigner install with a valid TouchDesigner license on the same computer (Education, Commercial, or Pro). Non-commercial will not work.

  • Each time you use a TouchDesigner file in VDMX6 Plus, it launches a new instance of the TouchEngine. Keep this in mind when opening up multiple TD files at once as it can pull a lot of memory.

  • See the VDMX documentation on TouchDesigner for more information on ways to use TD compositions in VDMX6 Plus!