Textura XOR (2004)

 (lodev.org)
1 puntos por GN⁺ 2024-12-19 | 1 comentarios | Compartir por WhatsApp
  • La textura XOR es una textura procedimental simple que se crea aplicando XOR a las coordenadas x e y de cada píxel, y resulta útil para probar rápidamente un texture mapper sin usar archivos de imagen
  • En C++, el valor x ^ y se obtiene con el operador ^, y al colocarlo en RGB se genera un patrón en escala de grises; XOR devuelve 1 solo cuando dos bits son diferentes
  • El patrón se ve mejor cuando el tamaño de la textura es una potencia de 2; en tamaños menores a 256, el rango de valores es limitado y se ve más oscuro, por lo que se puede compensar multiplicando los valores de color
  • Una textura XOR mayor que 256 no mejora su calidad al quedar limitada por el rango de color de 0 a 255 de un canal de 8 bits; para tamaños más grandes se necesita dividir los valores o usar canales con más bits
  • Aplicando & y | al mismo método basado en coordenadas también se pueden crear texturas AND y OR; AND es más oscura, OR es más brillante, y la suma de XOR y AND da como resultado OR

Dónde puede ser útil una textura XOR

  • La textura XOR es muy fácil de generar y además se ve razonablemente bien como textura procedimental
  • En demos o intro releases se ha usado demasiado y no es una gran elección; en juegos también tiene poca utilidad práctica, salvo quizá para algo como baldosas de piso llamativas
  • Permite comprobar rápidamente si un nuevo texture mapper funciona, sin cargar archivos de imagen ni escribir código de generación complejo

Crear un patrón con XOR de coordenadas

  • La idea básica es aplicar XOR entre la coordenada x y la coordenada y del píxel actual
  • En C++, el operador XOR es ^
  • El código de ejemplo calcula el valor para todos los píxeles de una pantalla de 256×256
    • Uint8 c = x ^ y
    • Se establece un color en escala de grises con ColorRGB(c, c, c)
  • El resultado visual es un patrón XOR formado por la combinación de los patrones de bits de las coordenadas

Restricciones de tamaño y rango de color

  • El patrón se ve mejor cuando el tamaño de la textura es una potencia de 2
  • Los valores de los componentes de color van de 0 a 255
  • El valor máximo de color producido por la operación XOR coincide con la dimensión de la textura cuando esta es una potencia de 2
    • Un patrón como 64, al ser menor que 256, se ve demasiado oscuro
    • Multiplicar por 4 los valores de color puede recuperar el brillo
  • En tamaños mayores que 256, como 512, hay que limitar los colores para que no superen 256
    • Se puede aplicar módulo 256, pero entonces ya no sería un patrón XOR real
    • Dividir entre 2 es una mejor opción
  • En canales de 8 bits no hay suficientes valores de color distinguibles, así que una textura XOR mayor que 256×256 no aumenta de calidad
  • En modos de color con más bits, las limitaciones de las texturas grandes pueden cambiar

Cómo funciona XOR a nivel de bits

  • XOR opera bit a bit sobre las representaciones binarias de dos enteros
  • Exclusive OR devuelve 1 si los dos bits son diferentes, y 0 si son iguales
  • La tabla de verdad es la siguiente
    • 0 XOR 0 = 0
    • 0 XOR 1 = 1
    • 1 XOR 0 = 1
    • 1 XOR 1 = 0
  • Por ejemplo, 5 XOR 13 = 8
    • En binario, 0101 XOR 1101 = 1000

Variaciones de color

  • El valor XOR puede aplicarse no solo a escala de grises, sino también de forma distinta a cada canal RGB
  • En el ejemplo, el color se construye usando c = x ^ y
    • r = 255 - c
    • g = c
    • b = c % 128
  • También se puede usar el valor XOR como hue de un color HSV y pasarlo a una función HSVtoRGB
    • En el ejemplo, ColorHSV(c, 255, 255) se convierte con HSVtoRGB y se usa como color del píxel

Texturas AND y OR

  • Además de XOR, también se pueden usar los operadores AND y OR para crear texturas similares basadas en coordenadas
  • En C++, el operador AND es & y el operador OR es |
  • AND devuelve 1 solo cuando ambos bits son 1
    • 0 AND 0 = 0
    • 0 AND 1 = 0
    • 1 AND 0 = 0
    • 1 AND 1 = 1
  • OR devuelve 1 cuando uno de los dos bits, o ambos, es 1
    • 0 OR 0 = 0
    • 0 OR 1 = 1
    • 1 OR 0 = 1
    • 1 OR 1 = 1
  • La textura AND es más oscura porque solo hay un caso en que devuelve 1, mientras que la textura OR es más brillante porque devuelve 1 con más frecuencia
  • La suma de la textura XOR y la textura AND da como resultado la textura OR

Conclusión y uso de ejemplo

  • La textura XOR es fácil de crear y útil para probar si un renderizador de texturas funciona correctamente
  • No es adecuada para trabajos artísticos ni para aplicaciones como juegos
  • También puede usarse como textura 3D en la forma x ^ y ^ z; en el ejemplo, se utiliza para verificar que un renderizador de texturas planetarias funcione correctamente

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-12-19
Opiniones en Hacker News
  • Cuando estaba en la secundaria había trasteado un poco con la programación, pero solo sabía hacer aplicaciones CLI simples que corrían en la terminal. Un día descubrí Lode's Computer Graphics Tutorial y por primera vez encontré ejemplos sencillos para abrir una ventana y dibujar gráficos en pantalla
    Gracias a eso pude recrear juegos retro como Pacman, Snake y Space Invaders, y se volvieron posibles cosas que no se podían hacer solo con la terminal
    Siento que ese sitio fue lo que me impulsó a empezar una carrera en desarrollo de software a una edad bastante temprana. En esa época casi me sabía de memoria las páginas y ejemplos de https://lodev.org/cgtutor/, aunque parte de las matemáticas no las entendía en absoluto
  • Hace tiempo hice un pequeño programa en ensamblador x86 que generaba imágenes con una técnica parecida, pero el color era de 1 bit
    En vez de x ^ y usé parity(x ^ y): si había una cantidad par de bits en 1 pintaba con un color, y si era impar con otro. Visualmente era interesante porque se veía como un mosaico que casi se repite, pero no del todo
    Revisando archivos viejos, vi que lo escribí en 2019 con fasm y generaba archivos XPM2, que había que convertir manualmente a XPM3 para verlos. La imagen resultante está aquí: https://i.postimg.cc/FsFhXSHG/xortiles.png
    Si quieren puedo subir el código, aunque no sé si a alguien le interesaría
  • Me recuerda a las texturas de distancia de Hamming: https://chalkdustmagazine.com/features/the-hidden-harmonies-...
  • Dato curioso: cada punto de una textura XOR es el entero más pequeño que no aparece ni arriba ni a la izquierda de él
    Dejo mi blog por aquí y me hago a un lado: https://nicknash.me/2012/10/26/happy-halloween/
    • En la matriz de ejemplo, la fila que empieza con 5 está mal; debería ser así
      5 4 7 6 1 0 3 2
  • Si se anima cambiando el valor de t con una función como color = (y == (x ^ t)), se obtiene un efecto parecido, llamado munching squares
    Originalmente se escribió para la PDP-1 a principios de los años 60, y alguna vez lo vi demostrado en la PDP-1 del Computer History Museum
    La pantalla de la PDP-1 solo puede dibujar puntos y no usa un framebuffer de mapa de bits, así que siempre me pregunté cómo se generaba esa textura XOR tan característica
    Resulta que aprovechaba la larga persistencia del fósforo de la pantalla, donde el brillo de cada punto disminuía con el tiempo
    CHM tiene un video en ejecución, pero no captura bien el efecto de persistencia del fósforo: https://www.computerhistory.org/collections/catalog/10266415...
    Un video ejecutado en MAME muestra hasta cierto punto cómo la persistencia del fósforo crea la textura XOR: https://youtu.be/AxJzUiaQ7xM?si=X9K47c4WyD6AisUp
  • Hay un sitio con miles de ejemplos de este tipo: https://www.dwitter.net/
    Dwitter es como Twitter para ejemplos de JavaScript de una sola línea que usan canvas, y los usuarios tienen que hacer que sus obras entren en 140 bytes
  • Una vez hice una colcha usando esta textura
    Usé la misma escala de colores arcoíris que aparece en una de las imágenes hacia el final del sitio, así que se ve bastante parecida, y la tengo colgada en la pared como decoración de 6 pies × 6 pies
  • Es un sitio bastante genial. Recomiendo subir un nivel y recorrer también las otras páginas
    Es material de hace 20 años, pero todavía tiene mucho contenido útil para varias cosas, especialmente si trabajas con shaders
  • Hace poco estuve jugando con este patrón en J, y se puede expresar así
    ~:"1/~&.#:i.2^8
    Se puede ver aquí: https://jsoftware.github.io/j-playground/bin/html2/#base64=b...
  • Acabo de leer https://news.ycombinator.com/item?id=42414817 y supongo que se puede decir que también descubrieron por casualidad la textura XOR