Como Aprender Shaders?
por Vamoss
Publicado 4anos, 7mesesatrás
Este texto introduz o mundo dos shaders apontando o caminho para o seu aprendizado.
A imagem de capa foi criada por Iñigo Quílez, neste vídeo ele apresenta o processo de construção da imagem através de shaders.
O que são shaders?
Shader é o padrão para produção de imagens para filmes de animação, efeitos especiais(VFX), jogos, imagens super realistas e está por trás de alguns algoritmos utilizados em Inteligência Artificial, sua popularidade está relacionado à sua velocidade de processamento.
Temos shaders utilizados para renders - em computação gráfica render significa simplesmente gerar uma imagem. Existem dois tipos de shaders para render:
- Fragment Shaders - responsáveis por manipular pixels.
- Vertex Shaders - responsáveis por manipular vertices.
Há também shaders que não são utilizados para render, como o Compute Shader que são utilizados para processamentos de dados abstratos.
Por onde começar?
O ponto de partida busca entender a manipulação de pixels, sendo assim, o estudo deve ser orientado aos fragment shaders.
O The Book of Shaders, livro interativo e gratuito escrito por Patrício Gonzales e Jen Lower, traduzido para português por Lucas Mendonça, utiliza uma linguagem muito acessível para iniciantes, que vai do zero à operações mais complexas. O livro mistura teoria e prática ao possibilitar que os exemplos sejam manipulados no navegador.
O que torna os shaders especiais é a velocidade de processamento extremamente superior à outras técnicas para gerar imagens. Isso acontece por causa do processamento paralelo. O livro The Book of Shaders apresenta uma metáfora bastante interessante para explicar por que os shaders são rápidos?:
"Imagine a CPU do seu computador como um grande tubo (ou ducto) industrial, e cada tarefa como algo que passa por ele - como uma linha de produção." (...) "Cada tubo é também conhecido como thread."
"Em vez de ter alguns microprocessadores grandes e poderosos, ou tubos, é mais inteligente ter um monte de minúsculos microprocessadores rodando em paralelo ao mesmo tempo. Isso é o que a Unidade de Processamento Gráfico (Graphic Processor Unit ou GPU) é."
O desafio da matemática
A linguagem dos shaders é composta por estruturas simples, o que torna os shaders sofisticados são os conceitos matemáticos necessários para compreende-los.
Estudar shaders é uma boa razão para estudar matemática, pois os shaders possibilitam visualizar a matemática, ao traduzir formulas antes incompreendidas em efeitos visuais interessantes o estudo de matemática ganha um novo sentido de prazer, te dá um propósito essencial durante a jornada de aprendizado, propósito este que falta nas aulas do colégio e tornam o aprendizado de matemática uma tortura.
Posso dizer com segurança que eu pouco sabia de matemática antes de estudar shaders, e tive uma jornada autodidata e muito prazerosa utilizando o site do Khan Academy. O site apresenta conteúdo de diversas disciplinas para todas as idades. Porém o foco original do site era matemática, e sua didática combina vídeos e exercícios interativos. O aprendizado é gamificado, para cada atividade realizada você ganha pontos e pode observar seu progresso de forma concreta.
Para avançar nos estudos de shaders será necessário voltar nos conceitos de álgebra e trigonometria, talvez começando por aritmética, mas por último geometria e cálculo.
As vezes você pode sentir que não está conseguindo aprender, não desista, através da repetição, persistência e aplicação dos conceitos em shaders serão grandes aliados para superar os desafios.
Antes que você perceba, estará contaminado pela matemática, e perceberá que o mundo da matemática esteve a todo momento ao nosso redor, seu cérebro se configurará de outra forma ao passo que as formas vão gradativamente se tornando operações em sua mente também.
Aprendendo junto
A comunidade de pessoas que escrevem shaders é muito ativa, constituída majoritariamente por matemáticos e programadores. Mas artistas, como os responsáveis pelo The Book of Shaders, tem tornado esse conhecimento muito mais acessível.
O ShaderToy é uma comunidade de fragment shader muito amigável, repleta de códigos abertos que rodam no navegador, e composta por membros que muito comumente sugerem mudanças para otimizar o seu código. Não há nada de errado em copiar código de outras pessoas e fazer alterações neles, só não esqueça de dar o crédito apontando o autor e o link de onde o código foi extraído.
Uma maneira muito estimulante para criar shaders é buscar reproduzir imagens gráficas existentes, o artista Dave, mais conhecido como Bees & Bombs é uma ótima fonte de inspiração. Através dele me inspirei para criar meus primeiros shaders.
Virtuosismo
Há um virtuosismo presente na comunidade de shaders, nem todos estão preocupados com um código legível, muitas vezes você vai se deparar com variáveis de uma única letra, isso acontece porque há um apresso maior por códigos minimalistas. Há uma certa competição de reduzir o código de outras pessoas ao mínimo de caracteres possível. Essa prática não ajuda iniciantes aprender, mas ajuda pessoas mais fluentes olhar outras maneiras de resolver o mesmo problema.
Podemos perceber este mesmo virtuosismo ao observar os músicos profissionais realizando façanhas técnicas impressionantes em seus instrumentos. Ao darmos os primeiros passos enquanto aprendizes, podemos nos colocamos como músicos amadores. Não há nada de errado em se considerar amador, perceber a beleza desta palavra e compreender que precisamos amar o que fazemos, nos dará energia para superar bloqueios mentais como "eu nunca vou saber fazer isso".
DemoScene
As DemoScenes são eventos onde artistas-programadores exibem animações paramétricas executadas em tempo real, são muito comumente realizadas em festas onde exibe-se um apuro técnico elevado. A DemoScene é uma sub-cultura de arte computacional, e talvez o estado da arte+técnica deste meio, não coincidentemente os shaders predominam nestes eventos.
É uma ótimo local para se inspirar e ver o que há de mais sofisticado na utilização de shaders.
Outras ferramentas e materiais
O material abaixo é majoritariamente em inglês, se encaixa numa fase mais exploratória do aprendizado:
- Íñigo Quílez - Um dos autores do ShaderToy e também matemático responsável por diversas animações na Pixar. O site apresenta diversos artigos com conceitos avançados, não é o conteúdo mais acessível para quem está começando.
- NVScene - Canal do YouTube organizado pela NVidia - apresenta DemoScenes e ótimas palestras.
- Shdr Editor - De Thibaut Despoulain - editor simples de fragment e vertex shader.
- Shadershop - De Toby Schachman - abordagem interessante para visualizar matemática e funções GLSL. Esta página explica como a ferramenta funciona.
- VertexShaderArt - De Greggman - similar ao ShaderToy, possibilita também a criação de vertex shader.
- GLSL Sandbox - Criado por diversos programadores, também se assemelha ao ShaderToy.
- Interactive Shader Format - Originalmente criado para o software de VJ VDMX, é uma maneira interativa de criar shaders GLSL.
Agradeço especialmente Tiago Rezende por ter sido um grande mestre nessa jornada de aprendizado, onde desde 2012 me orientou por esse caminho.