Psychedelic Graphics 0: Introdução

Psychedelic Graphics 0: Introdução

• Esta série apresenta como criar visuais psicodélicos para animações e jogos. Ela foi estruturada para ser compreensível mesmo sem conhecimento prévio de gráficos ou programação. Ter noções básicas de trigonometria e programação será útil.
• Espero que, por meio desta série, você consiga entender os fundamentos dos gráficos psicodélicos usados no vídeo. A maioria dos vídeos foi produzida com o Blender, mas as técnicas ensinadas nesta série podem ser facilmente adaptadas, e mais adiante entrarei em mais detalhes sobre o Blender.

O que é UV?

Modelo 3D

• Computação gráfica muitas vezes parece 3D, mas ao escrever código gráfico, frequentemente é preciso pensar em 2D. Se você criou uma forma bonita em um programa de modelagem 3D, na prática criou pontos flutuando no espaço (vértices) e conectou alguns deles para formar formas sólidas (faces).
• A maioria dos modelos 3D é vazia por dentro, e só conseguimos ver a superfície. O método padrão para aplicar cores a um modelo 3D é o mapeamento UV/texturização. Assim como uma projeção 2D da Terra parece um pouco esticada e comprimida, o mesmo acontece quando as cores de um modelo 3D são projetadas em 2D.

Pintura de textura

• Ao pintar uma textura, ela aparece no modelo 3D. A maioria dos softwares permite pintar diretamente no modelo 3D para colorir a textura de imagem.

Coordenadas UV

• Você pode pensar em UV como posição, isto é, coordenadas 2D. As coordenadas UV são definidas usando o espaço de (0, 0) até (1, 1). Um mapa UV é o dado que conecta a textura de imagem colorida às faces do modelo 3D.

Como o código gráfico funciona

Cor nos gráficos

• As cores em computação gráfica costumam ser representadas em RGB. Com a mistura de vermelho, verde e azul, é possível criar quase todas as cores que os humanos conseguem perceber. Em computação gráfica, a quantidade de vermelho, verde e azul normalmente varia de 0.0 a 1.0.

Cor do UV

• As coordenadas UV são convertidas em cores para ajudar na visualização e na solução de problemas. O primeiro valor do UV (valor X) é usado como vermelho, e o segundo valor (valor Y) como verde.

Ponto flutuante e vetores vec2, vec3

• float é um número decimal único. vec significa vetor, então vec2 é composto por dois números decimais e vec3 por três números decimais.

Estrutura de um programa gráfico

• Os gráficos precisam ser controlados de forma distribuída. O código não é executado uma vez para gerar todas as cores; em vez disso, ele é executado milhões de vezes para cada pequena parte da tela. Se você tem experiência com programação, essa é uma forma de pensar bem diferente.

• Agora você está pronto para começar a Parte 1. Na Parte 1, será possível ver como criar visuais interessantes apesar dessas restrições.

[GN⁺]

Comentários do Hacker News

• David Tristram foi um membro fundador do grupo de performance em computação gráfica Raster Masters, dos anos 1990, e produzia imagens sintéticas para acompanhar shows ao vivo de Grateful Dead, Herbie Hancock, Graham Nash e outros usando workstations da Silicon Graphics

  • Atualmente, trabalha principalmente em um ambiente de processamento de vídeo 2D usando Resolume Avenue e TouchDesigner
  • Hydra é um ambiente de live coding baseado em JavaScript bem legal para experimentar gráficos psicodélicos sem precisar ir para um nível baixo

• No passado, ele pesquisou formas de deformar coordenadas de textura UV, e hoje usa fragment shaders como os do ShaderToy

  • O processo de deslocar coordenadas de textura de acordo com um flow field é interessante
  • Também existe um método simples de aplicar uma força de "restauração" para que as coordenadas voltem à posição original
  • Combinando feedback e efeitos de deslocamento, é possível gerar movimento semelhante ao fluxo de fluidos

• É bom que seja fácil escrever shaders que processam imagens em HTML

  • Mesmo uma aproximação simples de um depth map já pode produzir resultados interessantes
  • No passado, ele trabalhou em um projeto usando WebGL para suavizar crossfades entre imagens

• Há muito interesse em recriar visualmente experiências psicodélicas

  • O artigo Rolling Hills explica como reproduzir alucinações visuais
  • Existem artistas que conseguem implementar muito bem visuais psicodélicos com tecnologia moderna

• No começo dos anos 1990, Todd Rundgren desenvolveu um app para Mac chamado Flowfazer, que ajudava os usuários a encontrar inspiração para criar

• As performances de Tipper e Fractaled Visions foram uma das descrições mais precisas de visuais psicodélicos

  • Os visuais da Fractaled Vision são complexos e ricos, causando admiração

• Ao escrever shaders em WebGL, ele está tentando implementar efeitos de câmera física

  • Isso ajuda a aprofundar o entendimento sobre gráficos, matemática, GPU, memória, CPU, animação e processamento de tempo

• A pesquisa de Jim Crutchfield sobre sistemas de video feedback fornece um sistema experimental útil para estudar dinâmicas espaciais e temporais complexas