Pular para o conteúdo
Cor · TécnicaIniciante

Degradês

Misture cores ao longo de uma superfície conforme a posição; a primeira coisa que quase todo mundo desenha num shader.

UVSuperfície2D / sprite

Cards

2 exemplos ao vivo para ajustar, aprender e copiar.

Como funciona

Um degradê transforma uma posição numa cor. Todos têm as mesmas duas partes: um número t que vai de 0 a 1 ao longo da superfície e um mix de uma cor para outra conforme esse t. Cores são vetores de três números, então o mix mistura vermelho, verde e azul de uma vez.

A forma do degradê está toda no t. A altura da UV dá uma faixa vertical, como um céu; a distância até um ponto dá um brilho radial; um produto escalar com uma direção dá uma faixa em qualquer ângulo. Remapear e limitar o t define onde a mistura começa e termina, e passá-lo por um smoothstep ou outra curva muda a velocidade com que ele atravessa o meio.

A outra escolha é em que espaço de cor a mistura acontece. As mesmas duas pontas misturadas como valores sRGB, como luz linear ou em OKLab dão três meios diferentes: um escuro e barrento, um claro demais e um que avança em passos iguais para o olho. Num céu a diferença é pequena; numa rampa de interface, num mapa de calor ou numa barra de vida, é o que as pessoas notam.

O card Céu linear monta o degradê básico passo a passo. O card Rampa RGB vs OKLab empilha os três espaços de cor um sobre o outro, com uma chave que mostra só o quanto cada rampa parece clara.

Leitura complementar