Experimenting with 3D Line Creation in TouchDesigner

Category: Experimentation, TouchDesigner

1. Introduction

As part of my exploration into interactive installations, I experimented with creating a 3D line effect in TouchDesigner. This experiment allowed me to dive deeper into the possibilities of combining real-time tracking (e.g., mouse movement) with 3D rendering and feedback loops. Inspired by a YouTube tutorial, I used this as an opportunity to understand how 3D visuals can react dynamically to input data.

2. What This Experiment Does

The goal of this experiment was to create a real-time 3D line that responds to mouse movement. By leveraging TouchDesigner’s node-based environment, I connected multiple elements such as:

  • Mouse Input to control the line’s position dynamically.
  • Feedback Loops to generate a trailing effect, giving the illusion of a continuous line.
  • 3D Geometry and Camera Controls to render the line in a 3D space with adjustable perspective.
  • Post-Processing Effects like scaling, blending, and compositing to refine the final output.

3. How It Works: Key Steps

Rather than explaining each node in detail, here’s a high-level summary of how the 3D line generation works:

  1. Mouse Input for Dynamic Positioning:

    • The Mouse In node captures the mouse’s x and y position, which is processed through Math and Merge nodes to convert the data into 3D coordinates.

  2. Creating the Line:

    • A Geo (geometry) node generates a 3D line by connecting points tracked by the mouse movement.
    • The Wireframe node ensures the line is rendered in a skeletal style, enhancing its appearance as a “trail.”

  3. Adding a Feedback Loop:

    • The Feedback node creates a persistent trail effect by continually re-rendering previous frames.
    • Scaling and attenuation are applied within the loop to control the length and decay of the trail.

  4. Rendering the Scene:

    • A Camera node defines the viewer’s perspective, while a Light node provides illumination for the scene.
    • The Render node combines all elements into the final 3D visual.

  5. Compositing and Output:

    • The rendered output is processed through additional compositing nodes (e.g., blending, scaling) before being displayed on the screen.

4. Observations & Takeaways

What Worked Well:

  • Real-time Responsiveness: The line reacts seamlessly to mouse movements, demonstrating the power of TouchDesigner for interactive visuals.
  • Feedback Loop: This adds a visually engaging effect, transforming simple line drawing into something dynamic and immersive.
  • 3D Integration: Working with the Geo, Camera, and Light nodes gave me insight into TouchDesigner’s 3D rendering capabilities.

Challenges:

  • Complexity of the Node Network: Managing a large node structure can get overwhelming, especially when tweaking parameters.
  • Precision: Aligning scaling and feedback parameters took some trial and error to achieve the desired trailing effect.

5. What’s Next?

While this experiment provided valuable insights, there are opportunities to enhance the concept further:

  • Integrating Body Tracking: Replace mouse input with body-tracking data for a more immersive interaction.
  • Adding Color Dynamics: Use noise or procedural inputs to dynamically change the line’s color based on movement or time.
  • Experimenting with Line Width: Introduce varying thickness to the line to add depth and emphasize specific movements.

6. Resources

7. Node Network & Result

Below is the node structure used for this experiment:

Node Structure

Here’s a preview of the final result. Going through a couple different parameter changes which influence the feedback, the line thickness and change the effect of the line into a more “watercolor” look.

Download the project file

MaskRevealBasic-Difference.toe