(sim) Shader für die Vegas Sphere schreiben

 (whenistheweekend.com)
1 Punkte von GN⁺ 2023-12-01 | 1 Kommentare | Auf WhatsApp teilen
  • Die Seite The Sphere zeigt anhand von 5 Beispielen und GLSL-Shader-Fragmenten, wie die Farbe auf der Oberfläche einer Kugel berechnet wird
  • Die Shader-Eingaben bestehen aus time, vUv und vNormal, wobei Zeit und UV-Koordinaten im Zentrum der Farbveränderung stehen
  • main() berechnet die endgültige Farbe jedes Pixels, indem vec4(...) in gl_FragColor gesetzt wird
  • Die RGB-Werte basieren auf cos(time + vUv.xyx + vec3(0., 2., 4.)) und stellen eine zeitbasierte Veränderung dar
  • Das deklarierte vNormal wird im bereitgestellten Codefragment nicht verwendet und hat daher aktuell keinen Einfluss auf die Farbberechnung

Aufbau der Seite The Sphere

  • Der Titel lautet The Sphere
  • Im Hauptteil sind Beispiele von example 1 bis example 5 aufgeführt
  • Anschließend folgt Shader-Code, der wie GLSL aussieht

Ablauf des GLSL-Shader-Codes

  • Es gibt drei Eingabevariablen: time, vUv, vNormal
    • time ist ein uniform float
    • vUv ist ein varying vec2
    • vNormal ist ein varying vec3
  • Die Funktion main() setzt gl_FragColor
  • Die Farbe wird in der Form 0.5 + 0.5 * cos(...) berechnet
  • In die Eingabe von cos() gehen der Zeitwert, vUv.xyx und vec3(0., 2., 4.) gemeinsam ein
  • Der Alpha-Wert ist fest auf 1. gesetzt

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-12-01
Hacker-News-Kommentare

  • Ich habe den Matrix-Effekt zum Laufen gebracht.
    Ich wollte die UVs so anpassen, dass der obere Teil der Kugel sichtbar wird, habe dann aber aufgegeben. Dafür habe ich festgestellt, dass sich die three.js-Uniforms projectionMatrix und modelViewMatrix referenzieren lassen, wenn man sie oben in GLSL einfach nur deklariert.

  • Ich habe ein statisches Penrose-Tiling erstellt: https://gist.github.com/vjeranc/265db912d4004c7c0b0f16ae5fda...
    Da die Kugel nicht unendlich ist, hat ein aperiodisches Tiling hier keinen praktischen Nutzen, sieht aber trotzdem gut aus.
    Ich weiß noch nicht, ob es eine ähnliche Kachelmenge oder eine einzelne Kachel gibt, mit der sich ein unendlicher Kegel parkettieren lässt.

    • Mit physischen Kacheln scheint das wegen der Krümmung nicht möglich zu sein.
      Es bleibt zwar eine interessante Frage, aber es ist nicht klar genug, welche Projektion sinnvoll wäre, um tiefer einzusteigen.
    • Es wäre auch interessant, die Kugel langsam durch eine unendliche aperiodische Kachelebene zu bewegen.

  • Etwas am Thema vorbei, aber faszinierend ist, was für ein riesiges Engineering-Projekt The Sphere tatsächlich ist.
    Alles gehört dazu: die Struktur selbst, die Synchronisierung der Tausenden LED-Panels innen und außen an der Kugel, die Kühlung in der Hitze von Las Vegas und dass die 18.000 Plätze innen ausreichend kühl und belüftet bleiben.
    Es gibt genug ganz normale Bürogebäude, die nicht einmal vernünftig belüftet sind.

    • Trotz all dieses Aufwands und Ressourcenverbrauchs geht es am Ende nur darum, noch mehr Aufmerksamkeit an Werbung zu binden.
    • Dass man im Inneren der Sphere sogar kalten Wind als Spezialeffekt erzeugen kann, ist wirklich cool.

  • Ich habe eine einfache smiley.frag gebaut: https://gist.github.com/nickbarth/4ec5147bd1288fd2bcfc4c5b46...

  • Das Projekt ist wirklich gut.
    Für jeden Code eigene URLs zu haben, wäre wahrscheinlich leichter zu teilen. Es könnte auch gut funktionieren, den Code direkt in die URL einzubetten.

  • Ich habe einen großen Smiley-Gesicht-Shader erstellt.
    Das ist GLSL-Code, der den Mund mit sdRing erzeugt, die Augen mithilfe von Links-rechts-Symmetrie in einem Durchgang verarbeitet und dann alles in Gelb ausgibt.

  • Ich habe zum ersten Mal mit Shadern gespielt und eine rotierende Wassermelone gebaut.
    Ich verstehe ungefähr, dass mit RGB-Tupeln gearbeitet wird, fract() wie eine Modulo-Operation aussieht und dass durch Quadrieren und Addieren weiche Streifen entstehen. Aber wie der Shader genau funktioniert, was vUv ist und wohin gl_FragColor geschrieben wird, ist mir noch nicht klar.

    • Die GPU bekommt das Objekt im Modellraum, also eine Liste von Dreiecks-Eckpunkten, die Kameraposition und einen Vertex-Shader, der all das in den Bildschirmraum transformiert.
      Danach zerlegt sie die Dreiecke in Fragmente, also Pixel, und führt für jedes Fragment den Fragment-Shader aus.
      Hier sind die Eingaben das time-Uniform, das für alle Fragmente denselben Wert hat, und vUv, das vom Vertex-Shader ausgegeben und innerhalb des Dreiecks linear interpoliert wird; vUv entspricht hier den Pixelkoordinaten auf der Kugel.
      gl_FragColor ist die RGBA-Farbausgabe, die auf das jeweilige Fragment angewendet wird.
      In typischen Game- oder Google-Earth-Shadern kommen dazu noch Texturierung und Beleuchtung. Das GPU-Ausführungsmodell wirkt zwar so, als würde man Pixel für Pixel programmieren, tatsächlich ist es aber SIMT, also verarbeitet NVIDIA 32 und AMD 64 Pixel gleichzeitig.
      Verzweigungen werden im Allgemeinen in bedingte Operationen umgewandelt, bei denen im Wesentlichen beide Zweige ausgeführt werden.
    • Der Code wird für jedes Pixel auf dem Canvas ausgeführt.
      https://www.shadertoy.com/ dürfte dir auch gefallen.

  • Die Shader auf https://www.glslsandbox.com sind ebenfalls sehenswert.
    Man sollte aber vorsichtig sein, weil dort oft unreife Leute NSFW-Shader hochladen und der Betreiber anscheinend nicht besonders gründlich moderiert.

    • Es ist schon beeindruckend, mit Hunderten Zeilen GLSL Körper zu erzeugen, aber eine Orgienszene in nur 11 Zeilen zu bauen, ist noch einmal etwas ganz anderes.
      Da fragt man sich, wie hoch die Kolmogorow-Komplexität von „NSFW-GLSL-Inhalten“ ist.
      https://www.glslsandbox.com/e#108133.0
    • Das ist pure Genialität.
      NSFW: https://www.glslsandbox.com/e#108230.3
      In den Code-Kommentaren stehen noch Prompts an ChatGPT, den Körper dicker zu machen, Scroll-Linien im Hintergrund hinzuzufügen, die Farben zu ändern und bestimmte Körperteile einzubauen.
    • Das ist jedenfalls deutlich besser als die Leute, die dort Hakenkreuze hochgeladen haben.

  • Sehr schön.
    In meinem isocity-Projekt sieht man in einer von jemandem beigesteuerten Lösung, wie sich die gebaute Stadt per URL teilen lässt.
    Etwas Ähnliches dürfte sich auch hier umsetzen lassen: https://github.com/victorqribeiro/isocity/commit/c6588171e37...

  • The Sphere wäre vermutlich ein großartiger Ort für eine Demoparty.
    https://en.wikipedia.org/wiki/Demoscene#Parties