Webcam & Video Input

Bringing real-world video into TouchDesigner opens a completely different creative territory. Instead of fully generated imagery, you’re working with captured light — a performer moving on stage, an audience in a gallery, a city street at night — and augmenting it with computed visuals in real time. This tutorial covers every step from getting a camera signal in to compositing generated layers over live video.

The Video Device In TOP

The Video Device In TOP is the primary entry point for any camera attached to your computer — USB webcams, capture cards, HDMI converters, and some IP cameras.

Open its parameter dialog and set:

• Device: A dropdown showing all recognised video input devices. Select your webcam by name.
• Resolution: Most webcams offer multiple resolution modes. 1280×720 at 30 fps is the standard starting point; 1920×1080 at 30 fps if your webcam supports it and your system can handle the bandwidth.
• Frame Rate: Match this to your camera’s actual capture rate. Most consumer webcams run at 30 fps. Mismatching causes stuttering.
• Input Format: Usually left at Auto. Set explicitly to YUV2 or MJPEG if you’re experiencing colour issues with a specific camera.
• Active: Must be On for the camera to capture. Toggle it Off to suspend capture without deleting the operator.

Once configured, the Video Device In TOP outputs a live RGBA texture matching the resolution you selected. This feeds directly into your TOP network.

Loading Video Files with Movie File In TOP

The Movie File In TOP plays back pre-recorded video files. Set the File parameter to any H.264 MP4, ProRes MOV, HAP, or NotchLC file. Supported codecs depend on your platform; HAP and NotchLC are highly recommended for installation work because they decode on the GPU, eliminating CPU decode overhead.

Key parameters:

• Play Mode: Real-Time tracks wall-clock time (the video plays at its native rate). Locked to Timeline makes the video advance with the TD timeline frame counter — useful for synchronisation.
• Loop: Set to On for endless playback.
• Speed: A multiplier. 1.0 is native speed. 0.5 is half speed. –1.0 reverses playback (only works for some codecs).
• Trim: Set a start and end point within the file to loop only a portion.
• Pre-Read: Enable to buffer frames ahead of time, eliminating dropped frames from slow drives. Essential for high-resolution video files.

Correcting Orientation: Flip TOP and Transform TOP

Many webcams — particularly laptops — deliver a horizontally mirrored image. Fix this with a Flip TOP set to Flip Horizontal. Some cameras also deliver the image rotated 90°; use a Transform TOP with Rotate set to 90 or –90.

The Transform TOP is also useful for repositioning the camera feed within a larger output canvas. If your output is 1920×1080 but your webcam is 1280×720, set the Transform TOP’s output resolution to 1920×1080 and adjust Scale and Translate to position the video where you want it within the frame.

Adjusting Brightness and Contrast: Level TOP

Connect your video source to a Level TOP. This is where you correct for underexposed cameras, handle exposure changes across different environments, and shape the tonal range before compositing.

• Input Black / Input White: Remap the brightness range of the input. Pull Input Black up to clip shadows; pull Input White down to brighten a dark image.
• Gamma: Values above 1.0 brighten midtones without blowing out highlights. Values below 1.0 darken them.
• Brightness / Contrast: Quick global adjustments.
• Opacity: Useful later when compositing — fade the video layer down while maintaining its colour information.

Compositing Video with Generated Imagery

The Composite TOP is the most flexible tool for layering. Connect the webcam feed as the first input and a generated TOP (Noise TOP, Render TOP, whatever) as the second. The Blend Mode parameter determines how the two layers combine:

• Over: The second input renders on top, respecting alpha.
• Add: Adds pixel values. Bright generated content bleeds into the video.
• Screen: Like Add but prevents overbright blowout — a soft, luminous composite.
• Multiply: The generated image darkens the video where it is dark, leaves it unchanged where white.
• Difference: Highlights pixels that differ between the two layers — good for motion detection effects.

For the most direct “augmented reality” look, use Add: generate bright, high-contrast patterns (white-on-black Edge TOP output, for example) and Add them onto the video feed. The patterns appear to glow over the live image.

An alternative structure uses the Over TOP with an alpha channel. Run your generated image through a Threshold TOP to make a binary mask, then use it as the alpha in an Over TOP to cut specific shapes out of your generated content and overlay them on the video.

Chroma Key and Luma Key Approaches

To remove a background colour (green screen or similar), TouchDesigner offers several approaches:

Luma Keying: Run the video through a Luma TOP with Key turned on. The Luma TOP removes pixels below a threshold brightness, creating transparency. Works well for any footage with a dark or light uniform background. Set the Luma Threshold and Edge Softness parameters.

HSV Keying: Run the video into an HSV Adjust TOP first to isolate the key colour, then threshold it. More involved but more accurate for green/blue screen work.

For professional chroma key work, the Chroma Key TOP (available in some builds) provides proper Despill, Edge, and Gain parameters.

Frame Delay TOP for Echo Effects

The Frame Delay TOP holds its input image for a specified number of frames before outputting it. Set Delay to 3 frames: the output shows the video as it was 3 frames ago. Add this delayed image back into the current frame using an Add TOP or Screen composite, and you get a motion trail — each moving object leaves a streak of echo images behind it.

For longer, richer trails, chain multiple Frame Delay TOPs, each adding its delayed frame back into the composite, or use a Feedback TOP to recursively blend the output back into itself over many frames.

Pixel Format Considerations

When compositing video over generated content, upgrade to 16-bit float pixel format on your compositing TOPs. Set Format to rgba16float in the Common page. This gives you overbright headroom: the Add composite can accumulate values above 1.0 without clipping, and you can control the final output level with a Level TOP at the end of the chain. The cost is doubled VRAM usage — worth it for quality composites.

Full Example: Webcam Edge Glow Composite

Build this in order:

1. Video Device In TOP → Flip TOP (Flip Horizontal if needed) → Level TOP (adjust for your camera exposure) → name this cam_corrected
2. From cam_corrected, branch two paths:
   • Path A: → HSV Adjust TOP (desaturate slightly, Saturation 0.6) — the background plate
   • Path B: → Edge TOP (Edge Threshold 0.15) → Blur TOP (Filter Size 3) → Level TOP (increase brightness to 2.0) — the glowing edge layer
3. Connect Path A and Path B to an Add TOP. The edges glow over the desaturated video.
4. Wire into a Level TOP to control final brightness, then a Null TOP named OUT.

The result is a live video feed where motion creates glowing outlines — a classic augmented reality aesthetic, built entirely from core TOPs with no shaders or external tools.