Arte que move: Criando materiais animados com Shader Graph
No Unity 2018.2, adicionamos a entrada “Posição do vértice” ao Shader Graph, permitindo que você ajuste e anime suas malhas. Nesta postagem do blog, demonstrarei como você pode criar seus próprios shaders de animação de vértice e fornecerei alguns exemplos comuns, como um shader de vento e um de água.
Se você é novo no Shader Graph, pode ler a postagem do blog de Tim Cooper para saber mais sobre os principais recursos ou assistir à palestra "Introdução ao Shader Graph" de Andy Touch no canal do Unity no YouTube.
Esta cena não usa texturas ou recursos de animação; tudo o que você vê é colorido e animado usando o Shader Graph.
Os shaders são um aspecto incrivelmente poderoso do pipeline de renderização, permitindo um alto grau de controle sobre como nossos ativos de cena são exibidos. Usando uma série de entradas e operações, podemos criar shaders que alteram as diversas propriedades de renderização dos nossos ativos, como a cor e a textura da superfície, e até mesmo as posições dos vértices da malha. Você também pode combinar tudo isso em animações complexas e ricas. Esta postagem do blog demonstrará como você pode começar com animações de vértices, apresentar o conceito de uso de máscaras e propriedades e terminar explicando como criamos os shaders para a Cena da Ilha Deserta.
Clonar repositório do GitHub ou baixar .Zip do GitHub
Baixe o projeto de amostra Desert Island Scene para começar a experimentar e interagir com os shaders você mesmo! Este projeto contém tudo o que você precisa para começar a usar o Shader Graph. Certifique-se de iniciar o projeto usando o Unity versão 2018.2 ou superior.
Cada shader na Cena da Ilha Deserta foi criado pensando na personalização, então sinta-se à vontade para começar a brincar com os valores do shader no Inspetor! Cada objeto também tem um arquivo predefinido que retornará os valores padrão.
Este trabalho está licenciado sob a Licença Creative Commons Atribuição 4.0 Internacional.
Para usar o Shader Graph, seu projeto deve atender aos seguintes requisitos:
- Executando no Unity versão 2018.2 ou superior.
- Usando os novos pipelines de renderização Lightweight ou High Definition (LWRP é sugerido para experimentação devido aos tempos de compilação mais rápidos).
- Tenha o pacote Shader Graph instalado no Gerenciador de Pacotes.
Para instalar o Shader Graph, crie ou atualize um projeto para a versão 2018.2 ou superior, navegue até Janela > Gerenciador de pacotes > Tudo, encontre o Shader Graph na lista e clique em instalar.
Se seus materiais não estiverem sendo animados na visualização de Cena, certifique-se de ter a opção Materiais Animados marcada:
Está criando algo sofisticado com o Shader Graph?
Você pode visualizar os materiais animados clicando na pequena imagem suspensa no canto superior esquerdo da visualização da cena
#UnityTips #Unity3D
Antes de começarmos a usar matemática sofisticada para mover coisas, precisamos entender o que estamos movendo.
Uma malha na cena tem quatro tipos de espaços:
- Objeto: Posição do vértice em relação ao pivô da malha.
- Visualizar: Posição do vértice em relação à câmera.
- Mundo: Posição do vértice em relação à origem do mundo.
- Tangente: Aborda alguns casos de uso especiais, como iluminação por pixel.
Você pode selecionar qual Espaço deseja afetar no menu suspenso do nó Posição .
Usando o nó Dividir , podemos selecionar qual eixo queremos afetar.
O nó Split gera saídas para quatro canais, os três primeiros correspondem ao nosso eixo Transform (R=X, G=Y, B=Z). No exemplo acima, eu dividi o eixo y do objeto e adicionei 1, movendo nosso objeto para cima em 1 em seu próprio eixo.
Às vezes você pode querer mover o objeto no espaço do mundo. Para fazer isso, selecione Mundo no nó Posição e, em seguida, converta a saída de volta para o espaço do objeto usando o nó Transformar .
Agora que estabelecemos como mover uma malha, geralmente é útil saber como podemos restringir o efeito.
Ao usar nós como Lerp, podemos mesclar dois valores. A entrada T é o valor de controle para o Lerp. Quando nossa entrada T é 0 (visualizada como preta), o canal A é usado. Quando nossa entrada é 1 (visualizado como branco), o canal B é usado. No exemplo abaixo, o controle deslizante é usado para mesclar as duas entradas. Qualquer um dos exemplos a seguir pode ser usado no lugar do controle deslizante.
Com uma textura preta e branca, podemos usar formas detalhadas para empurrar nossa malha. No exemplo acima, você pode ver como o branco representa a altura máxima do nosso alcance, enquanto o preto não representa nenhum efeito na posição da malha. Isso ocorre porque o preto tem o valor numérico 0 e, portanto, adicionar 0 à posição da malha não a move.
Para usar uma textura com posição de vértice, você deve usar o nó Sample Texture 2D LOD em vez do nó típico Sample Texture 2D . Texturas são particularmente úteis se você precisa de uma máscara com um formato único ou um certo grau de queda.
Embora semelhante a uma máscara de textura, com uma máscara UV você pode escolher qual parte da malha deseja afetar com base no UV Unwrap. Na captura de tela acima, estou usando o eixo u do UV para criar um gradiente da esquerda para a direita. Para compensar o gradiente, use um nó Adicionar ; para aumentar a intensidade, use um nó Multiplicar ; e para aumentar a queda, use um nó Potência .
Cada vértice armazena uma unidade de informação do Vector3 que chamamos de Cor do Vértice. Usando o pacote Poly Brush , podemos pintar cores de vértices diretamente dentro do editor. Como alternativa, você pode usar um software de modelagem 3D (como 3ds Max, Maya, Blender, 3D Coat ou Modo) para atribuir cores aos vértices. Vale ressaltar que, por padrão, a maioria dos softwares de modelagem 3D exportará modelos com o valor máximo de RGB atribuído a cada vértice.
Na captura de tela acima, o nó Vertex Colour é dividido no canal vermelho (R) e então conectado ao canal T do nó Lerp , agindo como uma máscara. O canal A do nó Lerp é usado quando a entrada é 0, enquanto o canal B é usado quando a entrada é 1. Na prática, a configuração acima só adicionará 1 ao eixo y se os vértices tiverem a cor vermelha atribuída.
Ao usar o nó Vetor Normal , podemos mascarar uma entrada pela orientação das faces da malha. Novamente, o nó Split nos permite selecionar qual eixo queremos afetar (R=X, G=Y, B=Z). Na captura de tela acima, eu mascarei usando o eixo y, de modo que apenas as faces voltadas para cima sejam positivas. É importante usar um nó Clamp para descartar quaisquer valores que não estejam entre 0 e 1.
Esta série de nós mascara uma entrada se a posição do objeto estiver acima da posição mundial 0 no eixo y.
Ao criar Shaders, pode ser difícil obter os valores de entrada corretos para o efeito desejado. Por esse motivo, e para personalização posterior com Prefabs e presets, é importante usar propriedades.
As propriedades nos permitem modificar os valores do Shader após a compilação do Shader. Para criar uma propriedade, clique no símbolo + no Blackboard (mostrado à direita). Existem seis tipos de propriedades:
- Vetores (1 a 4): Uma sequência de valores, com a opção de um controle deslizante para Vector1.
- Cor: Valores RGB com um seletor de cores e uma versão HDR opcional.
- Texture2D (e Matriz Texture2D): Uma amostra de textura 2D
- Textura 3D: Uma amostra de textura 3D
- Cubemap: Um exemplo de Cubemap gerado
- Boolean: Uma opção de ligar ou desligar. Equivalente a 0 ou 1.
O Shader de bandeira projeta uma onda senoidal no espaço do objeto através da bandeira, usando uma máscara UV para manter o lado esquerdo parado.
Uma máscara UV invertida e então multiplicada contra si mesma para criar um gradiente suave no eixo y. Isso é usado para dobrar o centro da bandeira para longe do remo.
Uma onda senoidal do espaço do objeto é gerada, com propriedades para controlar a amplitude, frequência e velocidade da onda. A onda é mascarada por uma máscara UV no eixo x para manter o lado esquerdo da bandeira parado.
Ao emitir um Gradient Noise em uma função Step e depois no Alpha Clip Threshold, podemos descartar alguns pixels para rasgar a bandeira.
O Wind Shader usa o Gradient Noise do espaço mundial ao longo de um único eixo para empurrar e puxar suavemente as folhas e a grama.
Usando a posição mundial, colocamos um Ruído de Gradiente nos eixos y e x. Usando um Vector2, podemos controlar a velocidade e a direção em que ele é deslocado.
As propriedades são usadas para controlar a densidade e a resistência do deslocamento. Subtrair 0,5 do Ruído de Gradiente garante que a Malha seja igualmente empurrada e puxada.
Uma máscara UV é usada para manter a base das folhas e da grama estacionárias. Por fim, um nó Transformar é usado para converter a posição do mundo em posição do objeto.
Com este Shader, calculamos a distância entre a câmera e o molusco e usamos isso como uma máscara para girar a metade superior.
Ao inserir a posição do GameObject e a posição da câmera no nó Distância , podemos criar uma máscara. O nó Um Menos inverte a distância para que tenhamos um valor positivo quando estivermos perto do molusco. O nó Clamp descarta quaisquer valores acima de 1 e abaixo de 0.
Esta máscara UV gira apenas a parte superior da concha, mas na maioria dos casos uma máscara de cor de vértice seria mais fácil e flexível.
Um nó Lerp é usado para mesclar entre o fechamento e a abertura do clam. A rotação é aplicada aos eixos y e z do GameObject. Girando-o em torno do eixo x.
Neste Shader, estamos usando uma onda senoidal gerada no eixo do objeto para fazer o peixe balançar. Em seguida, mascaramos a cabeça do peixe para que ela fique parada.
Gere uma onda senoidal no espaço do objeto ao longo dos eixos y e z, com propriedades controlando a frequência e a velocidade da onda.
Como estamos usando tanto o eixo x quanto o eixo y, o peixe oscila ao longo de sua largura e altura.
Multiplique a saída da onda senoidal para controlar a amplitude/distância/força da oscilação e adicione-a ao eixo x do objeto.
Use um nó Lerp para mascarar a frente do peixe usando o eixo x do canal UV. Ao usar um nó de energia com uma propriedade, podemos empurrar o efeito de oscilação para a parte de trás do peixe.
Por fim, temos o Shader oceano! Este Shader desloca a parte superior da malha usando três ondas senoidais de diferentes escalas e ângulos. Essas ondas senoidais também são usadas para gerar as cores dos vales e pontas das ondas.
Três ondas senoidais separadas são geradas no espaço mundial, cada uma usando propriedades para controlar a amplitude, frequência, velocidade, convergência e rotação das ondas.
As três ondas senoidais são então combinadas com dois nós Add e multiplicadas por um gradiente de escala mundial para dividir a altura das pontas das ondas. Depois disso, as ondas combinadas são adicionadas à posição do objeto.
Duas máscaras de vértice são usadas para primeiro restringir as ondas ao topo do domo e, depois, para empurrá-las de volta para baixo quando a espuma é pintada.
Ao dividir o eixo x e o eixo z, geramos ondas em duas direções. Os dois multiplicadores são usados para definir a influência de cada onda. Por exemplo, multiplicar o canal Z por 0 produziria uma onda senoidal exclusivamente no eixo x.
Dividir um nó de Posição Mundial nos eixos x e z e então combiná-los em um Vector2 nos dá um espaço UV no espaço mundial. Isso orienta o Ruído Gradiente de forma plana em todo o mundo. Ao adicionar essa saída ao tempo, compensamos as ondas senoidais, ajudando a quebrar as linhas retas.
O nó seno usa o espaço e o tempo do mundo para gerar uma onda senoidal simples; para fazer as pontas da onda, usamos um nó absoluto para inverter os valores negativos. O nó Um Menos então inverte esses valores para que as pontas das ondas fiquem no topo.
Se você quiser saber como começar a usar o Shader Graph, a palestra de Andy Touch no GDC é um ótimo lugar para começar. Se você estiver procurando por outros exemplos de Shader Graph, Andy também tem uma Biblioteca de Exemplos disponível no GitHub.
Para obter documentação detalhada sobre o Shader Graph, incluindo descrições de cada nó, acesse o Shader Graph Developer Wiki no GitHub. Participe da conversa no nosso fórum de prévias experimentais de gráficos ! E, por fim, se você estiver fazendo algo legal com o Shader Graph, adoraria ver! Sinta-se à vontade para entrar em contato comigo no Twitter @John_O_Really.