Tutorial: Erste Schritte in TouchDesigner

Mickey van Olst experimentiert schon seit seiner Ausbildung zum Interactive Designer und dem Studium in Digital Media Design in den 2000er Jahren mit verschiedenen Technologien. Mit star­kem Fokus auf Konzeption – gepaart mit einem dy­na­mi­schen Ver­ständnis von Design und viel prakti­schem tech­ni­­schem Wissen – arbeitet der nieder­län­dische Me­dien­­künstler seit über fünfzehn Jahren an interaktiven Anwendungen, Installationen und computergenerierten Visuals.

Mit TouchDesigner kam van Olst im Februar 2018 während des zweiten TouchDesigner Summits des kanadischen Herstellers Derivative in Berlin in Berührung: »Damals habe ich vor allem objektorientierten Code geschrieben, meist C++, und ihn dann kompiliert und getestet, aber irgendwann bemerkte ich, dass dieser Workflow viel zu lange dauert.« Bei den objektorientierten Programmiersprachen wie C++ oder Java schreibt man Code für den Hauptprozessor (CPU). TouchDesigner hingegen läuft direkt auf dem Grafikprozessor (GPU) und nimmt Grafikberechnungen dort vor, wo sie wirklich stattfinden. Dank der enormen Verbesserung der Hardware – insbesondere der Grafikkarten – ist das heute ohne Probleme möglich. »Man könn­te sagen, dass die Anwendung auf jedem einzelnen Pixel gleichzeitig arbeitet. Das ist eine ganz andere Logik und keine ganz einfache Sache, wenn man gerade erst anfängt zu programmieren«, so Mickey van Olst.

Das erste TouchDesigner-Projekt

Van Olst, der nach seiner Ausbildung in den Niederlanden nach Berlin zog, stieß damals zunächst auf ­vvvv, weil die Software in der Hauptstadt entwickelt wird und er bereits viele Leute kannte, die damit arbeiteten. »Allerdings ist das Interface von vvvv sehr minimalistisch aufgebaut, und man bekommt über­haupt kein visuelles Feedback. Das war nicht wirklich etwas für mich.«

Als Mickey van Olst dann auf dem TouchDesig­ner Summit 2018 sah, wie viele Menschen in Europa inzwischen Interesse an der Arbeit mit der Software hat­ten, weckte das sein Vertrauen: »Mir wurde klar, dass TouchDesigner jetzt groß genug war, um es ernst zu nehmen und auch im Tagesgeschäft aus­zu­pro­bie­­ren.« Er schaute sich TouchDesigner-Tuto­rials auf You­Tube an, studierte die Anleitungen des Medienkünstlers Matthew Ragan und tauschte sich mit der Community aus. »Man sollte sich seinen Mentor genau aussuchen – eine Person, deren Erklärungen man leicht versteht, denn man kann TouchDesigner auf sehr unter­schied­­liche Weise erklären, und Matthew Ragan hat einen ähn­lichen Fokus wie ich.«

Neues lernt man bekanntlich am besten an ei­nem echten Projekt. Van Olst hatte Glück, dass ihn Mio Loclair von Studio Waltz Binaire aus Berlin 2019 fragte, ob er die Echtzeit-Visuals für eine Kinect-Installation programmie­ren könnte. »Mio sagte, es sei nicht so gut bezahlt, aber auch nicht stressig, weil ich mir Zeit lassen könnte, und es war die Gelegenheit, um TouchDesigner in der Praxis zu lernen, also nahm ich den Auftrag an.« Die finale Anwendung war dementsprechend noch nicht sehr komplex – eine Art interaktiver Fotoautomat, der lustige Visuals auf Gesichter oder Hände legt, und ein paar andere Spielereien, aber der Anfang war gemacht.

Wie ein Technologie-Schwamm

»In diesem Kinect-Projekt bemerkte ich sofort den großen Vorteil von TouchDesigner, denn die Schnitt­stellen für Kinect sind bereits integriert. Es ist wie ein Schwamm, der andere Technologien aufsaugt und ständig neue Funktionen hinzufügt, beispielsweise eine Physik-Engine von Nvidia Flex oder eine bestimmte Renderingtechnologie – und dann verpackt Derivative das in diese kleinen Operatoren.« So lassen sich unterschiedlichste Dateiformate importieren, um sie miteinander zu kombinieren, aber auch exportieren, um sie in einer anderen Software weiterzuverarbeiten. Zum Beispiel kann man 3D-Modelle oder ganze Szenen in Blender modellieren und sie anschließend ohne Probleme in TouchDesigner-Projekte einbinden. »Diese unendlichen Möglichkeiten machen TouchDesigner zu einem mächtigen und vielseitigen Tool, zugleich gibt es keinerlei Struktur vor, und man muss wirklich aufpassen, dass man den Überblick behält«, so van Olst.

Weil TouchDesigner fortwährend weiterentwickelt wird, sind nicht alle Funktionen immer gleich gut ausgereift, und es kann mitunter zu Problemen kommen. »Aber anders als bei Unity oder Unreal wer­den solche Bugs von Derivative sehr schnell gefixt«, sagt van Olst. Die großen Konkurrenten haben dafür andere Vorteile gegenüber TouchDesig­ner, und viele Kreative kombinieren deshalb die klassischen Game-Engines mit der Software.

Fragen Sie sich jetzt, ob die Einführung in TouchDesigner auf den nächsten Seiten für Sie lesenswert ist? Mickey von Olst sagt: »Ich treffe viele Leute, die denken, dass sie die richtige Wahl bei ei­nem Tool treffen müssen und dass ihr Leben von dieser Wahl abhängt. Aber jede Wahl, die man trifft, ist die richtige Wahl!« Und je mehr Tools man ausprobiert, desto schneller versteht man ihre Funktionsweise und kann ein weiteres Tool lernen. Sein Rat: »Nehmen Sie sich einen Nachmittag Zeit und probieren Sie es aus, ohne sich Gedanken zu machen, ob es langfristig von Bedeutung ist.«

Coden für die Grafikkarte: Das ist TouchDesigner

TouchDesigner ist eine Node-basierte visuelle Entwicklungsumgebung, auf deren grafischer Oberfläche sich Echtzeit- und interaktive Systeme erstellen lassen, ohne Code schreiben zu müssen. Es basiert auf OpenGL und erlaubt die Verwendung der Program­mier­sprache GLSL für den Grafikprozessor. Diese Anwendungen sind meist sehr viel schneller als Anwendungen, die auf dem Hauptprozessor (CPU) laufen.

Dank immer performanterer Grafikeinhei­ten könnte man TouchDesigner inzwischen als das Schweizer Taschenmesser für 2D- und 3D-Techniken bezeichnen, denn zu den enthaltenen Features gehören Rendering und Compositing, Workflow und skalierbare Architektur, Video- und Audioein- und -ausgang, Multi-Display-Unterstützung, Video-Mapping, Animation und Steuer­kanäle, benutzerdefinierte Control Panels, Anwendungsentwicklung, 3D-Engine und Werkzeuge, Interoperabilität von Geräten und Software sowie Skripterstellung und Programmierung in Python. Die Entwicklungsumgebung ist also sehr flexibel und eignet sich sowohl für Program­mie­rer:innen als auch für bildende Künstler:innen und. Creative Technologists, um verschiedens­te Projekte zu prototypen und umzusetzen.

TouchDesigner: Projektordner downloaden

Eine Step-by-Step-Anleitung für die Arbeit in TouchDesigner würde den Rahmen dieses Artikels sprengen – aber Sie können die Entwicklungsumgebung spielerisch erkunden. Mickey van Olsts TouchDesigner-Einführung umfasst eine sehr simple Anwendung, ein fortgeschritteneres Beispiel und ein Bonusprojekt zum Verfeinern der erworbenen Kenntnisse. Die enthaltenen Codebausteine sind ausführlich kommentiert. Einfach hier downloaden: https://is.gd/PAGE_TouchDesigner

Technische Anforderungen für TouchDesigner

TouchDesigner l äuft am besten unter Windows 8.1 oder 10 und mit den Grafikkarten Nvidia Geforce, Nvidia Quadro, AMD Radeon oder AMD FirePro. Intel-GPUs werden unterstützt, haben aber aufgrund der Grafikanforderungen von TouchDesigner bestimmte Einschränkungen – ebenso wie die Softwareversion für macOS. Für grundlegende Aufgaben (und für Mickey van Olsts Touch-Designer-Einführung) genügen diese jedoch vollkommen. Die nicht kommerzielle Version gibt’s unter https://derivative.ca/download. Mehr zu den Anforderungen unter https://docs.derivative.ca/System_Requirements.

So funktioniert TouchDesigner

Die Entwicklungssoftware bietet so viele Möglich­keiten, dass man sich am Anfang leicht über­fordert fühlt. Am besten downloaden und installieren Sie die nicht kommerzielle Version von https://derivative.ca/download sowie unser Beispielmaterial von https://is.gd/PAGE_TouchDesigner und machen sich mit ein paar wichtigen Grundlagen vertraut:

Navigation: So bewegen Sie sich im Editor

TouchDesigner ist für die Arbeit mit der Maus konzipiert, idealerweise mit einem Scrollrad und einer mittleren Klickoption, die sich zumeist unter dem Scrollrad verbirgt. Wenn Sie unsere Beispiel­datei öffnen, sehen Sie auf dem gerasterten Hintergrund verschiedene Kästen (siehe großes Bild unten) mit Erklärungen und den Ergebnissen unserer Übung.

Versuchen Sie zunächst, mit der gedrückten linken Maustaste den Hintergrund beziehungsweise die Arbeitsfläche zu verschieben. Durch Ziehen mit gedrückter rechter Maustaste können Sie meh­rere Kästen gleichzeitig auswählen.

Diese Kästen heißen Operatoren (OPs) und dienen als Grundlage für das Erstellen von Funktio­nen. Wenn Sie sämtliche OPs in die Ansicht bringen wol­len, können Sie »H« drücken (Abb.1) . Ich habe in der Beispieldatei auch eine kleine Spickzettelübersicht mit gängigen Maus- und Tastaturfunktionen hinter­legt. Von den Operatoren gibt es viele verschiede­ne Typen – wir kommen gleich dazu, was ge­nau sie bewirken. Die grauen Kästen dienen als Con­tainer. Sie können sie öffnen, indem Sie sie doppelklicken oder auswählen – dann erscheint ein grüner Rahmen – und die Entertaste drücken. Mit dem Maus­rad kann man außerdem in die Hierarchie des Projekts hinein- und herausscrollen. Diese räumli­che Navigation ist zwar faszinierend, aber anstrengend fürs Auge. Praktisch: Um wieder in die Übersicht zu gelangen, drücken Sie das »U« auf Ihrer Tastatur.

Ganz oben  sehen Sie eine Leiste für die Projekthierarchie. Sie zeigt, an welcher Stelle des Projekts Sie sich gerade befinden. Beim Klick auf das kleine, auf dem Kopf stehende Dreieck ganz links im Interface öffnet sich ein Fenster für die verschiedenen Ansichten. Per Default arbeiten wir im Network-Editor – das ist auch für unser Beispiel die übersichtlichste Darstellung.

Patchen: Kabel wie bei modularen Synthesizern

Die Operatoren sind die Kernelemente, aus denen Ihr Projekt aufgebaut ist. Es gibt sie in sechs Kate­go­rien mit jeweils einer eigenen Farbe. In den meis­ten Anwendungsfällen enthalten Operatoren an bei­den Sei­ten Ein- und Ausgänge, über die wir mit gedrückter linker Maustaste Verbindungen mit anderen OPs herstellen, ähnlich wie Sie es vielleicht von anderen Node-basierten oder sogar physischen Systemen wie modularen Synthesizern kennen. Daher stammt die Bezeichnung »Patching«.

Wenn Sie Daten von einer Kategorie in eine andere bringen oder einen Parameter mit einem an­deren verbinden, dann zeigt ein grauer gepunkteter Pfeil an, dass eine Verbindung besteht. Sie können die OPs auch verwenden, um eigene Schnittstellen zu bauen und sie miteinander zu verschachteln. Die ersten Operatoren, die Sie beim Öffnen unserer Beispieldatei sehen, heißen Container-COMPs und enthalten verschiedene Operatoren:

COMP (Komponenten): Komponenten sind so etwas wie ein Sammelbegriff für alles, was nicht in die nachfolgenden Kategorien passt. Typisch sind die Komponenten Base, Container und Geometry. Diese können wiederum andere OPs enthalten, die Sie zum Rendern von 3D benötigen.

TOP (Textur-Operator): Textur-Operatoren behandeln alles, was auf Pixelebene passiert. Mit ihnen können Sie Textu­ren manipulieren und generieren, aber auch Bilder oder Filme laden, Texturen zusammensetzen und vieles mehr.

CHOP (Kanal-Operator): Channel-OPs sind der normalen objektorientierten Programmierung sehr nahe. Sie können mit Zahlen und Arrays arbeiten, Mathematik betreiben, Logik implementieren und Daten sortieren. Sie arbeiten mit Ka­nälen und Samples. Ein Kanal ist ein Datenstrom mit einem eindeu­tigen Namen. Samples sind ein oder mehrere Daten­punkte, die sich in einem Kanal befinden.

SOP (Oberflächen-Operator): Surface-OPs arbeiten in 3D und mit 3D-Punkten sowie mit Kanten und Scheitelpunkten. Sie sind nützlich für alles, was mit Vektoren zu tun hat. Meist werden sie am Ende mit einem Geometry-COMP und einem Render-TOP in eine Textur gerendert.

DAT (Daten-Operator): Daten-OPs funktionieren ähnlich wie Tabellenkalkulationen. Man kann mit ihnen Daten manipulieren, sie lassen sich aber auch für Python-Skripte und die OpenGL Sha­ding Language (GLSL) oder als einfache Textcontainer nutzen.

MAT (Materialien): Materialien verwendet man als Teil der 3D-Rendering-Pipeline für geometrische Objekte. Es gibt verschiedene Standardmaterialtypen sowie komplexere Materialien, die das Importieren von nutzerdefinierten Scheitelpunkt- und Pixel-Shadern unterstützen. Der am häufigsten verwendete MAT ist der Phong. Er bietet sehr viele Beleuchtungsoptionen, mit denen sich – wie in unserer Beispieldatei – einzigartige Effekte erzeugen lassen.

Parameterfenster: In der oberen rechten Ecke sehen Sie ein Menü mit Einstellungen, das sogenannte Parameterfenster: Es zeigt die Variablen des aktuell gewählten Operators. Das Fragezeichensymbol auf der linken Seite bringt Sie zur Dokumenta­tionsseite des jeweiligen Operators. Über das zweite Fragezeichensymbol gelangen Sie zur Python-spezifischen Dokumentation. Mit dem kreisförmigen Symbol ganz rechts können Sie zwischen allen Einstellungen und nur denjenigen, die Sie angepasst haben, hin- und herschalten.

TouchDesigner: So geht’s im Download-Projekt weiter

In den Kommentaren unserer Beispieldatei erhalten Sie viele weitere Informationen und einen tie­feren Einblick in das Verhalten der verschiedenen Operatoren. Außerdem lernen Sie, wie man eine dreidi­men­sionale geometrische Form in Partikel zerlegt und das Ganze anschließend animiert.
Schauen Sie auf jeden Fall auch einmal in dem offiziellen TouchDesigner-You­Tube-Kanal und bei der Touch­Designer-Commu­nity vorbei. Diese ist um ei­niges kleiner als etwa die von Unity oder Processing, sodass Sie bei Fragen im TouchDe­signer-Discord-Channel oder im Forum auf der Derivative-Web­site sehr schnell Antwort von freundlichen und kompetenten Mitgliedern erhalten.

Unter https://derivative.ca/community finden Sie zudem eine sehr umfangreiche TouchDesigner-Dokumentation: Wäh­len Sie einfach einen beliebigen Operator aus und klicken Sie auf das Hilfesymbol. Wenn Sie dann noch mit der rechten Maustaste klicken, erscheint meist ein Operator-Snippet mit ei­nem funktionierenden Beispiel-Patch, der mit diesem spe­ziellen OP arbeitet. Ich wünsche viel Spaß beim Patchen! Mickey van Olst

Mickey van Olst ist freischaffender Medienkünstler, der mit Studios wie onformative, waltz binaire und schnelle bunte bilder zusammen­arbeitet. Neben seinen Jobs für namhafte Brands wie Humboldt Forum, Siemens, Porsche/BMW oder Google lehrt er an der Creative Business School Hyper Island in Schweden unter anderem Node-basierte Programmiersprachen. Wissen und Inspiration sammelt van Olst nicht zuletzt an seiner Arbeitsstätte im Berliner The Node Institute.
mickeyvanolst.com
thenodeinstitute.org
www.hyperisland.com