Godot Visual Shader: Crie Shaders Sem Escrever Código

Se código de shader te dá calafrio, o Godot Visual Shader existe exatamente pra isso: montar efeitos gráficos ligando caixinhas (nós) numa tela, sem digitar uma linha de GLSL. Você arrasta nós, conecta a saída de um na entrada de outro e vê o resultado na hora. É o mesmo poder dos shaders escritos à mão, só que numa interface visual que deixa o fluxo dos dados óbvio. Neste guia, feito no CursoGame.Dev, você vai entender quando usar o VisualShader, conhecer os nós essenciais e construir dois efeitos do zero, ligando nó por nó.

Antes de começar, um aviso honesto de escopo: este post é sobre o editor de nós. Se o que você quer é aprender a escrever shader digitando código na Godot Shading Language, o caminho é outro (e ele existe aqui no blog, com link mais pra frente). Aqui a regra é: zero código de shader escrito por você.

O que é o Godot Visual Shader e quando usar

Um shader é um programa que roda na GPU e decide, entre outras coisas, a cor final de cada pixel. Normalmente você escreve isso em texto. O Godot Visual Shader troca o texto por um grafo de nós: cada nó é uma operação (somar, multiplicar, ler uma textura, pegar o tempo) e as ligações entre eles definem por onde os dados fluem até chegar na saída.

Ele brilha em três situações:

• Você tem medo de código de shader e quer entender a lógica vendo os dados andarem pela tela.
• Você está prototipando e quer testar ideias rápido, sem decorar sintaxe.
• Você quer visualizar o fluxo de um efeito para depois reescrever em código com mais clareza.

Onde ele incomoda: efeitos complexos viram uma teia de nós difícil de navegar, e algumas funções ficam mais rápidas de escrever em uma linha de código do que em cinco nós. Por isso o VisualShader é excelente como ponto de partida e como ferramenta de prototipagem, não necessariamente como destino final de todo projeto.

Como criar um VisualShader na Godot 4

Existem dois caminhos, e os dois chegam no mesmo lugar.

Caminho pelo material: selecione um nó que aceite material (um Sprite2D, um MeshInstance3D, etc.), vá no Inspector, encontre a propriedade Material, clique e escolha New ShaderMaterial. Abra esse ShaderMaterial e, na propriedade Shader, clique e escolha New VisualShader. Pronto, ao dar dois cliques no recurso, o editor de nós abre no painel de baixo.

Caminho pelo recurso: no dock FileSystem, clique com o botão direito, Create New > Resource, procure por VisualShader e salve como um arquivo .tres. Depois é só arrastar esse recurso para dentro de um ShaderMaterial.

No momento da criação (ou no canto do editor), você define o Mode do VisualShader:

• CanvasItem para 2D: sprites, UI, TileMap.
• Spatial para materiais 3D.
• Particles para sistemas de partículas.

A interface é direta: uma tela grande onde você move e conecta nós, e um nó de saída (Output) já presente por padrão. Para adicionar nós, clique no botão de adicionar (ou dê o atalho de adicionar nó) e navegue pelas categorias. Para ligar dois nós, clique numa bolinha de saída de um e arraste até a bolinha de entrada de outro. As bolinhas têm cores por tipo: escalares (float) e vetores (vec2, vec3, vec4) não se misturam por acidente, o editor avisa quando os tipos batem.

Os nós essenciais do Godot Visual Shader

Você não precisa decorar as centenas de nós disponíveis. Um punhado resolve a maioria dos efeitos de iniciante.

• Input: dá acesso aos dados que a GPU já conhece. Os mais usados são UV (as coordenadas de textura de cada pixel, um vec2 que vai de 0 a 1), Time (um escalar que cresce com o tempo, motor de qualquer animação) e, no modo Spatial, coisas como Normal e Screen UV.
• Texture2D (nó Texture): lê uma imagem. Recebe uma UV na entrada e devolve a cor daquele ponto da textura.
• ColorConstant: uma cor fixa que você escolhe no color picker. Sai como vec4 (RGBA).
• FloatOp e VectorOp: operações matemáticas. FloatOp opera entre dois floats (somar, subtrair, multiplicar, dividir) e VectorOp faz o mesmo com vetores. São eles que ajustam velocidade, intensidade e deslocamento.
• FloatFunc e VectorFunc: funções de um valor só, como Sin (seno), Abs, Fract. O Sin é o coração dos efeitos que pulsam, porque transforma um tempo que só cresce numa onda que vai e volta entre menos 1 e 1.
• Mix: a interpolação linear (o famoso lerp). Tem entradas A, B e Weight. Com Weight em 0 sai A, em 1 sai B, no meio mistura os dois. É o nó para transições de cor.
• ColorRamp: um degradê editável. Você recebe um escalar de 0 a 1 na entrada e ele devolve a cor correspondente naquele ponto da rampa que você desenhou. Ótimo para mapear valores em paletas.
• Output: o nó final. No modo Spatial ele expõe entradas como Albedo (cor base), Emission (brilho próprio), Alpha (transparência), Metallic, Roughness e mais. No modo CanvasItem as entradas principais são Color e Alpha. O que você ligar aqui é o que a tela mostra.

Com esse vocabulário, dá para montar efeitos de verdade. Vamos a dois.