Um shader é um pequeno programa que contém instruções para a GPU. Ele descreve como calcular a cor da tela para um material específico.
Embora o Unity tenha um sombreador padrão, às vezes você precisa implementar um efeito do qual um sombreador padrão não é capaz.
Anteriormente, isso exigia o conhecimento de uma linguagem específica de sombreador, como Cg ou HLSL, e as abordagens nelas são ligeiramente diferentes da criação usual de scripts de jogabilidade. Para muitas pessoas, escrever shaders é um aspecto impopular do desenvolvimento de jogos, porque requer o desenvolvimento de uma curva de aprendizado adicional.
A Unity introduziu o
Shader Graph , que facilita a gravação de shaders sem quase nenhum código. O melhor de tudo é que o Shader Graph permite que você trabalhe com uma interface interativa visual.
Neste tutorial, você criará seu primeiro sombreador Unity!
Começando a trabalhar
Este tutorial usa a versão 2019.1 ou mais recente do Unity. Faça o download da nova versão do Unity
aqui .
Nota : embora este tutorial seja destinado a iniciantes no Shader Graph, ele pressupõe que você conheça os conceitos básicos de desenvolvimento no Unity e tenha dominado a interface do mecanismo. Se você é novo no Unity, confira o excelente tutorial Introdução ao Unity .
Faça o download dos materiais do tutorial
aqui . Em seguida, descompacte o conteúdo e abra
Introdução ao Shader Graph Starter no Unity.
A pasta
RW na janela Projeto está organizada da seguinte maneira:
- Fontes : fontes usadas na cena.
- Materiais : materiais para a cena.
- Modelos : malhas 3D para formas e fundos de jogos.
- PostFX : efeitos de pós-processamento para renderização de cena.
- Pré-fabricados: vários componentes pré-fabricados.
- Cenas : cena do jogo.
- Scripts : scripts com lógica de jogo.
- Shaders : gráficos de Shader criados para este tutorial.
- Sprites : um sprite usado como parte das instruções.
- Texturas : mapas de textura para formas e fundos de jogos.
Agora carregue a cena
TangramPuzzle da pasta
Scenes .
Este é um jogo simples chamado
Tangram , que apareceu na China no século XIX. A tarefa do jogador é mover sete formas geométricas planas, tornando-os pictogramas ou silhuetas estilizadas.
Inicie o modo
Play no editor e teste os jogos demo.
Você pode clicar nas formas e arrastá-las. Use as teclas de direção para girar formas. Gire e mude as formas para que não se sobreponham.
Você pode descobrir como mover as sete formas para criar esses padrões?
Portanto, do ponto de vista
técnico , o jogo funciona, mas não fornece nenhum feedback visual sobre a figura selecionada.
E se pudermos fazer a forma brilhar quando um mouse estiver sobre ela? Isso irá melhorar a interface do usuário.
E essa é uma ótima chance de demonstrar os recursos do Shader Graph!
Verificando os parâmetros do pipeline para Shader Graph
O Shader Graph funciona apenas com o relativamente novo
pipeline de renderização gravável , ou seja, com o
pipeline de renderização de alta definição ou com o
pipeline de renderização leve .
Ao criar um novo projeto para trabalhar com o Shader Graph, selecione o modelo correto.
O projeto de amostra já está configurado para funcionar com o
Pipeline de renderização leve . Primeiro, confirme no PackageManager que você tem o
Lightweight RP e o
ShaderGraph instalados escolhendo
Janela ► PackageManager .
Em seguida, selecione uma das versões disponíveis e, se necessário, clique no botão
Atualizar para . Normalmente, a melhor opção é a versão mais recente
verificada .
Após atualizar os pacotes, verifique cuidadosamente a exatidão dos parâmetros do pipeline em
Editar ► Configurações do projeto .
Na guia
Gráficos , o parâmetro
Scriptable Render Pipeline Settings deve ser definido como
LWRP-HighQuality . Graças a isso, o projeto usará a configuração padrão mais alta para o Pipeline de renderização leve.
Depois de verificar se você está usando um dos ativos
Scriptable Render Pipeline , feche esta janela.
Criando gráfico PBR
Ao renderizar uma malha 3D na tela, o material e o sombreador sempre funcionam juntos. Portanto, antes de começar a criar um shader, precisamos de material.
Primeiro, clique no botão
Criar na janela Projeto para gerar um novo material na pasta
RW / Materiais . Selecione
Criar ► Material e renomeie-o para
Glow_Mat .
Em seguida, na pasta
RW / Shaders , crie um
gráfico PBR escolhendo
Criar ► Shader ► Gráfico PBR . Este é um gráfico de sombreador que suporta
renderização fisicamente precisa , ou PBR.
Nomeie
HighlightShaderGraph .
Até agora, o Material Glow_Mat usa um sombreador padrão para
LightweightRenderPipeline chamado
LightweightRenderPipeline / Lit.Altere-o para o novo gráfico de sombreador recém-criado. Com
Glow_Mat selecionado, clique no menu suspenso
Shader na parte superior do inspetor e selecione
Gráficos Shader ► HighlightShaderGraph .
Glow_Mat assumirá uma tonalidade de cinza um pouco mais clara, mas, de outro modo, permanecerá bastante monótona. Não se preocupe, nós resolveremos isso em breve.
Agora clique duas vezes no ativo
HighlightShaderGraph ou clique no
Open Shader Editor no inspetor. Isso abrirá a janela
Gráfico Shader .
Confira as principais partes desta interface:
- O espaço de trabalho principal é uma área cinza escura na qual as operações do gráfico serão armazenadas. Você pode clicar com o botão direito do mouse na área de trabalho para abrir o menu de contexto.
- Um nó é um único elemento de um gráfico. Cada nó tem uma entrada, saída ou operação, dependendo de suas portas. Os nós são conectados entre si usando arestas .
- Nó mestre é o último nó de saída do gráfico. Neste exemplo, usamos uma opção de renderização fisicamente precisa, também chamada de nó PBR Master. Você pode observar certas propriedades, como Albedo, Normal, Emissão e Metálico, que são usadas no Shader padrão.
- O quadro-negro pode fornecer acesso a determinadas partes do gráfico no inspetor. Isso permite que o usuário configure parâmetros sem editar diretamente o próprio gráfico.
- A visualização principal exibe interativamente a saída atual do shader como uma esfera.
Ao conectar os vários nós, você pode criar um
gráfico de sombreador que o Unity compile e transfira para a GPU.
Criando um nó Cor
Primeiro, vamos dar ao shader algumas cores básicas. Para fazer isso, conecte o nó colorido ao componente Albedo do nó PBR Master.
Clique com o
botão direito do mouse na área de trabalho para criar o primeiro nó no menu de contexto, escolhendo
Criar Nó ► Entrada ► Básica ► Cor .
Observe que existem centenas de nós no menu
Criar nó ! A princípio, parece confuso, mas em breve você descobrirá os mais usados.
Em seguida, arraste o nó sobre a área de trabalho, mantendo sua barra de título. Em seguida, deixe-o em algum lugar à esquerda do nó
PBR Master .
O
nó Cor permite especificar uma única cor. Clique no campo de cor e selecione um belo tom vermelho, por exemplo
R: 128, G: 5, B: 5 .
Para emitir a cor para o nó
PBR Master , arraste a porta
Out para a porta
Albedo , que indica a cor base do shader.
Ao conectar os nós lado a lado, você deve ver como a esfera na
visualização principal fica vermelha.
Ótimo! Na área de escrever shaders, criar um shader de uma cor é um análogo do
Hello, world!Embora você ainda não entenda isso, você acabou de criar seu primeiro shader!
Trabalhar com a interface
Embora haja apenas alguns nós no gráfico, agora é o melhor momento para se acostumar com a interface do Shader Graph.
Tente arrastar os nós e observe que as bordas entre a porta de saída
Color e a porta de entrada
PBR Master permanecem conectadas.
Os nós podem conter vários tipos de dados. Assim como criamos um nó contendo uma única cor de entrada, também podemos criar um nó representando um único número; Selecione
Criar nó ► Entrada ► Básico ► Inteiro . Não faremos nada com esse nó; é necessário apenas ilustrar o princípio.
Conecte a porta
Integer Out à porta
Alpha do nó
PBR Master .
Nosso gráfico ainda é muito pequeno, mas já temos nós suficientes para verificar a ação das teclas de atalho. Selecione um par de nós e pressione as seguintes teclas:
- F : enquadra os nós selecionados.
- A : enquadra o gráfico inteiro.
Você também pode usar os botões na parte superior da janela para alternar entre a
Visualização principal e o
Quadro -
negro . O botão
Mostrar no projeto ajuda a encontrar o gráfico de sombreador atual na janela Projeto.
Depois de lidar com o gerenciamento do gráfico, nós o limpamos. Tudo o que precisamos são os nós
mestre de cores e
PBR .
Clique com o botão direito do mouse na conexão entre os nós
Inteiro e
Mestre e selecione
Excluir . Isso separará o nó do gráfico.
Da mesma forma, você pode excluir completamente o nó
Inteiro . Clique com o botão direito do mouse no nó e selecione
Excluir .
Quando terminar, clique no botão
Salvar ativo no canto superior esquerdo da interface. O Unity salvará todas as alterações e, em seguida, compilará e ativará o sombreador. Esta etapa deve ser realizada sempre que você desejar ver as alterações mais recentes no editor.
Agora volte para a janela e selecione o material
Glow_Mat .
À medida que o sombreador se estende ao material, a esfera na janela de visualização do inspetor deve ficar vermelha.
Agora arraste o material
Glow_Mat para as formas de tangram na janela
Cena .
Como esperado, o material com o shader pintou a malha em uma linda e uniforme cor vermelha.
Adicione um efeito de brilho
Se você deseja que o material Glow_Mat tenha um brilho mais misterioso, edite o gráfico de sombreador novamente.
Agora a saída
Color é transferida para a entrada do nó
Albedo PBR Master .
Você também pode arrastar outra aresta de
Fora para
Emissão . Agora, a mesma cor é usada duas vezes: como a cor base e como a cor da radiação.
As portas de saída podem ter várias arestas e as portas de entrada podem ter apenas uma.
Agora mude o menu suspenso
Modo do nó
Cor para o modo
HDR . Portanto, incluiremos a gama
dinâmica estendida de cores.
Agora mude o campo de cor. No
modo HDR , uma opção adicional de
intensidade apareceu. Clique em
+1 algumas vezes na paleta inferior ou arraste o controle deslizante cerca de
2,5 . Agora salve as alterações e retorne ao editor.
No editor, a figura brilhará em laranja brilhante. O pós-processamento na cena já está ativado e aprimora a cor da faixa dinâmica estendida.
Agora selecione o objeto de jogo
PostProcessing na hierarquia. O brilho é devido ao efeito
Bloom .
Abra as opções
Bloom e defina
Intensity (
intensidade da luminosidade) e
Threshold (o limite para o início do brilho). O exemplo mostra os valores
3 e
2 .
Uau, esse brilho!
Criando um script de destaque
Não queremos que a figura brilhe constantemente. Precisamos que o brilho acenda apenas dependendo da posição do mouse.
Quando o cursor do mouse está sobre a forma, devemos ativar o material Glow_Mat. Em outros casos, a figura deve ser exibida com o material padrão Wood_Mat.
Primeiro, crie um novo script
C # em
RW / Scripts e chame-o de
Marcador . Ele nos ajudará a alternar entre os dois materiais durante a execução do programa. Substitua todas as linhas no script pelo seguinte código:
using UnityEngine;
Vamos analisar este script:
- O script pode ser aplicado apenas a um objeto que contém os componentes
MeshRenderer e Collider . Isso é controlado adicionando os atributos [RequireComponent] à parte superior do script. - Estes são links para
MeshRenderer , originalMaterial e highlightedMaterial . Os materiais são marcados com o atributo [SerializeField] , que permite atribuí-los a partir do inspetor. - No método
Start , preenchemos automaticamente o MeshRenderer usando GetComponent . - Chamado
EnableHighlight(false) . Isso garante que, por padrão, o conteúdo não destacado seja exibido. Abaixo está o método público EnableHighlight , que alterna o material do renderizador. Ele recebe o parâmetro booleano onOff , que determina o estado da luz de fundo. - Impedindo todos os erros NullReference
- Para economizar espaço, usamos o operador ternário.
Adicionar eventos do mouse
Como esse script se aplica a formas que possuem um
MeshCollider , podemos usar os métodos
OnMouseOver e
OnMouseOver . Adicione o seguinte código após o método
EnableHighlight :
private void OnMouseOver() { EnableHighlight(true); } private void OnMouseExit() { EnableHighlight(false); }
Quando o mouse estiver sobre a forma, ele chamará
EnableHighlight(true) . Da mesma forma, quando o mouse sai do Collider, ele chama
EnableHighlight(false) .
Isso é tudo! Salve o script.
Destaque da figura
Se nas seções anteriores do tutorial você aplicou Glow_Mat a qualquer uma das figuras, no editor você precisará devolver o material Wood_Mat a todas as figuras do jogo. Agora, para ativar o brilho, usaremos o
Marcador enquanto o programa estiver em execução.
Primeiro, selecionaremos sete objetos dentro do
Tangram de transformação, que são formas separadas. Em seguida, adicionamos a eles todo o script
Highlighter , ao mesmo tempo.
Em seguida, arraste
Wood_Mat no campo
Original Material e
Glow_Mat no
campo Highlighted Material . Agora execute o modo
Play e verifique o resultado do nosso trabalho.
Nada mal! Quando você passa o mouse sobre a forma do tangram, ela começa a brilhar em vermelho brilhante. Se você remover o cursor, ele retornará ao seu estado original.
No jogo em si, nada mudou, mas o efeito de destaque aumentou o interesse visual e permite que o jogador se concentre.
Usando nós de textura
No momento, nosso shader simples possui uma cor vermelha brilhante e sólida. Mudaremos o shader para que não perca sua textura de madeira original. Para fazer isso, faremos com que a luz de fundo apareça como uma borda luminosa em
torno da superfície.
Primeiro, altere o
HighlightShaderGraph clicando duas vezes nele ou selecionando
no
Open Shader Editor .
Exclua o nó
Cor clicando com o botão direito do mouse e selecionando
Excluir . Vamos criar tudo do zero.
Em vez de uma única cor, substituímos a textura usando o nó
Amostra de textura 2D .
Crie um nó, no menu de contexto,
clicando com o botão direito do mouse e escolhendo
Criar Nó ou usando uma tecla de atalho (espaço). Selecione
Entrada ► Textura ► Textura de amostra 2D .
O nó
Amostra de textura 2D lê as informações de cores de um ativo de textura e gera seus valores RGB.
Selecione uma textura na porta de entrada
Textura . Clique no ponto ao lado do campo vazio para abrir o navegador de arquivos.
Selecione o
ativo de textura WoodAlbedo.
Conecte a porta de saída
RGBA do nó
Sample Texture 2D à porta
PBR Master Albedo .
Voila! Agora a textura da árvore é exibida na superfície da esfera de visualização.
Se você adicionar um mapa normal, poderá criar peças na superfície. Primeiro, crie outro nó
2D da Textura da amostra , escolhendo
Criar nó ► Entrada ► Textura ► Textura da amostra 2D .
Selecione uma textura
WoodNormal na porta de entrada Textura.
Altere o menu suspenso
Tipo de
Padrão para
Normal .
Envie os valores
RGBA para a porta
Normal do nó
PBR Master .
O escopo da
visualização principal agora deve parecer mais aproximado. O mapa normal imita pequenas irregularidades e recuos na superfície. Isso permite simular a aparência de uma árvore.
Nota : o tipo de dados de cada porta é indicado entre parênteses ao lado da porta. (T2) significa que a porta é compatível com textura bidimensional e (4) significa que a porta usa Vector4 . Dependendo do contexto, o Shader Graph pode ignorar valores extras de ponto flutuante.
Adicionando o efeito Fresnel
Agora que a cor vermelha sólida mudou para a textura base e o mapa normal, vamos adicionar um efeito de destaque usando outro método.
Em vez de um brilho uniforme de todo o objeto, limitaremos o brilho apenas às suas bordas. Isso pode ser realizado usando
o efeito Fresnel .
Crie um novo nó
clicando com o botão direito do mouse ou na barra de espaço e selecione
Criar Nó ► Matemática ► Vetor ► Efeito Fresnel .
Este novo nó mostra uma esfera com um anel radiante branco de diâmetro. Você pode ajustar a largura desse halo usando a porta de entrada de
energia . Clique e arraste o
X para a esquerda do campo ou digite os números que deseja.
Quanto maior o valor, mais fino o halo se torna e os valores menores o tornam muito amplo. Para criar um brilho sutil em torno da borda, você pode usar o valor
4 .
Para transmitir esse halo ao material, conectaremos a saída
Efeito Fresnel à entrada
Emissão do nó
PBR Master .
Agora, o
MainPreview exibe uma esfera de madeira com um halo branco brilhante, obtido graças ao
Efeito Fresnel .
Nota : O efeito Fresnel recebeu o nome do físico francês Augustin Jean Fresnel. Ele notou que a luz torna as superfícies muito brilhantes e parece um espelho quando um observador se aproxima de um ângulo de deslizamento .
Você pode experimentar com a mesa da cozinha. Usamos a versão Unity desse fenômeno para dar um brilho à geometria.
Multiplicação por cor
Você pode adicionar cores ao contorno luminoso usando cálculos simples de cores.
Crie um novo nó de cores que indicará a cor do anel luminoso.
Clique com o botão direito do mouse ou na barra de espaço para abrir o menu de contexto e selecione
Criar nó ► Entrada ► Básico ► Cor . Mude o modo de cor para
HDR .
Selecione uma cor que indique a cor da luz de fundo. Por exemplo, escolha um verde brilhante bonito:
R: 5, G: 255, B: 5 .
Aumente a
intensidade para
3,5 .
Não podemos combinar a nova cor com o efeito Fresnel. porque não tem entrada para cores. Portanto, precisaremos combinar a saída do efeito com a saída do nó de cores. Isso pode ser feito usando o nó
Multiply .
Crie um nó
Multiplicar clicando com o botão direito do mouse e selecione
Criar nó ► Matemática ► Básico ► Multiplicar .
Exclua a aresta entre o
Efeito Fresnel e o
PBR Master . Conecte a saída
Efeito Fresnel à entrada
A do nó
Multiply .
Conecte o nó
Out do nó
Color à entrada
B do nó
Multiply .
Em seguida, conecte
Out do nó
Multiply à porta de
Emissão do nó
PBR Master . Voila! Agora vemos como a cor HDR verde brilhante envolve a esfera de
visualização principal .
Lembre-se de que você pode usar o
Fresnel Effect Power para aumentar ou diminuir o halo. Se você reduzir o valor para 1,5, obtém um brilho verde amplo.
Para o nosso exemplo de jogo, um valor de
4 a
5 é bom, mas você pode experimentar seus valores.
Salve o gráfico de sombreador e retorne ao editor. Você verá imediatamente seu
HighlightShaderGraph em ação.
Inicie o modo de
reprodução .
Quando você passa o mouse sobre uma forma, ela mantém a textura da árvore. No entanto, um brilho verde brilhante agora apareceu em torno de suas bordas. Formalmente, nada mudou no jogo, apenas a luz de fundo ficou mais fraca.
Adicionar propriedades do quadro-negro
Se você deseja alterar a aparência do efeito de brilho, é necessário retornar à janela do editor Shader Graph e fazer essas alterações. Por exemplo, usando o
Fresnel Effect Power, expanda ou reduza a banda do halo.
Isso não é muito conveniente se queremos testar várias alterações. Felizmente, o Shader Graph tem um conceito para propriedades.
Você pode tornar parte do gráfico visível ao público no inspetor, o que permite fazer pequenas alterações interativamente. Isso é feito usando a interface do
Blackboard .
Volte ao Shader Graph e ligue a tela
Blackboard . Se estiver oculto, clique no botão
Quadro -
negro no canto superior direito.
Adicionando textura base e propriedades normais do mapa
Agora abriremos a textura base e o mapa normal para que eles possam ser acessados através do inspetor.
Clique no ícone
+ no canto superior direito do
quadro -
negro . Selecione
Textura 2D na lista suspensa. O item deve aparecer no
quadro -
negro . Renomeie-o para
BaseTexture .
Verifique se a caixa de seleção
exposta está marcada. Se você abrir uma propriedade, ela se tornará pública e acessível no inspetor.
Para adicionar uma propriedade ao gráfico, basta arrastá-la pelo rótulo para a área de trabalho. Deixe-o em algum lugar à esquerda do nó
Sample Texture 2D .
Conecte a porta
BaseTexture à porta de entrada
Texture do nó
SampleTexture 2D que está conectado ao Albedo. Isso substituirá o ponto de ajuste anterior.
Repita o mesmo processo para o
Mapa Normal . Clique no ícone
+ e crie um novo
Texture 2D . Renomeie para
Mapa normal .
Arraste a propriedade para a área de trabalho e anexe-a ao
Sample Texture 2D para o mapa normal.
Clique em
Salvar ativo e retorne à janela principal do editor.
Selecione o material
Glow_Mat e observe dois novos campos no inspetor:
Textura base e
Mapa normal .
Como nenhuma textura foi definida para eles ainda, um destaque verde sobre a esfera cinza é exibido na janela de visualização.
Selecione
WoodAlbedo e
WoodNormal para BaseTexture e
NormalMap .
Agora, sob as bordas luminosas, a textura da árvore será exibida corretamente.
As propriedades públicas permitem que o usuário insira dados diretamente no sombreador sem a necessidade de editar o gráfico do sombreador. Experimente por conta própria uma seleção de diferentes texturas básicas e mapas normais.
Adicionar propriedades Tamanho do brilho e Cor do brilho
Agora vamos revelar outros tipos de propriedades no Blackboard. Por exemplo, será útil deixar o valor de Fresnel Effect Power mudar.
Clique no ícone
+ no
quadro -
negro e crie a propriedade
Vector1 . Denota um único parâmetro do tipo float.
Renomeie para
GlowSize .
Você pode limitar o intervalo de valores inseridos para essa propriedade convertendo-a em um
controle deslizante . Alterne
Mode para
Slider e defina
Min para
0,05 e
Max para
6 para especificar um intervalo. Defina o valor
padrão como
5 .
Arraste a propriedade
GlowSize para o espaço de trabalho. Conecte a porta de saída à entrada
Fresnel Effect Power .
Agora deixe o usuário definir a cor do brilho. Em vez de criar uma propriedade no Blackboard, transformamos o nó existente no gráfico.
Selecione o nó
Cor ,
clique com o botão direito do mouse e selecione
Converter em propriedade .
O
nó Cor é convertido em uma propriedade de cor no
Quadro -
negro , que não pode mais ser alterada diretamente no gráfico. Renomeie a propriedade para
GlowColor .
Clique em
Salvar ativo e retorne à janela principal do editor.
Selecione o material
Glow_Mat na janela Projeto. Você deve ver que o controle deslizante
GlowSize e o campo
GlowColor estão agora disponíveis no inspetor.
Mude os valores do material ao seu gosto. Inicie o modo
Play para testar seu trabalho.
Agora você tem uma luz de fundo personalizável que pode ser alterada como desejar!
Para onde ir a seguir
Parabéns! Agora você pode criar seus próprios shaders usando o Gráfico Shader!
Usando suas próprias habilidades criativas, você ficará surpreso ao ter sucesso. Deseja criar um fantástico feixe de laser ou campo de força fantástico? Adapte o resultado do nosso trabalho ao shader necessário.
Embora haja literalmente centenas de nós, este tutorial deve ter ajudado você a aprender o Shader Graph.