XOR-Texturen (2004)

 (lodev.org)
1 Punkte von GN⁺ 2024-12-19 | 1 Kommentare | Auf WhatsApp teilen
  • XOR-Texturen sind einfache prozedurale Texturen, die durch XOR-Verknüpfung der x- und y-Koordinaten eines Pixels erzeugt werden. Sie sind nützlich, um einen Texture Mapper schnell zu testen, ohne Bilddateien zu verwenden.
  • In C++ erzeugt man mit dem Operator ^ den Wert x ^ y; setzt man ihn in RGB ein, entsteht ein Graustufenmuster. XOR gibt nur dann 1 zurück, wenn sich zwei Bits unterscheiden.
  • Die Texturgröße wirkt am besten, wenn sie eine Zweierpotenz ist. Bei Größen unter 256 ist der Wertebereich eng und das Bild wird dunkel; das lässt sich durch Multiplikation der Farbwerte korrigieren.
  • XOR-Texturen größer als 256 profitieren wegen des Farbbereichs von 0 bis 255 bei 8-Bit-Kanälen nicht an Qualität. Für größere Größen braucht man eine Division der Werte oder Kanäle mit mehr Bits.
  • Wendet man auf dieselbe koordinatenbasierte Methode & und | an, lassen sich auch AND- und OR-Texturen erzeugen. AND ist dunkler, OR heller, und die Summe aus XOR und AND ergibt OR.

Wofür XOR-Texturen nützlich sind

  • XOR-Texturen sind sehr einfach zu erzeugende prozedurale Texturen und sehen visuell durchaus plausibel aus.
  • In Demos oder Intro-Releases werden sie zu häufig eingesetzt und sind daher keine gute Wahl; auch in Spielen sind sie wenig praktisch, außer vielleicht für auffällige Bodenfliesen.
  • Damit lässt sich schnell prüfen, ob ein neuer Texture Mapper funktioniert, ohne Bilddateien zu laden oder komplexen Generierungscode zu schreiben.

Muster durch XOR von Koordinaten erzeugen

  • Die Grundidee besteht darin, die x-Koordinate und die y-Koordinate des aktuellen Pixels per XOR zu verknüpfen.
  • In C++ ist der XOR-Operator ^.
  • Der Beispielcode berechnet den Wert für alle Pixel eines 256×256-Bildschirms.
    • Uint8 c = x ^ y
    • Mit ColorRGB(c, c, c) wird eine Graustufenfarbe gesetzt.
  • Das Ergebnis erscheint als XOR-Muster, das aus der Kombination der Bitmuster der Koordinaten entsteht.

Einschränkungen durch Größe und Farbbereich

  • Das Muster sieht besser aus, wenn die Texturgröße eine Zweierpotenz ist.
  • Farbkomponentenwerte reichen von 0 bis 255.
  • Der maximale Farbwert, der durch die XOR-Operation entsteht, entspricht bei Texturgrößen als Zweierpotenz der Texturdimension.
    • Muster unter 256, etwa 64, wirken zu dunkel.
    • Durch Multiplikation der Farbwerte mit 4 lässt sich die Helligkeit wiederherstellen.
  • Bei Größen über 256, etwa 512, muss verhindert werden, dass Farbwerte über 256 hinausgehen.
    • Man kann eine Modulo-Operation mit 256 verwenden, aber dann ist es kein echtes XOR-Muster mehr.
    • Durch 2 zu teilen ist besser.
  • Bei 8-Bit-Kanälen gibt es nicht genügend unterscheidbare Farbwerte, sodass sich die Qualität von XOR-Texturen über 256×256 nicht erhöht.
  • In Farbmodi mit mehr Bits können sich die Grenzen für große Texturen ändern.

Bit-Verhalten der XOR-Operation

  • XOR führt die Operation für jedes entsprechende Bit in den Binärdarstellungen zweier Ganzzahlen aus.
  • Exclusive OR gibt 1 zurück, wenn zwei Bits unterschiedlich sind, und 0, wenn sie gleich sind.
  • Die Wahrheitstabelle lautet:
    • 0 XOR 0 = 0
    • 0 XOR 1 = 1
    • 1 XOR 0 = 1
    • 1 XOR 1 = 0
  • Zum Beispiel gilt 5 XOR 13 = 8.
    • Binär geschrieben: 0101 XOR 1101 = 1000.

Farbvarianten

  • Der XOR-Wert kann nicht nur für Graustufen, sondern auch unterschiedlich auf die einzelnen RGB-Kanäle angewendet werden.
  • Im Beispiel wird c = x ^ y verwendet, um die Farbe aufzubauen.
    • r = 255 - c
    • g = c
    • b = c % 128
  • Der XOR-Wert kann auch als hue einer HSV-Farbe verwendet und an die Funktion HSVtoRGB übergeben werden.
    • Im Beispiel wird ColorHSV(c, 255, 255) mit HSVtoRGB in eine Pixelfarbe umgewandelt.

AND- und OR-Texturen

  • Statt XOR kann man auch AND- und OR-Operatoren verwenden, um ähnliche koordinatenbasierte Texturen zu erzeugen.
  • In C++ ist der AND-Operator &, der OR-Operator |.
  • AND gibt nur dann 1 zurück, wenn beide Bits 1 sind.
    • 0 AND 0 = 0
    • 0 AND 1 = 0
    • 1 AND 0 = 0
    • 1 AND 1 = 1
  • OR gibt 1 zurück, wenn eines von beiden oder beide Bits 1 sind.
    • 0 OR 0 = 0
    • 0 OR 1 = 1
    • 1 OR 0 = 1
    • 1 OR 1 = 1
  • AND-Texturen sind dunkler, weil nur ein Fall 1 zurückgibt; OR-Texturen sind heller, weil es mehr Fälle gibt, die 1 zurückgeben.
  • Die Summe aus XOR-Textur und AND-Textur ergibt eine OR-Textur.

Fazit und Beispielnutzung

  • XOR-Texturen sind leicht zu erstellen und nützlich, um zu testen, ob ein Texture Renderer funktioniert.
  • Für Anwendungen wie künstlerische Arbeiten oder Spiele sind sie nicht geeignet.
  • Sie lassen sich auch als 3D-Textur der Form x ^ y ^ z verwenden; im Beispiel wird damit geprüft, ob ein Planetentextur-Renderer korrekt funktioniert.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-12-19
Meinungen auf Hacker News
  • In der Mittelstufe hatte ich ein wenig mit Programmieren herumprobiert, konnte aber nur einfache CLI-Anwendungen bauen, die im Terminal liefen. Eines Tages entdeckte ich dann Lode's Computer Graphics Tutorial und stieß zum ersten Mal auf einfache Beispiele, bei denen ein Fenster geöffnet und Grafik auf den Bildschirm gezeichnet wurde.
    Dadurch konnte ich Retro-Spiele wie Pacman, Snake und Space Invaders nachbauen, und Dinge wurden möglich, die nur mit dem Terminal nicht gegangen wären.
    Ich sehe diese Website als den Auslöser dafür, dass ich schon in recht jungen Jahren eine Karriere in der Softwareentwicklung begonnen habe. Damals kannte ich die Seiten und Beispiele auf https://lodev.org/cgtutor/ praktisch auswendig; Teile der Mathematik verstand ich damals überhaupt nicht.
  • Ich habe früher einmal ein kleines x86-Assembly-Programm geschrieben, das mit einer ähnlichen Technik Bilder erzeugte; die Farben waren dabei 1 Bit.
    Statt x ^ y verwendete ich parity(x ^ y): Bei einer geraden Anzahl von 1-Bits wurde eine Farbe verwendet, bei einer ungeraden eine andere. Das sah visuell interessant aus, wie ein Kachelmuster, das sich fast zu wiederholen scheint, aber eben nicht ganz.
    Beim Durchsehen alter Dateien habe ich festgestellt, dass ich es 2019 in fasm geschrieben habe und dass es XPM2-Dateien erzeugte, die man zum Betrachten manuell nach XPM3 konvertieren musste. Das Ergebnisbild ist hier: https://i.postimg.cc/FsFhXSHG/xortiles.png
    Wenn gewünscht, könnte ich den Code hochladen, aber ich weiß nicht, ob daran überhaupt Interesse besteht.
  • Das erinnert mich an Hamming-Distance-Texturen: https://chalkdustmagazine.com/features/the-hidden-harmonies-...
  • Ein interessanter Fakt: Jeder Punkt der XOR-Textur ist die kleinste ganze Zahl, die weder darüber noch links davon vorkommt.
    Ich werfe kurz meinen Blog hin und ducke mich weg: https://nicknash.me/2012/10/26/happy-halloween/
    • In der Beispielmatrix ist die Zeile, die mit 5 beginnt, falsch; sie müsste so lauten:
      5 4 7 6 1 0 3 2
  • Mit einer Funktion wie color = (y == (x ^ t)) und einer Animation über wechselnde t-Werte erhält man einen ähnlichen Effekt; das nennt sich munching squares.
    Ursprünglich wurde es Anfang der 1960er-Jahre für den PDP-1 geschrieben, und ich habe es einmal auf dem PDP-1 im Computer History Museum vorgeführt gesehen.
    Ich habe mich immer gefragt, wie das PDP-1-Display, das nur Punkte setzen kann und keinen Bitmap-Framebuffer nutzt, diese charakteristische XOR-Textur erzeugt.
    Es stellte sich heraus, dass dabei das lange Nachleuchten des Bildschirm-Phosphors genutzt wird und die Helligkeit jedes Punkts mit der Zeit abnimmt.
    Beim CHM gibt es ein Video der Ausführung, aber der Phosphor-Nachleuchteffekt kommt darin nicht gut zur Geltung: https://www.computerhistory.org/collections/catalog/10266415...
    Ein in MAME ausgeführtes Video zeigt bis zu einem gewissen Grad, wie das Phosphor-Nachleuchten die XOR-Textur entstehen lässt: https://youtu.be/AxJzUiaQ7xM?si=X9K47c4WyD6AisUp
  • Es gibt eine Website mit Tausenden solcher Beispiele: https://www.dwitter.net/
    Dwitter ist so etwas wie Twitter für einzeilige JavaScript-Beispiele mit canvas; Nutzer müssen ihre Werke in 140 Bytes unterbringen.
  • Ich habe diese Textur einmal für einen Quilt verwendet.
    Mit derselben Regenbogen-Farbskala wie in einer der Abbildungen am Ende der Seite sieht er ziemlich ähnlich aus, und ich habe ihn als 6 Fuß × 6 Fuß große Dekoration an der Wand hängen.
  • Eine ziemlich coole Website. Ich empfehle, eine Ebene höher zu gehen und sich auch die anderen Seiten anzusehen.
    Das Material ist 20 Jahre alt, aber besonders wenn man Shader-Arbeit macht, gibt es dort immer noch vieles, das sich an zahlreichen Stellen einsetzen lässt.
  • Ich habe kürzlich in J mit diesem Muster herumgespielt; so lässt es sich ausdrücken:
    ~:\"1/~&.#:i.2^8
    Hier kann man es sehen: https://jsoftware.github.io/j-playground/bin/html2/#base64=b...
  • Ich habe gerade https://news.ycombinator.com/item?id=42414817 gelesen; dann kann man wohl sagen, dass auch XOR-Texturen zufällig entdeckt wurden.