Programação de animação SDF de Rick and Morty

Aprendendo programação de shaders

• Criação da animação de Rick e Morty: esta animação foi feita com 240 linhas de código e explica como criar animações para vídeo, videogames ou por diversão usando shaders de GPU e campos de distância com sinal, sem bibliotecas nem imagens.
• Editor de código ao vivo: é possível executar e modificar os exemplos por meio do editor de código ao vivo incorporado na página.

Fundamentos de shaders

• Uso de GLSL: o código é escrito em OpenGL Shading Language (GLSL), e é necessária uma função color_for_pixel executada na GPU para cada pixel.
• Determinação da cor dos pixels: a função que define a cor de cada pixel ao longo do tempo é o núcleo da criação da animação.

Desenhando formas básicas

• Desenhando círculos: é possível desenhar círculos visualizando a distância ao centro do pixel.
• Campos de distância com sinal (SDF): a distância dentro da forma é representada como negativa, e fora dela como positiva, permitindo aplicar vários efeitos.

Várias funções de formas

• Curvas de Bézier, estrelas e retângulos arredondados: é possível desenhar formas complexas usando várias funções SDF.

Desenhando Rick

• Recriando o rosto: para reproduzir o rosto de Rick em código, foram necessárias muitas tentativas e erros, e imagens de referência foram usadas para aumentar a precisão.
• Adicionando contornos: é possível desenhar contornos das formas usando funções de distância com sinal.

Combinando formas e espelhamento

• Combinação de formas: ao combinar duas formas para desenhar contornos, usa-se a função min().
• Espelhamento: com abs(), é possível tornar a forma simétrica em relação a um eixo.

Técnicas avançadas

• Distorção de domínio: é possível distorcer formas aplicando deslocamentos aleatórios à posição dos pixels.
• Efeitos de animação: ao animar a distorção de domínio, é possível criar efeitos visuais únicos.

Desenhando dentes infinitos

• Uso de parábolas: é possível desenhar formatos de dentes usando parábolas e evitar duplicação de código ao criar vários dentes.

Este texto explica como criar animações complexas com programação de shaders e mostra que é possível obter resultados criativos usando várias técnicas e ferramentas.

[GN⁺]

Comentários no Hacker News

• Trabalho realmente muito legal e excelente post. Para um antialiasing suave em SDF, vale usar aastep

  • Link de referência: glsl-aastep GitHub

• Desenvolvimento de shaders é realmente outro nível. O processo de mudar números de ponto flutuante e ver o resultado imediatamente é muito satisfatório

• Post muito bom. Recomendo a playlist relacionada do Inigo Quilez no YouTube

  • Link de referência: YouTube Playlist

• A qualidade do trabalho, a qualidade da explicação e o desafio proposto ao leitor estão todos no mais alto nível. Obrigado por compartilhar

• Foi uma introdução ao GLSL muito bem estruturada. Fico curioso para saber como isso é em Vulkan ou WebGPU/WebGL

• Completar essa animação ao longo de 8 meses reflete uma paciência enorme

• Fico curioso se, durante o desenvolvimento, houve um trabalho iterativo de ajustar valores decimais ou qual editor foi usado. O processo de encontrar os valores decimais adequados em 240 linhas pode consumir bastante tempo

• O nível de acabamento da página é surpreendente

• Programação de shaders é outro nível. É impressionante o esforço e a atenção aos detalhes necessários para fazer uma animação. Dá muito mais trabalho manual do que desenvolvimento tradicional

• É difícil expressar o quão impressionante este trabalho é