Como criar shaders de natureza com o Shader Graph no 2022 LTS

Neste blog, exploramos como criar dois shaders de natureza distintos usando o Universal Render Pipeline (URP) no 2022 LTS. Também examinamos mais de perto um sombreador de água estilizado e um sombreador de areia semirrealista. Os ativos são lançados com as novas cenas de amostra URP 3D.

Os efeitos visuais parecem complexos à primeira vista, mas vamos nos aprofundar no processo de pensamento baseado em design que está por trás desses recursos e abordar o detalhamento passo a passo das técnicas que dão vida a eles. Vamos explorar os meandros do desenvolvimento de sombreadores e criar sombreadores naturais impressionantes.

O objetivo, conforme mostrado no vídeo acima, é criar um riacho estilizado que corre no meio de uma cena de jardim em estilo japonês. Com base no restante do ambiente, a atmosfera é tranquila e zen, e o estilo de arte é mais animado do que fotorrealista.

Pelo terreno incorporado na cena, a água é uma combinação de duas partes: uma cachoeira e um riacho que passa sob a ponte. As cenas aquáticas do Studio Ghibli são muito inspiradoras e frequentemente apresentam três elementos distintos:

1. Linhas de fluxo que ajudam a estabelecer o fluxo da água

2. Destaques nas bordas para mostrar a interação da água com o terreno ao redor

3. Efeitos de espuma para ajudar a vender cascatas ou cachoeiras

O sombreador de água final usará todos esses elementos. Agora, vamos explorar os detalhes de como obter esse visual.

A cachoeira tem duas malhas distintas: a malha primária da cachoeira e um plano em forma de disco que gera ondulações. Usando um sombreador separado e sem iluminação para as ondulações, você pode colocar um nó de ruído em mosaico e usá-lo como o valor alfa do sombreador. Isso oculta as áreas restantes, garantindo que as ondulações apareçam no local desejado.

A parte mais importante é garantir que cada área da malha possa executar comportamentos diferentes. Você pode conseguir isso pré-pintando as malhas com cores de vértice nos canais vermelho (R), verde (G) e azul (B). As cores dos vértices são então usadas como máscaras para separar as operações em determinadas áreas.

No Shader Graph, use o Vertex Color Node para acessar os dados de cor do vértice pré-pintado. Como visto no lado direito da imagem abaixo, você pode usar o canal vermelho na cor do vértice como seu valor T para interpolar (lerp) entre a parte vertical e a horizontal da cachoeira, obtendo uma transição suave. Para criar um efeito de cascata de água, combine dois nós de Voronoi, cada um com diferentes revestimentos e deslocamentos. Isso resulta em um visual dinâmico da água caindo.

Em cachoeiras reais, as áreas onde a água cai em cascata do nível horizontal superior e onde atinge o nível horizontal inferior geralmente têm camadas mais espessas de espuma e respingos. Na cena, você pode pintar previamente a cor do vértice no canal azul para garantir que os efeitos apareçam apenas em áreas específicas. O uso de máscaras de cores de vértices permite combinar até quatro efeitos diferentes em uma única peça de dados. Essa abordagem é mais eficiente em comparação com a criação de texturas de máscara em escala de cinza separadas para cada efeito.

Para criar a ilusão de várias camadas de água caindo da borda, utilize nós de ruído com escalas e velocidades diferentes. Ao rolar um nó de ruído com uma escala maior em uma velocidade mais lenta, ao lado de um nó de ruído de escala menor em um ritmo mais rápido, você obtém o efeito desejado. Para manter a consistência com a parte horizontal da cascata, reutilize os dados do fluxo de água. Em breve, entraremos em mais detalhes sobre o fluxo de água.

Agora que você criou uma cachoeira tranquila, vamos passar para o riacho. Há vários recursos importantes que a água em estilo de animação geralmente tem. Ao contrário da espuma turbulenta da costa encontrada no mundo real, um fluxo no estilo Ghibli normalmente tem uma espuma muito fina perto da costa. Além disso, a presença de caudas aquáticas pode dar uma impressão dinâmica e animada à água. Como a cena se passa à noite, também é necessário um efeito de reflexo convincente. Vamos dar uma olhada mais de perto em como você pode obter esses efeitos no Shader Graph.

Há várias maneiras de capturar um reflexo na superfície da água. A opção mais eficiente é um nó de função personalizado que chama a função GlossyEnvironmentReflectionincorporada ao URP. Essa função retorna a cor do reflexo, que é amostrada a partir de uma sonda de reflexo de projeção de caixa na cena. Você só precisa passar a posição no espaço mundial, a direção de visualização, o normal e a posição da tela exigidos pela função.

Se você precisar de maior qualidade visual e reflexões mais fundamentadas, as reflexões planares da URP podem ser uma excelente opção. A reflexão plana cria um reflexo semelhante ao espelho de uma superfície plana, o que é ideal para a malha de água, dada sua estrutura plana.

Para obter uma reflexão plana, é necessário configurar uma câmera separada e renderizar a textura para armazenar os dados de reflexão. O conceito básico é colocar uma câmera de reflexão abaixo do plano de reflexão (neste caso, o fluxo na cena) e atualizá-la com base na posição e na orientação da câmera do jogador. A textura de renderização também será atualizada em tempo real.

Uma vantagem é que você pode definir o plano próximo da câmera de reflexão como o próprio plano de reflexão. Isso elimina a necessidade de recortar objetos que estão localizados abaixo do plano de reflexão, o que simplifica o processo de implementação. No Shader Graph, você cria uma propriedade de textura e, no script, atribui a ela a textura de renderização que criou anteriormente.

Para vincular a textura de renderização com êxito, certifique-se de que, ao definir a propriedade do shader, a propriedade definida corresponda ao ID de referência da propriedade de textura que você criou no Shader Graph. Certifique-se de que o script chame o ID exato da propriedade ao atualizar a textura de renderização. Em seguida, use a posição da tela como o UV para amostrar a textura. Agora você conseguiu obter a reflexão planar em nosso shader.

A implementação da reflexão planar envolve várias considerações e detalhes técnicos. Para obter um entendimento mais aprofundado e um exemplo de sua implementação, dê uma olhada neste exemplo de URP. Um aspecto digno de nota é que a reflexão planar é mais cara do ponto de vista computacional em comparação com o uso de sondas de reflexão, pois renderiza os objetos duas vezes.

Para obter o efeito de espuma de borda, é necessário calcular as diferenças de profundidade. A opção Linear01 no Scene Depth Node retorna um valor de profundidade linear escalonado de 0 a 1 para objetos opacos. A multiplicação desse valor pela distância do plano distante da câmera permite determinar a distância entre a câmera e o objeto opaco - a rocha, neste caso. O componente z da opção Raw no nó Posição da tela fornece a profundidade do espaço ocular. Em seguida, você pode calcular facilmente a diferença de profundidade entre a superfície transparente da água e a rocha opaca e passar o valor da profundidade para a saída Emission para criar um efeito de espuma.

Para recuperar os valores de profundidade da cena, certifique-se de ativar a textura de profundidade nas configurações do projeto. Você pode encontrar a opção Depth Texture (Textura de profundidade ) na seção General (Geral ) do ativo do pipeline de renderização. O ativo do pipeline de renderização atual pode ser acessado em Edit > Project Setting > Graphics > Render Pipeline Asset.

A criação das trilhas, que mostram o movimento da água ao longo do córrego, é simples. Ao colocar dois nós de Voronoi em mosaicos e deslocá-los e mascarar as áreas desejadas usando cores de vértices, você pode criar trilhas de água estilizadas que fluem ao longo da superfície da água. Em seguida, ajuste a velocidade do nó de ruído para coincidir com a queda de água anterior. Agora você tem trilhas de água estilizadas fluindo pela superfície da água. Isso é muito semelhante à técnica usada para criar as linhas de fluxo da cachoeira.

Agora, vamos mudar de marcha e dar uma olhada em um shader menos estilizado e mais realista. O sombreador de areia está em uma cena realista de deserto, o que exige que o terreno se assemelhe visualmente à areia do mundo real.

A renderização de areia é um desafio interessante. Um sombreador PBR simples não captura a aparência da areia do deserto sob um sol forte. Há dois recursos principais a serem abordados no sombreador de areia: o brilho da areia, que é um aspecto sutil, mas digno de nota, e a poeira soprada, um recurso dinâmico que acrescenta vivacidade.

Como a areia é composta de inúmeros grãos minúsculos, ela brilha quando exposta à luz do sol. Como você consegue esse efeito de brilho? Da mesma forma que você faz a reflexão especular, primeiro calcule o vetor de reflexão usando a normal da superfície. Inspirando-se em Journeyem vez de calcular o produto escalar entre o vetor normal e o vetor da metade do caminho, você calcula o produto escalar entre a normal e a direção da visualização. Esse ajuste garante que o padrão de brilho varie com base nos ângulos de visão, aprimorando o apelo visual do sombreador.

Você tem dois mapas de ruído no shader. Um é usado para a amostragem dos brilhos e o outro é usado para mascarar a textura de ruído principal para obter um resultado mais dinâmico e cativante. Use o vetor de reflexão calculado anteriormente para distorcer o UV usado para a amostragem da máscara de ruído.

O efeito de areia com poeira soprada é uma combinação de dois elementos: trilhas de areia em movimento e ondas de areia. O conceito é bastante simples. Você está organizando diferentes mapas normais para obter o resultado desejado. Um ponto importante para as trilhas de areia é que você precisa de uma máscara para mascarar o mapa normal e fazer com que o efeito pareça mais dinâmico. Em vez de usar o UV padrão, faça uma amostra de dois mapas de ruído com a posição absoluta do mundo.

Um aspecto que vale a pena observar é que a opção World (Mundo) no Position Node (Nó de posição ) muda com base na configuração de diferentes pipelines de renderização, portanto, selecione a opção Absolute World (Mundo absoluto ) para evitar alterações de comportamento ao alternar pipelines. Em seguida, coloque os dois mapas em uma direção diagonal, o que criará um efeito de ondulação. Em seguida, role outro mapa de ruído ao longo da direção da onda de areia para aumentar a sensação de areia se deslocando.

Um aspecto importante é como obter a mistura normal no sombreador. Em um terreno de areia, onde o mapa de albedo pode não ser tão complexo em comparação com outros terrenos, as normais desempenham um papel significativo na aparência visual. Combine vários mapas normais no sombreador. Diferentemente da combinação de mapas de albedo, os mapas normais armazenam direções e diferentes métodos de combinação podem produzir resultados muito diferentes.

Vamos usar o nó Normal Blend no Shader Graph como exemplo. Ao mesclar os mapas normais A e B, a opção padrão no nó Normal Blend adiciona os canais x e y dos dois mapas, enquanto multiplica os canais z para obter o terceiro elemento da normal mesclada. A opção reorientada, como o nome sugere, envolve um processo mais complexo. Ele gira as normais no mapa B para alinhar com a direção do mapa A. Essa abordagem retém a maior parte dos dados de ambos os mapas, mas também é a opção mais cara do ponto de vista computacional.

Em nosso shader, optamos por um método de mesclagem simples para as normais. O principal motivo para mesclar as normais é criar uma sensação vívida de areia soprando ou se movendo pela superfície do deserto. A precisão não é a principal prioridade. Além disso, o sombreador é aplicado a uma malha de terreno relativamente grande, portanto, é importante minimizar os custos de computação.

Considerando esses fatores, aqui está uma abordagem direta: Adicione os canais vermelho e verde dos mapas normais e, para o canal azul, passe um valor de 1. Em seguida, aumente um pouco a força normal, e o resultado ficará ótimo.

Além dos recursos discutidos, há outros controles implementados no shader. Um deles é um controle geral de esmaecimento, que determina onde os efeitos aparecem no terreno com base na distância da câmera. Isso permite uma transição gradual e o desaparecimento dos efeitos à medida que a câmera se afasta.

Você também pode ajustar o valor de suavidade na distância, permitindo uma melhor combinação entre as dunas de areia e o terreno de fundo. À medida que o visualizador aumenta o zoom, um mapa normal de granulação detalhado substitui os normais do terreno. Essa substituição proporciona uma experiência mais realista no deserto, acrescentando detalhes e texturas mais finos à superfície da areia.

Agora que você já examinou todos os recursos de cada um desses dois shaders, não hesite em criar suas próprias versões. Se você gosta de criar shaders com o Shader Graph, participe do nosso fórum ou encontre-nos no Discord. Fique atento a futuras análises técnicas dos desenvolvedores do Unity como parte da série Tech from the Trenches.