Gráficos psicodélicos 0: introducción

 (benpence.com)
1 puntos por GN⁺ 2025-01-25 | 1 comentarios | Compartir por WhatsApp
  • Como introducción para crear visuales psicodélicos para animaciones y juegos, parte desde el cálculo de UV y color para que puedas seguirla sin conocimientos previos
  • Para aplicar color a un modelo 3D, la clave es entender el mapeo UV/texturizado, que conecta áreas de una imagen 2D con superficies 3D
  • Las coordenadas UV son dos valores en el rango de 0.0 a 1.0 que indican una posición sobre la textura; (0.5, 1.0) corresponde al punto 50% horizontal y 100% vertical
  • En gráficos, el color suele expresarse con tres valores RGB, y si se convierten X e Y de UV en rojo y verde, el cambio de coordenadas se ve como un gradiente de color
  • El código de ejemplo determina el color mediante cálculos independientes por píxel sobre una sola superficie 3D que cubre toda la pantalla, por lo que requiere una forma de pensar distinta a la programación habitual

Objetivos y supuestos de la serie

  • La serie Gráficos psicodélicos trata sobre cómo crear visuales psicodélicos que puedan usarse en animaciones y juegos
  • No requiere conocimientos previos de gráficos ni de programación, aunque tener experiencia con trigonometría y programación ayuda a entenderla
  • El objetivo es aprender los principios básicos de los gráficos psicodélicos usados en el ejemplo en video
  • La mayoría de los videos se hicieron con Blender, pero las técnicas de esta serie son fáciles de trasladar a otros entornos, y Blender se aborda en la parte 3
  • La parte 0 y la parte 1 avanzan hacia ejemplos que se ejecutan en la web

Modelos 3D y mapeo UV

  • Un modelo 3D es una superficie hecha de puntos y caras

    • Los gráficos por computadora se ven como 3D, pero al escribir código gráfico muchas veces hay que pensar en 2D
    • Cuando se crea un modelo en un programa de edición 3D, en realidad se crean vértices (vertices), que son puntos flotando en el espacio, y caras (faces), que conectan esos vértices
    • Un modelo es una superficie hueca, y lo que se ve en pantalla es solo la superficie
    • Casi todas las formas 3D en juegos y animación se reducen a esos puntos y caras
    • Incluso los modelos que se ven suaves suelen tener tantos puntos y caras que es difícil distinguir los bordes

  • Una textura es una imagen 2D que se pega sobre una superficie 3D

    • Como forma estándar de agregar color a una superficie 3D se usa el mapeo UV/texturizado
    • Así como una proyección 2D de la Tierra puede verse estirada o deformada en algunas zonas, una imagen desplegada en 2D para colorear un modelo 3D también puede distorsionarse
    • La imagen 2D desplegada es una textura (texture) que contiene los colores que luego se aplicarán a la superficie del modelo 3D
    • Una forma de crear una textura de imagen es hacer un archivo de imagen vacío y luego decidir qué parte de esa imagen usará cada cara del objeto 3D
    • Distintas caras 3D pueden compartir la misma región de la textura; en cuerpos simétricos, es común pintar solo un lado y asignar la misma región a ambas caras
    • La región de textura que usa cada cara no necesita tener el mismo tamaño ni la misma proporción que la cara 3D real

Pintura de texturas y coordenadas UV

  • Si pintas sobre la textura, aparece en el modelo

    • Todo lo que se pinta sobre la textura se muestra sobre el modelo 3D
    • La mayoría del software ofrece una función que, al pintar directamente sobre el modelo 3D, colorea por ti la textura de imagen correspondiente

  • Las coordenadas UV son posiciones 2D sobre la textura

    • La región de textura reservada para cada cara de un modelo 3D es un mapa UV, es decir, datos que conectan una parte de la textura de imagen con el modelo 3D
    • UV puede verse como coordenadas 2D que indican una posición sobre la textura de imagen
    • Cada cara 3D se define mediante varios puntos, y al ubicar esos puntos sobre la textura de imagen, cada punto obtiene coordenadas UV
    • En (0.5, 1.0), el primer valor 0.5 indica el punto medio en la dirección horizontal, y el segundo valor 1.0 indica la parte superior en la dirección vertical
    • Ambos valores UV suelen estar entre 0.0 y 1.0, y normalmente se usa el espacio de coordenadas dentro del rectángulo delimitado por (0, 0) y (1, 1)
    • Usar 0 y 1 en lugar de posiciones de píxel permite expresar cuánto te moviste a izquierda/derecha y arriba/abajo como una proporción; si se multiplica por 100, puede entenderse como porcentaje
    • Los nombres reales de las dos dimensiones son U y V; se usa el nombre UV porque X, Y y Z ya se usan para posiciones 3D

Color y tipos de datos en gráficos

  • RGB expresa el color con tres valores

    • En gráficos por computadora, el color suele expresarse como RGB, es decir, rojo, verde y azul
    • La cantidad de rojo, verde y azul de un color individual suele ser un valor entre 0.0 y 1.0
    • El rojo se expresa como (1.0, 0.0, 0.0), el negro como (0.0, 0.0, 0.0) y el blanco como (1.0, 1.0, 1.0)
    • La notación hexadecimal como 0xff0000, usada en gráficos web, representa la misma información de otra manera

  • Si ves UV como color, ves las coordenadas

    • Al visualizar coordenadas UV, por convención se usa el primer valor, X, como rojo; el segundo valor, Y, como verde; y el azul se deja en 0.0
    • UV (0, 1) se convierte en el color (0.0, 1.0, 0.0), por lo que se ve verde
    • UV (1, 0) se convierte en el color (1.0, 0.0, 0.0), por lo que se ve rojo
    • Si se colorea un rectángulo según su posición UV, cuanto más hacia arriba a la izquierda, más fuerte es el verde; y la esquina inferior derecha se vuelve roja
    • La esquina inferior izquierda se vuelve negra porque tanto rojo como verde son 0, y la esquina superior derecha se vuelve amarilla porque contiene tanto rojo como verde

  • float, vec2, vec3

    • float es un número decimal, es decir, un número de punto flotante
    • vec significa vector; vec2 es un par de dos números decimales, y vec3 es un conjunto de tres números decimales
    • Como un color RGB tiene tres valores —rojo, verde y azul— se expresa con vec3
    • Como UV tiene dos valores, X e Y, corresponde a vec2

Cómo se ejecuta el código gráfico de ejemplo

  • Los ejemplos de código de esta serie no usan un modelo 3D separado, sino una sola superficie 3D que ocupa toda la pantalla
  • No agregan color mediante una textura de imagen; el código decide directamente el color sobre la textura de imagen
  • El flujo de procesamiento es el siguiente
    • La cámara de la escena 3D calcula qué superficie 3D es visible
    • Usando la región de textura reservada para cada cara, es decir, el mapeo UV, se calculan las coordenadas UV
    • Se pasa al código información como las coordenadas UV calculadas y la posición 3D
    • El código determina el color de esa ubicación
  • Puede entenderse que este procesamiento ocurre millones de veces por segundo
  • El código gráfico no dibuja directamente una línea continua de un punto de la pantalla a otro; se parece más a responder qué color tiene una ubicación cuando se selecciona esa ubicación
  • El código que escribes no se ejecuta una sola vez para crear todo el color, sino que se ejecuta para cada píxel, una pequeña parte de la pantalla
  • Debido a la limitación de no poder revisar el color de otras áreas de la pantalla, la programación gráfica requiere una forma de pensar distinta incluso si ya tienes experiencia con programación general
  • La parte 1 continúa con cómo crear visuales interesantes dentro de estas limitaciones

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-01-25
Comentarios en Hacker News

  • Soy David Tristram. Fui miembro fundador de Raster Masters, un grupo de performance de gráficos por computadora de los años 90, y como dijo @hopkins, hacía visuales sintéticos para música en vivo de Grateful Dead, Herbie Hancock y Graham Nash usando avanzadas workstations de Silicon Graphics
    Después de varios cambios, ahora trabajo principalmente en Resolume Avenue y TouchDesigner, que son entornos de procesamiento de video 2D. Estos enlaces me inspiran

    • Me da curiosidad quiénes eran los otros miembros de Raster Masters y qué anécdotas locas vivieron en shows de Grateful Dead
      Hoy en día hasta me estresa que en una presentación sea una apuesta conectar la laptop al proyector y ver si da imagen, así que también me pregunto qué proyectores, calibración y preparación hacían falta en esa época para mostrar video SGI en vivo de alta resolución en una pantalla sobre la banda
    • Me pregunto si hay enlaces a trabajos que se puedan ver
    • Creo que vi su trabajo en algunos conciertos de los Dead por ahí de 1992

  • Si quieres experimentar con gráficos psicodélicos sin irte demasiado a bajo nivel, hydra está bastante bien. Es un entorno de live coding basado en JavaScript y la curva de aprendizaje es accesible

    • Me pregunto si hay alguno que también soporte entrada de música. Me encantaban los plugins de visualización en la época de Winamp, pero hoy en día parece que ese arte ya murió
    • En dwitter.net también hay muchos ejemplos de gráficos psicodélicos hechos en JavaScript

  • Sobre el documento original y las coordenadas UV, antes exploraba mucho maneras de desplazar de forma interesante las coordenadas de textura UV de cada vértice de una malla rectangular
    En ese entonces usábamos color por vértice; hoy probablemente usaría shaders de fragmento (píxel), como los que hay en ShaderToy. Una técnica especialmente interesante es advectar las coordenadas de textura siguiendo un flow field. Basta usar cualquier campo vectorial 2D y aplicar desplazamientos repetidos a cada coordenada. Incluso con métodos explícitos imprecisos, el resultado se ve bien
    Cuando las coordenadas se deforman demasiado, la imagen deja de ser reconocible, así que una solución simple es aplicar una fuerza de “restauración” que haga que las coordenadas vuelvan a su posición original. Entonces rebotan de regreso a su lugar, como cuando estiras una lámina de espejo de papel aluminio
    Ahora uso retroalimentación junto con este tipo de efectos de desplazamiento. Si aplicas desplazamientos muy pequeños repetidamente, el movimiento termina pareciéndose bastante a un flujo de fluidos

  • Me gusta que en HTML sea fácil usar shaders que operan sobre imágenes. Mi nivel en esta área es normal, pero me divierte ver hasta dónde lo llevan otras personas
    Incluso si solo das una aproximación simple de mapa de profundidad, el resultado se vuelve mucho más interesante. Hace unos años hice un proyecto con una técnica parecida para hacer crossfade suave entre imágenes con “efectos interesantes”, y hay texto y demo
    https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...

  • Honestamente, el artículo de Rolling Hills que acompaña este texto me parece mucho más interesante
    En particular, me impresionó la parte a mitad del texto donde aplican el siguiente código a una imagen estática
    uv.x = uv.x + sin(time + uv.x * 30.0) * 0.02;
    uv.y = uv.y + sin(time + uv.y * 30.0) * 0.02;
    Habiendo tenido varias experiencias psicodélicas, diría que, al menos en dosis bajas no heroicas, esto se parece bastante a la experiencia visual real. Si las ondas fueran un poco más lentas y el rango del movimiento un poco menor, se parecería todavía más
    Me interesa más recrear las alucinaciones visuales inducidas por sustancias psicodélicas que hacer visuales impactantes para shows, aunque respeto a los artistas de ambos lados
    Hay un artista que hace videos psicodélicos excelentes con herramientas modernas, pero no logro recordar el nombre de su cuenta. Si lo encuentro, lo dejo abajo
    Comparándolo con esta parte del artículo de Rolling Hills, me recuerda a la escena del té de hongos en Midsommar, especialmente la parte de la corteza de los árboles. Ese efecto de que las cosas “respiran” y fluyen es una experiencia visual realmente distintiva, y me gusta ver distintas formas de implementarlo

    • Puede que no sea la cuenta que mencionabas, pero este canal de YouTube recrea muy bien la experiencia visual y además cubre otros efectos
      Los videos de mirar la naturaleza, la forma en que empiezan a formarse patrones geométricos y el efecto de “respiración” son muy potentes. Cubre varias sustancias, y muestra un rango amplio: desde superficies que apenas respiran o pulsan ligeramente hasta los “mundos” geométricos completos que aparecen con sustancias como DMT
      https://www.youtube.com/@josikinz

  • A principios de los 90, Todd Rundgren lanzó la app para Mac Flowfazer. No simulaba la experiencia, pero ayudaba a mantener el flujo al desviar la atención hacia otra cosa
    Algunas personas también la usaban como guía para su propia creación
    [1] https://grokware.com/
    [2] https://m.youtube.com/watch?v=3Z4X4FmIhIw
    En ese entonces era la era de los salvapantallas y la animación por paleta

  • Si te gusta este tipo de cosas y tienes la oportunidad de ver a Fractaled Visions encargándose de los visuales en un show del músico Tipper, será una experiencia increíble
    Ha sido la representación visual más precisa que he visto hasta ahora de artefactos psicodélicos. El año pasado vi un show donde colaboraban y fue la mejor experiencia artística de mi vida. Los visuales de Fractaled Visions tenían una riqueza y complejidad casi difíciles de creer
    Incluso sabiendo bastante de programación de shaders y temas parecidos, hubo varios efectos que me hicieron pensar: “¿pero cómo demonios hicieron eso?”. El video del set de abajo no captura por completo la experiencia, pero sí transmite el ambiente. Verlo en 4K a 60 fps fue otro nivel por completo
    https://youtu.be/qMcqw12-eSk?si=R5mCaIbR01w3Tbyv

  • Aquí hace falta un enlace a ShaderToy: https://www.shadertoy.com

  • Esto me hace pensar en el viejo clásico de Flash en este campo, Flashback.swf. Aquí está un render en video: https://m.youtube.com/watch?v=KaSqrx93rS0

    • En la época de Flash conocí al grupo de música electrónica Shpongle gracias a este video
      Esta animación usaba un remix de Divine Moments of Truth, probablemente la versión “Russian Bootleg”. Ya escuchaba música electrónica antes, pero cuando oí por primera vez este tipo de electrónica del género, de verdad me voló la cabeza

  • Esta semana, mientras trabajaba, estuve escribiendo shaders de WebGL y ajustando detalles para que parecieran efectos de cámara física
    Pero a veces, cuando algo sale mal, termina apareciendo un resultado parecido a lo que muestra este post, y la verdad es mucho más divertido que los efectos de imagen estándar
    Puede que los casos en que se pueda usar visualmente sean limitados, pero jugar con los modelos que hemos construido sobre cómo funcionan los gráficos por computadora es una muy buena forma de aprender cada sistema. Puedes aprender no solo de gráficos, sino también de las matemáticas básicas de la programación, de cómo funciona la GPU y su relación con la memoria y la CPU, de cómo funciona el ojo, y de cómo manejar la animación y el tiempo