Criação de um efeito de vértice interativo usando o Shader Graph

Criamos um exemplo de efeito de deslocamento de vértice interativo com o Shader Graph e o Lightweight Render Pipeline para ajudá-lo a usar esses recursos para criar efeitos. Esta publicação o guiará pelo nosso processo. Obtenha o projeto de demonstração com o shader do Shader Graph, a cena de exemplo e alguns exemplos de recursos de jogo do 3D Game Kit e acompanhe-o!

A esfera no exemplo de vídeo abaixo tem um efeito de deslocamento baseado em shader que é ativado quando pressionamos a barra de espaço. Em seu jogo, você atribuiria isso a algum evento de jogabilidade relevante. Neste artigo, veremos como criar esse sombreador usando o pacote Shader Graph e integrar o acionador de pressionamento de tecla da barra de espaço. O objetivo é ajudá-lo a entender como projetar efeitos no Shader Graph e interagir com eles a partir de outros scripts C#. O projeto de demonstração contém o shader, o script que controla o shader, um Asset LWRP (Lightweight Scriptable Render Pipeline) pré-configurado e uma cena de exemplo para você começar. Se você preferir ver este tutorial em vídeo em vez de texto, poderá encontrá-lo no canal do Unity no YouTube.

Primeiro, vamos dar uma olhada em como configurar o Shader Graph e o Lightweight Render Pipeline. Abra o Package Manager e selecione instalar no pacote Lightweight RP. Isso instalará automaticamente a versão correta do Shader Graph.

Depois de instalarmos o Lightweight RP, precisamos criar um novo ativo de pipeline no projeto. Selecione Create->Rendering->Lightweight Render Pipeline Asset.

Em seguida, podemos ativar esse ativo de pipeline acessando Edit->Project Settings->Graphics e arrastando o LightweightRenderPipelineAsset para o campo Scriptable Render Pipeline Settings. Se estiver acompanhando os ativos baixados, essa etapa já foi concluída para você.

Agora que o Pipeline de Renderização Lightweight está instalado, podemos dar uma olhada na criação de um novo Shader Graph. Vamos criar um novo gráfico em nosso projeto selecionando Create->Shader->PBR Graph. O PBR Graph nos permite criar um novo shader que recebe entradas do sistema de renderização baseada em física do Unity, de modo que nosso shader possa usar recursos como sombras e reflexos. Depois de criarmos esse sombreador, nós o adicionamos a um novo Material e anexamos o Material a uma Esfera em nossa cena de exemplo, arrastando e soltando o material na esfera.

Para obter o efeito, deslocaremos os vértices de nossa malha ao longo de suas normais, alterando a posição de saída no nó de saída PBR Master. Deslocaremos usando um nó Add na base Object Position de cada vértice. Ao adicionar o Normal Vector à base Object Position, podemos ver que todos os vértices são extrudados, fazendo com que a esfera pareça maior. Para variar esse deslocamento, multiplicaremos esse deslocamento do vetor normal de forma semi-aleatória usando um nó de ruído simples.

Quando clicamos em Save Asset, podemos ver na Scene View que a esfera agora está deslocada com base no Simple Noise.

Infelizmente, há costuras no deslocamento porque o Simple Noise está sendo amostrado com base no espaço UV. Para corrigir as emendas usando o Object Space para o Simple Noise em vez do UV Space, podemos simplesmente adicionar um nó Position definido como Object.

Para criar o efeito de pulsação, rolaremos essa saída Position adicionando-a a um nó Time (Tempo), antes de enviá-la ao nó Simple Noise (Ruído simples). Também podemos usar uma Multiplicação com o nó Time para variar a velocidade da rolagem.

Para controlar nosso deslocamento, expomos uma nova propriedade do Shader em nosso Shader Graph. As propriedades do Shader permitem que forneçamos entradas ao nosso shader por meio de valores inseridos no Inspector ou por meio de nossos próprios scripts C#, como neste caso. Criaremos uma nova propriedade Vector1 chamada Amount e alteraremos a referência para _Amount. O campo de referência é o nome da cadeia de caracteres pelo qual acessaremos e alteraremos o deslocamento por meio do script. Se não alterarmos isso, ele usará um valor gerado automaticamente. Se a cadeia de caracteres não corresponder exatamente, não poderemos endereçar nossa propriedade por meio do script, portanto, verifique se ambas correspondem, inclusive a capitalização.

Usamos essa propriedade do sombreador Amount em um nó Multiply com o Simple Noise antes de ser multiplicado pelo vetor normal. Isso nos permite dimensionar o ruído antes que ele seja aplicado às posições dos vértices. Agora, a variável Amount controla o quanto deslocamos cada vértice na malha.

Para controlar essa variável Amount, criamos um script C# chamado DisplacementControl e o anexamos ao GameObject DisplacementSphere. Esse script controla a variável _Amount interagindo com a propriedade que criamos em nosso material e que é atribuída ao componente MeshRenderer. Armazenamos uma referência ao componente MeshRenderer na variável meshRender e declaramos uma nova variável float displacementAmount.

Usamos um lerp simples na função Update para interpolar a variável displacementAmount para o valor 0. Em seguida, definimos a variável do shader _Amount como o valor armazenado na variável displacementAmount. Isso atualizará a variável _Amount do Shader Graph, suavizando-a ao longo do tempo para 0.

Estamos usando o eixo de entrada "Jump" padrão do Unity (que é atribuído à barra de espaço por padrão) para definir o valor de displacementAmount como 1 quando pressionado.

Agora, quando entramos no modo Play na cena, podemos ver que, ao pressionar a barra de espaço, displacementAmount é definido com o valor 1 e, em seguida, interpola lentamente de volta para 0.

Para criar o efeito de brilho ajustável, enviaremos a saída para a Emissão no nó PBR Master. Usamos um nó Voronoi Noise e o multiplicamos em um nó Color. Isso criará uma pequena modulação no efeito de brilho com alguns pontos escuros. Em seguida, usamos um nó Lerp com outro nó Color como cor de base e usamos a variável Amount na entrada T. Isso nos permitirá mesclar entre um nó de cor de base e o nó de cor Voronoi Noise usando a variável Amount.

Em seguida, rolaremos o brilho usando uma configuração semelhante à anterior. Usamos um nó Position definido como Object e o adicionamos a um nó Time e conectamos a saída ao slot UV do nosso nó Voronoi Noise.