Psychedelic Graphics 0: Einführung

Psychedelic Graphics 0: Einführung

• Diese Serie zeigt, wie man psychedelische Visuals für Animationen und Spiele erstellt. Sie ist so aufgebaut, dass sie auch ohne Vorkenntnisse in Grafik oder Programmierung verständlich ist. Grundkenntnisse in Trigonometrie und Programmierung sind jedoch hilfreich.
• Ich hoffe, dass diese Serie dabei hilft, die Grundlagen der im Video verwendeten psychedelischen Grafiken zu verstehen. Die meisten Videos wurden mit Blender erstellt, aber die in dieser Serie vermittelten Techniken lassen sich leicht übertragen, und später wird Blender noch ausführlicher behandelt.

Was ist UV?

3D-Modelle

• Computergrafik wirkt oft dreidimensional, aber beim Schreiben von Grafikcode muss man häufig in 2D denken. Wenn man in einem 3D-Modellierungsprogramm eine schöne Form erstellt hat, hat man in Wirklichkeit Punkte (Vertices) im Raum erzeugt und einige davon verbunden, um feste Formen (Flächen) zu bilden.
• 3D-Modelle sind größtenteils hohl, und wir sehen nur ihre Oberfläche. Die Standardmethode, um 3D-Modelle einzufärben, ist UV-Mapping bzw. Texturierung. So wie eine 2D-Projektion der Erde leicht gedehnt oder gestaucht aussieht, wirkt es ähnlich, wenn die Farben eines 3D-Modells auf 2D projiziert werden.

Texture Painting

• Wenn man eine Textur bemalt, erscheint sie auf dem 3D-Modell. Die meisten Programme erlauben es, direkt auf das 3D-Modell zu malen, um die Bildtextur einzufärben.

UV-Koordinaten

• UV kann man sich als Position, also als 2D-Koordinaten, vorstellen. UV-Koordinaten werden im Raum von (0, 0) bis (1, 1) definiert. Eine UV-Map ist die Datenstruktur, die eine farbige Bildtextur mit den Flächen eines 3D-Modells verknüpft.

Wie Grafikcode funktioniert

Farben in der Computergrafik

• Farben in der Computergrafik werden oft als RGB dargestellt. Durch die Mischung von Rot, Grün und Blau lassen sich fast alle für den Menschen wahrnehmbaren Farben erzeugen. In der Computergrafik liegen die Werte für Rot, Grün und Blau normalerweise im Bereich von 0.0 bis 1.0.

Farben von UV

• UV-Koordinaten werden zur Visualisierung und Fehlersuche in Farben umgewandelt. Der erste Wert von UV (der X-Wert) wird als Rot verwendet, der zweite Wert (der Y-Wert) als Grün.

Gleitkommazahlen und die Vektoren vec2, vec3

• float ist eine einzelne Gleitkommazahl. vec steht für Vektor; vec2 besteht aus zwei Gleitkommazahlen, vec3 aus drei Gleitkommazahlen.

Struktur von Grafikprogrammen

• Grafiken müssen auf verteilte Weise berechnet werden. Der Code wird nicht einmal ausgeführt, um alle Farben zu erzeugen, sondern millionenfach für jeden kleinen Bereich des Bildschirms. Wenn man Programmiererfahrung hat, ist das eine sehr andere Denkweise.

• Jetzt ist alles bereit für Teil 1. Dort wird gezeigt, wie man trotz dieser Einschränkungen interessante Visuals erstellen kann.

[GN⁺]

Hacker-News-Kommentare

• David Tristram war Gründungsmitglied der Computergraphics-Performance-Gruppe Raster Masters in den 1990er Jahren und erstellte mit Silicon-Graphics-Workstations synthetische Bilder zur Live-Musik von Grateful Dead, Herbie Hancock, Graham Nash und anderen

  • Heute arbeitet er hauptsächlich mit Resolume Avenue und TouchDesigner in einer 2D-Videobearbeitungsumgebung
  • Hydra ist eine coole JavaScript-basierte Live-Coding-Umgebung, in der man mit psychedelischen Grafiken experimentieren kann, ohne auf Low-Level-Ebene arbeiten zu müssen

• Früher hat er untersucht, wie sich UV-Texturkoordinaten verzerren lassen, und verwendet heute Fragment-Shader wie in ShaderToy

  • Der Prozess, Texturkoordinaten entlang eines Strömungsfelds zu verschieben, ist interessant
  • Es gibt auch eine einfache Methode, eine "Rückstellkraft" anzuwenden, damit die Koordinaten an ihre ursprüngliche Position zurückkehren
  • Durch die Kombination von Feedback- und Verschiebungseffekten entstehen Bewegungen, die an Flüssigkeitsströmungen erinnern

• Es ist schön, dass sich Shader zum Verarbeiten von Bildern in HTML leicht schreiben lassen

  • Schon mit einer einfachen Näherung einer Tiefenkarte lassen sich interessante Ergebnisse erzielen
  • Früher gab es ein Projekt mit WebGL, um Crossfades zwischen Bildern weicher zu machen

• Es besteht großes Interesse daran, psychedelische Erfahrungen visuell nachzubilden

  • Im Rolling-Hills-Artikel wird erklärt, wie sich visuelle Halluzinationen nachbilden lassen
  • Es gibt Künstler, die mit moderner Technologie psychedelische Visuals sehr gut umsetzen

• Todd Rundgren entwickelte Anfang der 1990er Jahre eine Mac-App namens Flowfazer, die Nutzern helfen sollte, sich für kreatives Schaffen inspirieren zu lassen

• Die Auftritte von Tipper und Fractaled Visions waren eine der genauesten Darstellungen psychedelischer Visuals

  • Die Visuals von Fractaled Vision sind komplex und reichhaltig und lösen Staunen aus

• Beim Schreiben von WebGL-Shadern wird versucht, physische Kameraeffekte umzusetzen

  • Das hilft dabei, das Verständnis für Grafik, Mathematik, GPU, Speicher, CPU, Animation und Zeitverarbeitung zu vertiefen

• Jim Crutchfields Forschung zu Video-Feedback-Systemen bietet ein nützliches experimentelles System zur Untersuchung komplexer räumlicher und zeitlicher Dynamiken