software:touch_designer

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
software:touch_designer [2024/07/16 09:58] – [Rendering] mhsoftware:touch_designer [2026/05/26 10:10] (current) – [Resources & Onboarding] mh
Line 1: Line 1:
-====== Touch Designer ======+====== TouchDesigner ======
  
-  * [[https://derivative.ca/|Official Website]]+//Personal knowledge base for rapid re‑entry into TouchDesigner after long breaks.//
  
-  * [[https://www.youtube.com/playlist?list=PLSqkC3f_BStyl5j6NqYwLOErW0ych_4k1|Interactive and Immersive HQ Tutorial channel]]+===== Resources & Onboarding =====
  
-===== Knowledge =====+TouchDesigner uses node‑based workflows where data flows through operators (OPs) that cook when needed.
  
-==== Mouse movement ====+  * **[[https://derivative.ca/|Official Website]]**
  
-  * ''Left Click'' + ''drag'': Move an operator. If done on empty space: pan view +  * **[[https://www.youtube.com/playlist?list=PLSqkC3f_BStyl5j6NqYwLOErW0ych_4k1|Interactive and Immersive HQ Tutorial channel]]**
-  * ''Mouse Wheel'': zoom in/out +
-  * ''Right Click'' + ''drag'': Selection box+
  
-==== Nodes ====+  * **[[https://www.youtube.com/playlist?list=PLFrhecWXVn5862cxJgysq9PYSjLdfNiHz|Beginner's course by Elekktronaut]]** //Resume @ episode 12/22//
  
-The Graph Editor portion of Touch Designer is called the **Network Editor**, and a bunch of interconnected operators doing some kind of function is called a network.+  * **[[https://www.alltd.org/|All TouchDesigner Tutorials]]**
  
-The nodes are called **Operators**.+===== Interface Essentials =====
  
-The Network Editor has a path bar at the top of the interface and projects in Touch Designer are similar to a Unix file hierarchy.+==== Global UI ====
  
-Double-clicking on a grey operator will open this component and display the nodes that build it up. (e.g. geo1 in default file)+  * **''O|I'' toggle:** Enables/disables cooking globally (useful for heavy networks). 
 +  * **Perform Mode:** Toggle with **''F1''**. Used to run the system fullscreen. **''ESC''** returns to editing mode. 
 +  * **Palette:** Contains ready‑made components; double‑click or zoom in to inspect internal networks. 
 +  * **Operator Snippets:** Help → Operator Snippets shows practical examples for most OPs. 
 +  * **''■''** button : Open viewer (floating window) while keeping Network Editor open
  
-Even though the operators have 3D Previews, behind the scenes it is just data being visualized differently.+==== Viewer Interaction ====
  
-Viewers can be toggled **Active** with the button on the bottom right. This locks their position and enables to move the content around in the preview panel to highlight details of its processing. This does not affect its output.+//Buttons in the bottom right of OPs//
  
-''MIDDLE CLICK'' on an operator opens the info dialog for that operator.+  * **''♦''**: Toggle **Active** //(Allows panning/zooming inside the viewer without affecting the OP’s output)// 
 +  * **''●''**: Toggle **Display** in background
  
-For each Operator hitting the ''?'' button in the parameter window will open up the wiki page for that operator. 
  
-From the top menu Help > Operator Snippets opens up a floating window with many examples and notes on each operator and how to use them.+==== Panes & Layout ====
  
-----+  * Panes can be split using **''ALT'' + ''[''** (vertical) or **''ALT'' + '']''** (horizontal). 
 +  * The **''▼''** button on each pane opens more panes; the **''↓''** menu switches pane types (Network Editor, Geometry View, etc.). 
 +  * **''ALT'' + ''Z''**: Close pane under mouse.
  
-=== Operator Types ===+==== Mouse Controls ==== 
 +  * **''Left Click'' + ''drag''**: Move operator or pan when clicking empty space. 
 +  * **''Right Click'' + ''drag''**: Selection box. 
 +  * **''Mouse Wheel''**: Zoom.
  
-  * **TOP:** **T**EXTURE **OP**ERATOR - Purple - Works exclusively with 2D rasterized graphics +==== Keyboard Shortcuts ====
-  * **CHOP:** **CH**ANNEL **OP**ERATOR - Green - Signal, communication, numeric & control data +
-  * **DAT:** **DAT**A OPERATOR - Pink - String level of data, web, tables, etc. More complex data than numeric +
-  * **SOP:** **S**URFACE **OP**ERATOR - Blue - Procedural 3D Geometry +
-  * **COMP:** **COMP**ONENT OPERATOR - Grey - Multi function components (3D rendering - Panels - etc.) +
-  * **MAT:** **MAT**ERIAL OPERATOR - Yellow - +
  
-The darker colors in all families are generators.+//(Shortcuts only work with the cursor in the Network Editor, and are case sensitive - careful with **''CAPS LOCK''**).//
  
-----+  * **''TAB''**: Open Operator Create Menu (type in name to highlight) 
 +  * **''I''**: Dive inside a network. (also mouse wheel on it but clunky) 
 +  * **''U''**: Move up a level. 
 +  * **''H''**: Frame/home network. 
 +  * **''P''**: Toggle Parameters window.
  
-=== Keyboard Shortcuts ===+===== Operators & Network Logic =====
  
-//Keyboard shortcuts only works while the cursor is in the Network Editor//+==== Operator Families ====
  
-//Keyboard shortcuts are case sensitive ! Careful with ''CAPS LOCK''.//+  * **TOP:** **T**EXTURE **OP**ERATOR - Purple - 2D raster graphics 
 +  * **CHOP:** **CH**ANNEL **OP**ERATOR - Green - channels, numeric/time data,  signal, communication, 
 +  * **DAT:** **DAT**A OPERATOR - Pink - tables, strings, scripting 
 +  * **SOP:** **S**URFACE **OP**ERATOR - Blue - Procedural 3D geometry 
 +  * **COMP:** **COMP**ONENT OPERATOR - Grey - components, UI, 3D rendering 
 +  * **MAT:** **MAT**ERIAL OPERATOR - Yellow - materials, shaders
  
-  * ''TAB'': Open Operator Create Menu (type in name to highlight) +Dark-colored OPs are generators.
-  * ''I'': Move into a network (also mouse wheel on it but clunky) +
-  * ''U'': Move out of a network (up one level) +
-  * ''H'': Home network on screen +
-  * ''P'': Open/Close **Parameters** window +
-  * ''ALT'' + ''Z'' : Close the panel under the mouse hover (Network Editor) +
-  * ''ALT'' + ''['' : Split vertically (Network Editor) +
-  * ''ALT'' + '']'' : Split horizontally (Network Editor)+
  
-----+==== Cooking, Push/Pull Logic, Performance ==== 
 +  * Data flows left → right. 
 +  * Cooking occurs when dependent OPs need updated data. 
 +  * Animated noodles = cooking 
 +  * Static noodles = cached. 
 +  * Heavy cooking sources: 
 +    * Full-res TOP chains   
 +    * CHOPs with large sample counts   
 +    * SOP deformers  
  
-=== Signal Flow ===+Use nulls, selects, Resolution TOP, and Cache Select to avoid unnecessary cooking.
  
-Data always flows from left to right.+==== Network Hierarchy & Navigation ====
  
-Connections between nodes can be still (no animation) or cooking (animation visible on the noodle).+  * Networks behave like Unix-style folders. 
 +  * Path bar shows current location. 
 +  * Double-click a COMP to see its internal network.
  
-Cooking refers to the operator updating it's input/outputs because the data flow is variable.+==== Flags, Viewers & Info ====
  
-----+  * Display flag = viewer preview. 
 +  * Render flag = included in rendering. 
 +  * **''Middle-click''** → info popup. 
 +  * “?” in parameter window → operator wiki page.
  
-=== Parameters ===+==== Parameters & Editing Tricks ==== 
 +  * Middle-click/hold a parameter to adjust increments. Slide Left / Right to increase/decrease 
 +    * Use on name of parameter to affect all values simultaneously.  
 +  * Drag CHOP channels into parameters: 
 +    * CHOP references   
 +    * Export bindings   
 +  * Drag CHOPs onto TOPs to convert.
  
-Every node has parameters that can be manually controlled, tied to UI, scripted, etc.+===== Signal Flow & Data Types =====
  
-Right click on a node gives the option to open a floating parameter window.+TouchDesigner mixes several structures: 
 +  * TOPs → images (resolution-dependent) 
 +  * CHOPs → channels (sample rate–based) 
 +  * SOPs → points/geometry 
 +  * DATs → strings/tables
  
-When editing a parameter (e.g. speed on a moviefilein) ''MIDDLE MOUSE'' click and hold on the **value** will open a hover menu where the increment can be changed. While holding, when selecting an increment, sliding left and right will decrement/increment the value by the given increment. (Also works with a ''LEFT CLICK'' and hold but the hold is a little longer).+Important relationships: 
 +  * Instancing: SOP point count = CHOP sample count. 
 +  * CHOPs depend on FPS; TOPs depend on resolution.
  
-When a parameter has two values that you would like to increase/decrease equally this technique can be applied on the name of the parameter.+=== CHOP Basics ===
  
 +{{:software:chop-basics.png?direct&400|}}
  
-===== Rendering =====+  * Use **select** to extract specific channels 
 +  * Use **math** to change range 
 +  * Chops can be **Time Slice** (1 value / frame) or **Range Sets** (multiple values / frame → Graph view) 
 +===== Rendering Workflow =====
  
-Rendering is done in a **Render** TOP. +==== SOP → COMP → TOP Pipeline ==== 
- +  * SOPs exist on CPU → piped into Geometry COMP. 
-Basic setup involves the 3D COMPS **Cameras, Geometry and Light** to bring the SOP chain operating on the CPU to the Rendering pipeline operating on the GPU and rasterize the content.+  * Camera and Light COMPs define render scene. 
 +  * Render TOP outputs a 2D texture.
  
 Add **In** SOPS in the **Geometry** op to send a chain of SOPS into it.  Add **In** SOPS in the **Geometry** op to send a chain of SOPS into it. 
 +==== Render TOP Fundamentals ====
 +  * Inputs:
 +    * Camera  
 +    * Geometry COMPs  
 +    * Lights  
 +  * End with a null TOP for stability.
 +
 +==== Cameras, Lights, Environment ====
 +  * Keep one object per Geometry COMP when possible.
 +  * Cameras operate like standard 3D transforms.
 +  * Light types: Point, Spot, Directional.
 +
 +==== Common Rendering Patterns ====
 +  * SOP chain → Null SOP → Geometry COMP  
 +  * Geometry → Render TOP → Composite/FX  
 +  * Use Select TOPs to inspect interim results.
 +
 +
  
 The display and render flags tell the rest of the network whether the node should be used in the rendering process and displayed in the viewer. The display and render flags tell the rest of the network whether the node should be used in the rendering process and displayed in the viewer.
Line 99: Line 151:
  
 You can put multiple things in a geometry comp with the display flag ON but it's best practice to keep just one item per geometry to have a cleaner network. You can put multiple things in a geometry comp with the display flag ON but it's best practice to keep just one item per geometry to have a cleaner network.
 +===== Output Pipeline =====
  
-==== Textures ====+==== Window COMP ==== 
 +  * Main operator for projection/output. 
 +  * Settings: 
 +    * Monitor   
 +    * Opening Size   
 +    * Borders  
  
-Texturing is done with **MAT** operators and by sending things into the Color map property.+==== Perform Mode ==== 
 +  * Enter using **''F1''**. 
 +  * Layouts may scale differently; test UI carefully.
  
-===== Useful tips =====+===== Tips, Tricks & Best Practices =====
  
-When creating a network of nodes, add null operators at strategic checkpoints. This way you can reference these null "checkpoints" everywhere else in your project and if anything has to change prior to the checkpoint the reference is still valid.+==== Null Strategy ==== 
 +  * Use nulls at key checkpoints. 
 +  * Reference nulls elsewhere to avoid breaking chains.
  
-TOPs have a display flag at the bottom right which can be turned on to toggle a preview in the background of the network editor.+==== Select Strategy ==== 
 +  * Extract channels with Select CHOPs. 
 +  * Organizes complex CHOP data streams.
  
-Use **Select** CHOPs to extract different channels from your other CHOPS to use them in the network. 
- 
----- 
  
 === Referencing a parameter - Dynamic links === === Referencing a parameter - Dynamic links ===
Line 119: Line 180:
   * Select the TOP to link to parameter   * Select the TOP to link to parameter
   * Drag & drop from the CHOP into the parameter   * Drag & drop from the CHOP into the parameter
-  * Select Reference type (Most of the time it's CHOP Reference+  * Select Reference type (Most of the time it's CHOP Reference)
  
 You can also drag an entire CHOP into a CHOP to TOP operator to reference it. You can also drag an entire CHOP into a CHOP to TOP operator to reference it.
 +
 +Alternatively, you can right click in the parameter window for the CHOP → Copy Parameter and then in the destination parameter right click → Paste Reference
  
 ----  ---- 
 +==== Resolution TOP ====
 +  * Drop resolution early to speed up heavy FX.
 +  * Increase resolution at end of chain.
 +
 +==== Useful Python Expressions ====
 +  * ''absTime.frame'' → integer frame counter. Combine with math expression (e.g. ''* 0.5'') to control speed.
 +  * ''absTime.seconds'' → time in seconds.
 +  * ''me.digits'' → returns numeric suffix of OP name. Combine with math expression (e.g. ''* -5'') to increment or decrement a parameter as you copy/paste (useful for **Cache Select** building a trail effect for example).
 +  * ''me.parent().width'' or ''.height'' → resolution width/height of the parent comp
 +
 +
 +==== Cache & Cache Select ====
 +  * Cache TOP stores multiple frames (heavy on VRAM).
 +  * Cache Select references those frames without extra memory.
 +  * Pair Cache + Reorder TOP for temporal RGB shifting.
 +
 +==== Instancing Workflow ====
 +  * Match SOP points to CHOP samples.
 +  * Enable instancing in Geometry COMP → Instance tab.
 +  * Position, scale, rotation via CHOP channels.
 +
 +==== Optical Flow ====
 +  * Outputs motion vectors (R = X velocity, G = Y velocity).
 +  * Useful for simulations, particles, reactive systems.
 +
 +This converts video streams into usable data for interactivity.
 +===== Common Techniques =====
 +
 +==== Animating Noise ====
 +  * Create a Noise TOP
 +  * Animate transform Z with absTime.seconds*[SPEED]
 +
 +==== Feedback Loops ====
 +  * Feedback TOP + Transform + Composite.
 +  * Use Resolution TOP to prevent GPU overload.
 +
 +==== Trails ====
 +  * CHOP Trail for numeric history.
 +  * TOP composite trails for visual streaks.
 +
 +==== Multi-Layer Composite Setups ====
 +  * Composite TOP blends layers using Over, Add, Screen, etc.
 +
 +==== CHOP-Driven Animation ====
 +  * LFO, Noise, Trigger CHOPs for dynamic control.
 +  * Export or reference in parameters.
 +
 +==== TOP FX Chains ====
 +  * Common structure:
 +    Source → Level → Blur → Edge → Composite → Null  
 +  * Keep heavy FX at low resolution.
 +
 +==== Resize nodes ====
 +
 +When the resolution of a node is changed, clicking the arrow to resize the node will resize it down to the new ratio.
 +===== Creative Notes =====
 +  * Repetition of simple forms builds complex visuals.
 +  * Overlapping translucent layers enrich motion and depth.
 +  * Vary timing, resolution, and color to create dynamic energy.
 +
 +===== OLD VERSION =====
 +
 +
 +
 +
 +
 +
 +
 +This section contains redundant data. Will be cleaned soon.
 +
 +===== Useful Tools =====
 +
 +
 +==== Output ====
 +
 +Output is done by using the **Window** COMP.
 +
 +You can open as a separate window or in perform mode.
 +
 +Tweak the //Monitor//, //Opening Size// and Toggle the //Borders// parameters.
 +
 +==== Textures ====
 +
 +Texturing is done with **MAT** operators and by sending things into the Color map property.
 +
 +===== Useful tips =====
 +
  
 COMP Buttons and sliders can be connected to Null operators to toggle them into run mode and handily display their output. COMP Buttons and sliders can be connected to Null operators to toggle them into run mode and handily display their output.
 +
 +----
 +
 +=== Using Resolution TOP ===
 +
 +It's good practice to work in lower resolutions until you need to up the resolution with a **Resolution** TOP.
 +
 +When using source loops into TOP Fx chains it's handy to pass them through a Resolution TOP and lower them down to half res to improve performance.
 +
 +----
 +
 +=== Using the Cache TOP ===
 +
 +Be wary of the frame count when using the **Cache** TOP as it is essentially what uses the most GPU memory.
 +
 +It's best to use a **Cache Select** TOP rather than using the Output Index of the **Cache** TOP. They will have very small cook times and be totally free in terms of GPU memory as they will reference the images that are already in memory through the **Cache** TOP.
 +
 +Use the **Reorder** top in conjunction with **Cache** and **Cache select** to create some nice RGB trailing effects
 +
 +----
 +
 +=== Working with instancing ===
 +
 +When working with instancing take care that the length match. For example if your SOP null has 40 points, then the CHOP you use on it should have 40 samples.
 +
 +Instancing is done in the **Geometry** Comp under the tab of the same name. Reference another SOP in there and play around with the points.
 +
 +
  • software/touch_designer.1721116708.txt.gz
  • Last modified: 2025/06/02 21:17
  • (external edit)