Psychedelic Graphics 0: Einführung

• Als Einstieg in die Erstellung psychedelischer Animation- und Game-Visuals beginnt der Artikel bei UV- und Farbberechnungen, sodass man auch ohne Vorwissen folgen kann
• Der Schlüssel zum Einfärben von 3D-Modellen ist das Verständnis von UV-Mapping/Texturing, bei dem 2D-Bildbereiche mit 3D-Flächen verknüpft werden
• UV-Koordinaten sind zwei Werte im Bereich 0,0 bis 1,0, die eine Position auf einer Textur angeben; (0.5, 1.0) entspricht 50 % in der Breite und 100 % in der Höhe
• Farben in der Grafik werden meist durch drei RGB-Werte dargestellt; wenn man X und Y der UV-Koordinaten in Rot und Grün umwandelt, werden Koordinatenänderungen als Farbverlauf sichtbar
• Der Beispielcode bestimmt Farben auf einer einzelnen 3D-Fläche, die den gesamten Bildschirm bedeckt, durch unabhängige Berechnung pro Pixel; dafür ist eine andere Denkweise nötig als bei gewöhnlicher Programmierung

---

Ziel und Voraussetzungen der Serie

• Die Serie „Psychedelic Graphics“ behandelt, wie man psychedelische Visuals für Animationen und Games erstellt
• Vorwissen in Grafik oder Programmierung ist nicht erforderlich, aber Trigonometrie und Programmiererfahrung helfen beim Verständnis
• Ziel ist es, die Grundprinzipien der psychedelischen Grafik aus dem Videobeispiel zu verstehen
• Die meisten Videos wurden mit Blender erstellt, doch die Techniken dieser Serie lassen sich leicht in andere Umgebungen übertragen; Blender wird in Part 3 behandelt
• Teil 0 und Part 1 führen auf ein Beispiel hin, das im Web läuft

3D-Modelle und UV-Mapping

• 3D-Modelle sind Oberflächen aus Punkten und Flächen

  • Computergrafik wirkt zwar wie 3D, aber beim Schreiben von Grafikcode muss man oft in 2D denken
  • Wenn man in einem 3D-Editor ein Modell erstellt, erzeugt man tatsächlich Punkte im Raum, sogenannte Vertices, und Flächen (Faces), die diese Punkte verbinden
  • Ein Modell ist eine hohle Oberfläche; sichtbar ist auf dem Bildschirm nur die Oberfläche
  • Fast alle 3D-Formen in Games und Animationen lassen sich auf solche Punkte und Flächen zurückführen
  • Auch glatt wirkende Modelle bestehen oft aus so vielen Punkten und Flächen, dass die Kanten schwer zu erkennen sind

• Texturen sind 2D-Bilder für 3D-Oberflächen

  • Als Standardmethode zum Hinzufügen von Farbe zu 3D-Oberflächen verwendet man UV-Mapping/Texturing
  • So wie eine 2D-Projektion der Erde in manchen Bereichen gedehnt oder verzerrt wirkt, kann auch ein zu einem 2D-Bild aufgefaltetes Farbbild eines 3D-Modells verzerrt sein
  • Das aufgefaltete 2D-Bild ist eine Textur (texture), die die Farben enthält, die später auf die Oberfläche des 3D-Modells gelegt werden
  • Eine Möglichkeit, eine Bildtextur zu erstellen, besteht darin, eine leere Bilddatei anzulegen und dann für jede Fläche des 3D-Objekts festzulegen, welcher Teil dieses Bildes verwendet wird
  • Unterschiedliche 3D-Flächen dürfen denselben Texturbereich gemeinsam nutzen; bei symmetrischen Körpern ist es üblich, nur eine Seite zu bemalen und denselben Bereich beiden Seiten zuzuweisen
  • Der Texturbereich, den eine Fläche verwendet, muss weder in Größe noch in Seitenverhältnis der tatsächlichen 3D-Fläche entsprechen

Texture Painting und UV-Koordinaten

• Was man auf die Textur malt, erscheint auf dem Modell

  • Alles, was auf die Textur gemalt wird, wird auf dem 3D-Modell angezeigt
  • Die meisten Programme bieten eine Funktion, bei der man direkt auf das 3D-Modell malt und dabei stellvertretend die Bildtextur eingefärbt wird

• UV-Koordinaten sind 2D-Positionen auf einer Textur

  • Der für jede Fläche eines 3D-Modells reservierte Texturbereich ist die UV-Map; sie ist die Datengrundlage, die einen Teil der Bildtextur mit dem 3D-Modell verbindet
  • UV kann man als 2D-Koordinaten auffassen, die eine Position auf der Bildtextur angeben
  • Jede 3D-Fläche wird durch mehrere Punkte definiert; wenn diese Punkte auf der Bildtextur platziert werden, erhält jeder Punkt UV-Koordinaten
  • Bei (0.5, 1.0) bedeutet der erste Wert 0.5 die halbe Strecke in horizontaler Richtung, der zweite Wert 1.0 den obersten Punkt in vertikaler Richtung
  • Beide UV-Werte liegen normalerweise zwischen 0,0 und 1,0; meist verwendet man den Koordinatenraum innerhalb des Rechtecks um (0, 0) und (1, 1)
  • Wenn man statt Pixelpositionen 0 und 1 verwendet, lässt sich die Verschiebung nach links/rechts und oben/unten als Verhältnis ausdrücken; mit 100 multipliziert ist sie wie ein Prozentwert zu verstehen
  • Die tatsächlichen Namen der beiden Dimensionen sind U und V; weil X, Y und Z bereits für 3D-Positionen verwendet werden, nutzt man die Bezeichnung UV

Farben und Datentypen in der Grafik

• RGB stellt Farben mit drei Werten dar

  • Farben in der Computergrafik werden meist als RGB dargestellt, also Rot, Grün und Blau
  • Die Rot-, Grün- und Blauanteile einer einzelnen Farbe sind normalerweise Werte zwischen 0,0 und 1,0
  • Rot wird als (1.0, 0.0, 0.0) dargestellt, Schwarz als (0.0, 0.0, 0.0), Weiß als (1.0, 1.0, 1.0)
  • Hexadezimale Schreibweisen wie 0xff0000, die in Webgrafik verwendet werden, stellen dieselbe Information auf andere Weise dar

• Wenn man UV als Farbe betrachtet, werden Koordinaten sichtbar

  • Zur Visualisierung von UV-Koordinaten verwendet man üblicherweise den ersten Wert X als Rot, den zweiten Wert Y als Grün und setzt Blau auf 0.0
  • UV (0, 1) wird zur Farbe (0.0, 1.0, 0.0) und erscheint grün
  • UV (1, 0) wird zur Farbe (1.0, 0.0, 0.0) und erscheint rot
  • Färbt man ein Rechteck entsprechend der UV-Position ein, wird es nach links oben hin stärker grün und rechts unten rot
  • Links unten sind Rot und Grün beide 0, also wird es schwarz; rechts oben sind Rot und Grün beide enthalten, also wird es gelb

• float, vec2, vec3

  • float ist eine einzelne Dezimalzahl, also eine Gleitkommazahl
  • vec steht für Vektor; vec2 ist ein Paar aus zwei Dezimalzahlen, vec3 eine Gruppe aus drei Dezimalzahlen
  • Eine RGB-Farbe besteht aus drei Werten für Rot, Grün und Blau und wird daher als vec3 dargestellt
  • UV besteht aus den zwei Werten X und Y und entspricht daher vec2

Wie der Beispiel-Grafikcode ausgeführt wird

• Die Codebeispiele dieser Serie verwenden kein separates 3D-Modell, sondern eine einzelne 3D-Fläche, die den gesamten Bildschirm einnimmt
• Es wird keine Farbe über eine Bildtextur hinzugefügt; stattdessen bestimmt der Code die Farben auf der Bildtextur direkt
• Der Ablauf sieht wie folgt aus
  • Die Kamera der 3D-Szene berechnet, welche 3D-Fläche sichtbar ist
  • Mithilfe des für jede Fläche reservierten Texturbereichs, also des UV-Mappings, werden UV-Koordinaten berechnet
  • Die berechneten UV-Koordinaten und Informationen wie die 3D-Position werden an den Code übergeben
  • Der Code bestimmt die Farbe an dieser Position
• Man kann sich vorstellen, dass diese Verarbeitung millionenfach pro Sekunde stattfindet
• Grafikcode zeichnet nicht direkt eine zusammenhängende Linie von einem Punkt auf dem Bildschirm zu einem anderen, sondern ähnelt eher einem Verfahren, das die Farbe einer Position zurückgibt, sobald diese Position ausgewählt wird
• Der Code, den man schreibt, wird nicht nur einmal ausgeführt, um das gesamte Bild zu erzeugen, sondern für jedes Pixel, also jeden kleinen Bereich des Bildschirms
• Weil man die Farben anderer Bildschirmbereiche nicht prüfen kann, erfordert Grafikprogrammierung selbst mit allgemeiner Programmiererfahrung eine andere Denkweise
• Part 1 führt weiter dazu, wie man auch innerhalb dieser Einschränkungen interessante Visuals erzeugt

[GN⁺]

Meinungen auf Hacker News

• Hier ist David Tristram. Ich war Gründungsmitglied der Computer-Grafik-Performance-Gruppe Raster Masters in den 1990ern und habe, wie @hopkins sagte, auf hochwertigen Silicon-Graphics-Workstations synthetische Videos für Live-Musik von Grateful Dead, Herbie Hancock, Graham Nash und anderen erstellt.
  Nach mehreren Wandlungen arbeite ich heute hauptsächlich in Resolume Avenue und TouchDesigner, also in 2D-Videoverarbeitungsumgebungen. Diese Links sind inspirierend

  • Mich würde interessieren, wer die anderen Mitglieder von Raster Masters waren und welche verrückten Geschichten es von Grateful-Dead-Auftritten gibt.
    Heutzutage fühlt es sich schon bei Präsentationen, bei denen man nur einen Projektor an den Laptop steckt, jedes Mal wie Würfeln an, ob das Bild erscheint; deshalb würde mich auch interessieren, welche Projektoren, Kalibrierung und Vorbereitung damals nötig waren, um live hochauflösende SGI-Grafik auf eine Leinwand über der Band zu bringen.
  • Mich würde interessieren, ob es Links zu Arbeiten gibt, die man sich ansehen kann
  • Ich glaube, ich habe die Arbeiten um 1992 bei einigen Dead-Shows gesehen

• Wenn man mit psychedelischen Grafiken experimentieren möchte, ohne allzu tief auf Low-Level-Ebene abzutauchen, ist hydra ganz gut. Es ist eine JavaScript-basierte Live-Coding-Umgebung, und die Lernkurve ist recht sanft

  • Ich frage mich, ob es auch etwas gibt, das Musik-Input unterstützt. Ich mochte die Visualizer-Plugins aus Winamp-Zeiten, aber heutzutage wirkt es, als sei diese Kunst ausgestorben
  • Auf dwitter.net gibt es ebenfalls viele Beispiele für psychedelische Grafiken in JavaScript

• Was den Originalartikel und UV-Koordinaten angeht: Früher habe ich viel damit experimentiert, die UV-Texturkoordinaten der einzelnen Eckpunkte eines quadratischen Meshes auf interessante Weise zu verschieben.
  Damals nutzte man Farben pro Vertex; heute würde man vermutlich Fragment- bzw. Pixel-Shader verwenden, wie man sie auf ShaderToy findet. Eine besonders interessante Methode ist, Texturkoordinaten entlang eines Strömungsfelds (flow field) zu advektieren. Man kann dafür ein beliebiges 2D-Vektorfeld nehmen und wiederholt Verschiebungen auf jede Koordinate anwenden. Schon ungenaue explizite Verfahren liefern gute Ergebnisse.
  Wenn die Koordinaten weit verzerrt werden, wird das Bild unkenntlich. Eine einfache Lösung besteht darin, den Koordinaten eine „Rückstell“-Kraft zu geben, die sie zu ihrer ursprünglichen Position zurückzieht. Dann schnappen sie zurück, als würde man ein Stück Spiegelfolie glattziehen.
  Heute nutze ich Feedback zusammen mit solchen Verschiebungseffekten. Wenn man sehr kleine Verschiebungen wiederholt anwendet, entsteht eine Bewegung, die Fluidströmungen ziemlich ähnlich sieht

  • Jeremy Huxtables PostScript-melt funktionierte ebenfalls auf diese Weise. Er war auch der ursprüngliche Autor von NeWS’ „Big Brother“ Eyes, das XEyes inspirierte.
    Wenn man wiederholt ein zufälliges Rechteck auswählt und mit einem zufälligen Offset kopiert, verwandelt sich ein sehr digitaler, rechteckiger und scharfkantiger Effekt durch ein wenig Zufälligkeit (Dithering) in einen weichen, organischen Effekt. Es funktionierte auch gut in Schwarzweiß und war letztlich einfach nur PostScript.
    https://www.donhopkins.com/home/archive/news-tape/fun/melt/m...
    Es gibt auch Jeremys ursprüngliches „Big Brother“ eye.ps. Das war eine typische Demo mit einem runden NeWS-Augapfel-Fenster.
    https://www.donhopkins.com/home/archive/news-tape/fun/eye/ey...
  • Ich muss an den einfachen, direkt manipulierbaren Spaß von Kai Power Goo denken.
    LGR: Kai's Power Goo – Classic 90s Funware for PC!
    https://www.youtube.com/watch?v=xt06OSIQ0PE

• Mir gefällt, dass man in HTML leicht Shader einsetzen kann, die auf Bilder wirken. Meine Fähigkeiten in diesem Bereich sind eher durchschnittlich, aber es macht Spaß zu sehen, wie weit andere das treiben.
  Schon eine einfache Näherung einer Tiefenkarte macht die Ergebnisse deutlich interessanter. Vor ein paar Jahren habe ich mit einer ähnlichen Technik ein Projekt umgesetzt, bei dem Bilder mit einem „interessanten Effekt“ weich ineinander übergeblendet wurden; dazu gibt es einen Artikel und eine Demo.
  https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...

• Ehrlich gesagt ist der zusammen mit diesem Beitrag verlinkte Rolling-Hills-Artikel viel interessanter.
  Besonders beeindruckend ist die Stelle etwa in der Mitte, an der der folgende Code auf ein statisches Bild angewendet wird:
  uv.x = uv.x + sin(time + uv.x * 30.0) * 0.02;
uv.y = uv.y + sin(time + uv.y * 30.0) * 0.02;
  Aus Sicht von jemandem, der mehrere psychedelische Erfahrungen gemacht hat, wirkt das zumindest bei niedrigen, nicht heroischen Dosen der tatsächlichen visuellen Erfahrung am nächsten. Wenn man die Wellen etwas verlangsamt und den Bewegungsbereich leicht reduziert, käme es dem wohl noch näher.
  Mich interessiert eher die Reproduktion von durch psychedelische Substanzen ausgelösten visuellen Halluzinationen als coole visuelle Effekte für Konzerte. Natürlich respektiere ich Künstler in beiden Bereichen.
  Es gibt einen Artist, der mit modernen Tools großartige psychedelische Videos macht, aber mir fällt der Accountname partout nicht ein. Wenn ich ihn finde, schreibe ich ihn unten dazu.
  Im Vergleich zu diesem Teil des Rolling-Hills-Artikels muss ich an die Pilztee-Szene in Midsommar denken, besonders an die Szene mit der Baumrinde. Der Effekt, dass Dinge „atmen“ und fließen, ist eine wirklich einzigartige visuelle Erfahrung, und es ist schön zu sehen, wie er auf verschiedene Arten umgesetzt wird

  • Es ist vielleicht nicht der Account, den du meinst, aber dieser YouTube-Account reproduziert visuelle Erfahrungen gut und behandelt daneben auch andere Effekte.
    Die Videos beim Blick in die Natur, die Art, wie geometrische Muster zu entstehen beginnen, und der „Atmen“-Effekt sind stark. Es werden verschiedene Substanzen behandelt, von leicht atmenden oder pulsierenden Oberflächen bis hin zu vollständigen geometrischen „Welten“, wie sie bei Stoffen wie DMT auftreten.
    https://www.youtube.com/@josikinz

• Anfang der 90er veröffentlichte Todd Rundgren die Mac-App Flowfazer. Sie simulierte zwar nicht die Erfahrung, half aber dabei, den Flow aufrechtzuerhalten, indem sie die Aufmerksamkeit ablenkte
  Manche nutzten sie auch als Leitfaden für ihre eigene Kreativität
  [1] https://grokware.com/
  [2] https://m.youtube.com/watch?v=3Z4X4FmIhIw
  Damals war es die Ära der Bildschirmschoner und der Palettenanimation

• Wenn man so etwas mag und die Gelegenheit hat, bei einem Auftritt des Musikers Tipper Fractaled Visions für die Visuals zu sehen, wird das eine unglaubliche Erfahrung sein
  Es war die präziseste visuelle Darstellung psychedelischer Artefakte, die ich bisher gesehen habe. Ich habe letztes Jahr einen gemeinsamen Auftritt gesehen, und es war eines der besten Kunsterlebnisse meines Lebens. Die Visuals von Fractaled Visions hatten eine Fülle und Komplexität, die fast unglaublich war
  Obwohl ich mich ziemlich gut mit Shader-Programmierung und Ähnlichem auskenne, gab es bei einigen Effekten Momente, in denen ich dachte: „Wie zum Teufel haben sie das gemacht?“ Das Set-Video unten fängt die Erfahrung nicht vollständig ein, vermittelt aber die Stimmung. In 4K mit 60 fps war es auf einem völlig anderen Niveau
  https://youtu.be/qMcqw12-eSk?si=R5mCaIbR01w3Tbyv

• Hier braucht es einen Link zu ShaderToy: https://www.shadertoy.com

• Das erinnert mich an den alten Flash-Klassiker Flashback.swf aus diesem Bereich. Ein Video-Rendering gibt es hier: https://m.youtube.com/watch?v=KaSqrx93rS0

  • Durch dieses Video bin ich in der Flash-Ära auf die Elektronikgruppe Shpongle aufmerksam geworden
    In dieser Animation wurde ein Remix von Divine Moments of Truth verwendet, vermutlich die „Russian Bootleg“-Version. Ich hatte zwar auch davor elektronische Musik gehört, aber als ich diese Art elektronischer Musik zum ersten Mal hörte, hat es mir wirklich den Kopf weggeblasen

• Diese Woche habe ich bei der Arbeit WebGL-Shader geschrieben und Details so angepasst, dass sie wie physische Kameraeffekte wirken
  Wenn ich dabei aber gelegentlich etwas falsch umsetze, kommt etwas heraus, das den Ergebnissen in diesem Artikel ähnelt – und ehrlich gesagt ist das viel interessanter als Standard-Bildeffekte
  Die Fälle, in denen man es visuell einsetzen kann, mögen begrenzt sein, aber mit unseren Modellen davon zu spielen, wie Computergrafik funktioniert, ist eine sehr gute Methode, um die einzelnen Systeme zu lernen. Man lernt dabei nicht nur Grafik, sondern auch die grundlegende Mathematik der Programmierung, wie GPUs arbeiten und wie sie mit Speicher und CPU verbunden sind, wie das Auge funktioniert sowie den Umgang mit Animation und Zeit