Texture XOR (2004)

 (lodev.org)
1 points par GN⁺ 2024-12-19 | 1 commentaires | Partager sur WhatsApp
  • La texture XOR est une texture procédurale simple créée en appliquant un XOR aux coordonnées x et y d’un pixel, utile pour tester rapidement un texture mapper sans fichier image
  • En C++, on produit la valeur x ^ y avec l’opérateur ^ et, en la plaçant dans le RGB, on obtient un motif en niveaux de gris ; le XOR ne renvoie 1 que lorsque deux bits sont différents
  • La taille de texture donne un meilleur rendu lorsqu’elle est une puissance de deux ; sous 256, la plage de valeurs est réduite et l’image s’assombrit, mais on peut corriger cela en multipliant les valeurs de couleur
  • Une texture XOR de taille supérieure à 256 n’améliore pas la qualité, car elle reste limitée à la plage de couleurs 0~255 des canaux 8 bits ; pour des tailles plus grandes, il faut diviser les valeurs ou utiliser des canaux avec plus de bits
  • En appliquant de la même façon & et | aux coordonnées, on peut aussi créer des textures AND et OR ; AND est plus sombre, OR plus clair, et la somme de XOR et AND donne OR

Où une texture XOR peut être utile

  • La texture XOR est très facile à générer et constitue une texture procédurale visuellement crédible
  • Dans les démos ou les intros, elle a été beaucoup trop utilisée pour être un bon choix, et dans les jeux, elle a peu d’intérêt pratique en dehors d’usages comme des dalles de sol voyantes
  • Elle permet de vérifier rapidement si un nouveau texture mapper fonctionne, sans charger de fichier image ni écrire de code de génération complexe

Créer un motif avec le XOR des coordonnées

  • L’idée de base consiste à appliquer un XOR entre la coordonnée x et la coordonnée y du pixel courant
  • En C++, l’opérateur XOR est ^
  • Le code d’exemple calcule une valeur pour chaque pixel d’un écran 256×256
    • Uint8 c = x ^ y
    • ColorRGB(c, c, c) définit une couleur en niveaux de gris
  • Le résultat affiché est un motif XOR issu de la combinaison des motifs binaires des coordonnées

Contraintes de taille et de plage de couleurs

  • La texture est plus esthétique lorsque sa taille est une puissance de deux
  • Les valeurs des composantes de couleur vont de 0 à 255
  • La valeur de couleur maximale produite par l’opération XOR est égale à la dimension de la texture lorsque celle-ci est une puissance de deux
    • Un motif plus petit que 256, comme 64, paraît trop sombre
    • Multiplier les valeurs de couleur par 4 permet de retrouver de la luminosité
  • Avec une taille supérieure à 256, comme 512, il faut limiter les couleurs pour qu’elles ne dépassent pas 256
    • On peut utiliser un modulo 256, mais ce ne sera alors plus un véritable motif XOR
    • Il vaut mieux diviser par 2
  • Avec des canaux 8 bits, il n’y a pas assez de valeurs de couleur distinctes pour améliorer la qualité des textures XOR au-delà de 256×256
  • Dans un mode couleur prenant en charge davantage de bits, la limite des grandes textures peut être différente

Fonctionnement binaire de l’opération XOR

  • Le XOR agit bit par bit sur les représentations binaires de deux entiers
  • Exclusive OR renvoie 1 lorsque les deux bits sont différents, et 0 lorsqu’ils sont identiques
  • La table de vérité est la suivante
    • 0 XOR 0 = 0
    • 0 XOR 1 = 1
    • 1 XOR 0 = 1
    • 1 XOR 1 = 0
  • Par exemple, 5 XOR 13 = 8
    • En binaire : 0101 XOR 1101 = 1000

Variations de couleur

  • La valeur XOR peut être utilisée non seulement en niveaux de gris, mais aussi différemment sur chaque canal RGB
  • Dans l’exemple, c = x ^ y sert à construire la couleur
    • r = 255 - c
    • g = c
    • b = c % 128
  • On peut aussi utiliser la valeur XOR comme teinte dans l’espace HSV et l’envoyer à la fonction HSVtoRGB
    • Dans l’exemple, ColorHSV(c, 255, 255) est converti via HSVtoRGB pour obtenir la couleur du pixel

Textures AND et OR

  • En utilisant les opérateurs AND et OR à la place de XOR, on peut créer des textures similaires basées sur les coordonnées
  • En C++, l’opérateur AND est & et l’opérateur OR est |
  • AND ne renvoie 1 que lorsque les deux bits valent 1
    • 0 AND 0 = 0
    • 0 AND 1 = 0
    • 1 AND 0 = 0
    • 1 AND 1 = 1
  • OR renvoie 1 lorsqu’au moins l’un des deux bits vaut 1
    • 0 OR 0 = 0
    • 0 OR 1 = 1
    • 1 OR 0 = 1
    • 1 OR 1 = 1
  • Une texture AND est plus sombre, car elle ne renvoie 1 que dans un seul cas, tandis qu’une texture OR est plus claire, car elle renvoie 1 dans de nombreux cas
  • La somme d’une texture XOR et d’une texture AND donne une texture OR

Conclusion et usages d’exemple

  • La texture XOR est facile à créer et utile pour tester si un moteur de rendu de textures fonctionne correctement
  • Elle n’est pas adaptée aux travaux artistiques ni aux applications comme les jeux
  • Elle peut aussi servir de texture 3D sous la forme x ^ y ^ z ; dans l’exemple, elle est utilisée pour vérifier que le moteur de rendu de textures planétaires fonctionne correctement

À lire aussi

1 commentaires

 
GN⁺ 2024-12-19
Avis sur Hacker News
  • Au collège, j’avais un peu touché au code, mais je ne savais faire que de simples applications CLI tournant dans le terminal. Puis un jour, je suis tombé sur Lode's Computer Graphics Tutorial, et j’ai découvert pour la première fois des exemples simples qui ouvraient une fenêtre et dessinaient des graphismes à l’écran.
    Grâce à ça, j’ai pu recréer des jeux rétro comme Pacman, Snake ou Space Invaders, et faire des choses impossibles avec le seul terminal.
    Je pense que ce site a été l’élément déclencheur qui m’a fait commencer une carrière dans le développement logiciel assez jeune. À l’époque, j’avais presque mémorisé les pages et les exemples de https://lodev.org/cgtutor/, même si je ne comprenais absolument pas une partie des maths
  • J’avais autrefois écrit un petit programme en assembleur x86 qui générait des images avec une technique similaire, mais en 1 bit de couleur.
    Au lieu de x ^ y, j’utilisais parity(x ^ y) : une couleur si le nombre de bits à 1 était pair, l’autre s’il était impair. Le résultat ressemblait à un pavage presque répétitif, mais jamais complètement, ce qui le rendait visuellement intéressant.
    En fouillant dans mes vieux fichiers, j’ai retrouvé un programme écrit en 2019 avec fasm, qui générait un fichier XPM2 ; pour l’afficher, il fallait le convertir manuellement en XPM3. L’image obtenue est ici : https://i.postimg.cc/FsFhXSHG/xortiles.png
    Je peux poster le code si ça intéresse quelqu’un, même si je ne sais pas si ça intéressera vraiment
  • Ça me fait penser aux textures de distance de Hamming : https://chalkdustmagazine.com/features/the-hidden-harmonies-...
  • Fait amusant : chaque point d’une texture XOR est le plus petit entier qui n’apparaît ni au-dessus ni à gauche.
    Je glisse discrètement mon blog avant de m’éclipser : https://nicknash.me/2012/10/26/happy-halloween/
    • Dans la matrice d’exemple, la ligne commençant par 5 est erronée ; elle devrait être
      5 4 7 6 1 0 3 2
  • Si on anime une fonction comme color = (y == (x ^ t)) en faisant varier t, on obtient un effet similaire ; on appelle ça munching squares.
    À l’origine, cela a été écrit pour le PDP-1 au début des années 1960, et j’en ai déjà vu une démonstration sur le PDP-1 du Computer History Museum.
    L’affichage du PDP-1 ne peut tracer que des points et n’utilise pas de framebuffer bitmap, donc je me suis toujours demandé comment cette texture XOR caractéristique pouvait apparaître.
    Il s’avère que cela exploite la longue persistance du phosphore de l’écran, et que la luminosité de chaque point décroît avec le temps.
    Le CHM a une vidéo du programme en cours d’exécution, mais l’effet de rémanence du phosphore y ressort mal : https://www.computerhistory.org/collections/catalog/10266415...
    Une vidéo tournée dans MAME montre mieux, dans une certaine mesure, comment la rémanence du phosphore produit la texture XOR : https://youtu.be/AxJzUiaQ7xM?si=X9K47c4WyD6AisUp
  • Il existe un site avec des milliers d’exemples de ce genre : https://www.dwitter.net/
    Dwitter est une sorte de Twitter pour des exemples JavaScript en une ligne utilisant canvas, où les utilisateurs doivent faire tenir leur création en 140 octets
  • J’ai déjà réalisé un quilt avec cette texture.
    Il ressemble beaucoup à l’une des images vers la fin du site, avec la même échelle de couleurs arc-en-ciel, et il est accroché au mur comme décoration sur une surface de 6 pieds sur 6
  • C’est un site vraiment chouette. Je recommande de remonter d’un niveau et d’aller voir les autres pages aussi.
    Le contenu a 20 ans, mais il reste encore plein de choses utiles, surtout si vous faites du shader
  • J’ai récemment joué avec ce motif en J, et on peut l’écrire ainsi :
    ~:"1/~&.#:i.2^8
    C’est visible ici : https://jsoftware.github.io/j-playground/bin/html2/#base64=b...
  • Je viens justement de lire https://news.ycombinator.com/item?id=42414817 et j’imagine que la texture XOR aussi a été découverte par accident