TouchDesigner Tutorial: Basic Render Setup

This tutorial covers the essential elements for setting up a basic render network in TouchDesigner. Real-time rendering is a core part of TouchDesigner workflows, and understanding these foundational concepts is crucial for creating visual projects.

Core Components of a Render Network

Render networks in TouchDesigner are made up of operators across multiple families. The essential components are:

1. Camera Component

The camera defines the viewpoint from which your scene is rendered. You can adjust its position and rotation to frame your geometry.

2. Geometry Component

Geometry components contain the 3D objects that will be rendered. These can be linked to Surface Operators (SOPs) like boxes, spheres, or custom shapes.

3. Light Component

Lights illuminate your scene. You can have multiple lights with different positions and colors to create various lighting effects.

4. Render TOP

The Render TOP is where everything comes together. It takes references to your camera, geometry, and lights to produce the final rendered image.

Setting Up the Network

Step 1: Add Components

• Open the OP Create dialog
• From the Component family, add a Camera, Geometry, and Light (hold Ctrl to add multiple)
• From the TOP family, add a Render TOP

Step 2: Configure the Render TOP The Render TOP uses path-based references to find your components:

• Camera path: specifies which camera to use
• Geometry path: uses asterisk (*) by default to include all geometry in the network
• Lights path: specifies which lights to use

Step 3: Add Geometry

• From the SOP family, add a Box SOP (or other geometry)
• Right-click on the SOP output and select Components > Geometry to create a linked geometry component

Using the Geometry Viewer

To better understand your scene layout:

1. Go to the pane layout section of the interface
2. Split your view into two panes
3. Change one pane to “Geometry Viewer” using the dropdown

The Geometry Viewer shows all geometry in your network, including cameras and lights, allowing you to see how objects are positioned relative to each other.

Understanding Render and Display Flags

Each geometry component has two important flags at the bottom:

Render Flag

• Controls whether the geometry appears in the Render TOP output
• Turn off to hide geometry from the final render
• Essential for controlling what gets rendered

Display Flag

• Controls whether the geometry appears in the Geometry Viewer
• Useful for decluttering your view while working
• Does not affect the final render output

Important: These flags exist both on Geometry Components and on the SOPs inside them. Both levels affect visibility.

Working with Lights

You can add multiple lights to your scene:

1. Copy and paste existing lights or add new ones
2. Adjust position using translate parameters (X, Y, Z)
3. Change light color on the Light page to affect the scene’s mood

Example Setup:

• One light behind the camera (default position at -10)
• One light above the scene (position at Y=10)
• Different colors for each light to create depth

Camera Adjustments

To frame your scene properly:

• Translate: Move the camera position (e.g., move up 2 units in Y)
• Rotate: Use middle mouse button to pan the view
• Adjust until all desired geometry is visible in the render

Key Takeaways

1. Render networks require Camera, Geometry, Light components, and a Render TOP
2. The Render TOP uses path-based references (asterisk * means all geometry)
3. Use the Geometry Viewer to understand spatial relationships in your scene
4. Render and Display flags control visibility in output and viewer respectively
5. Multiple lights with different positions and colors create richer scenes
6. Both component-level and SOP-level flags affect final rendering