Programación de animación SDF de Rick y Morty

Aprender programación de shaders

• Creación de la animación de Rick y Morty: Esta animación fue creada con 240 líneas de código y explica cómo hacer animaciones para video, videojuegos o diversión usando shaders de GPU y campos de distancia con signo, sin bibliotecas ni imágenes.
• Editor de live coding: Puedes ejecutar y modificar los ejemplos mediante el editor de live coding integrado en la página.

Fundamentos de shaders

• Uso de GLSL: El código está escrito en el lenguaje de sombreado de OpenGL (GLSL) y requiere una función color_for_pixel que se ejecuta en la GPU para cada píxel.
• Determinación del color de los píxeles: La función que determina el color de cada píxel en función del tiempo es la base para crear la animación.

Dibujar formas básicas

• Dibujar un círculo: Se puede dibujar un círculo visualizando la distancia desde el centro del píxel.
• Campo de distancia con signo (SDF): La distancia dentro de la forma se muestra como negativa y fuera de ella como positiva, lo que permite aplicar diversos efectos.

Varias funciones de formas

• Curvas Bézier, estrellas y rectángulos redondeados: Se pueden dibujar formas complejas usando distintas funciones SDF.

Dibujar a Rick

• Recrear el rostro: Para recrear el rostro de Rick en código se pasó por mucho ensayo y error, y se usó una imagen de referencia para mejorar la precisión.
• Agregar contornos: Se pueden dibujar los contornos de una forma usando funciones de distancia con signo.

Combinar formas y reflejarlas

• Combinación de formas: Al combinar dos formas para dibujar contornos se usa la función min().
• Reflejo: Se puede hacer una forma simétrica respecto a un eje usando abs().

Técnicas avanzadas

• Distorsión de dominio: Se puede distorsionar una forma desplazando aleatoriamente la posición de los píxeles.
• Efectos de animación: Al animar la distorsión de dominio se pueden crear efectos visuales únicos.

Dibujar dientes infinitos

• Uso de parábolas: Se puede dibujar la forma de los dientes usando parábolas y evitar repetir código al dibujar varios dientes.

Este artículo explica cómo crear animaciones complejas mediante programación de shaders y muestra que es posible obtener resultados creativos usando diversas técnicas y herramientas.

[GN⁺]

Comentarios de Hacker News

• Trabajo realmente genial y una publicación excelente. Para un anti-aliasing suave en SDF, conviene usar aastep

  • Enlace de referencia: glsl-aastep GitHub

• El desarrollo de shaders está realmente en otro nivel. El proceso de cambiar valores de punto flotante y ver el resultado de inmediato es muy satisfactorio

• Muy buena publicación. Recomiendo la lista de reproducción relacionada de YouTube de Inigo Quilez

  • Enlace de referencia: YouTube Playlist

• La calidad del trabajo, la calidad de la explicación y el reto que plantea al lector están todos al más alto nivel. Gracias por compartirlo

• Fue una introducción a GLSL muy bien estructurada. Me da curiosidad cómo sería en Vulkan o WebGPU/WebGL

• Haber completado esta animación durante 8 meses refleja una paciencia enorme

• Me pregunto si durante el proceso de desarrollo hizo trabajo iterativo ajustando valores decimales, o qué editor usó. Encontrar los valores decimales correctos en 240 líneas puede tomar mucho tiempo

• El nivel de acabado de la página es sorprendente

• La programación de shaders está en otro nivel. Es asombroso el esfuerzo y la atención al detalle que implica hacer una animación. Requiere mucho más trabajo manual que el desarrollo tradicional

• Es difícil expresar lo impresionante que es este trabajo