Degradês
Misture cores ao longo de uma superfície conforme a posição; a primeira coisa que quase todo mundo desenha num shader.
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 Interpolação linear (mix) Mistura de a até b por um fator t, em linha reta. O GLSL chama de mix; o HLSL e a maioria dos editores de nós chamam de lerp. Vetor Um grupo de dois a quatro números tratado como um só valor (vec2, vec3, vec4). O mesmo tipo guarda uma posição, uma direção, uma cor ou uma UV.t que vai de 0 a 1 ao longo
da superfície e um mixMistura de a até b por um fator t, em linha reta. O GLSL chama de mix; o HLSL e a maioria dos editores de nós chamam de lerp.mix(a, b, t) = a (1 − t) + b tt. Cores são vetoresUm grupo de dois a quatro números tratado como um só valor (vec2, vec3, vec4). O mesmo tipo guarda uma posição, uma direção, uma cor ou uma UV.mix mistura vermelho, verde e azul de uma vez.
A forma do degradê está toda no Coordenadas UV Uma posição 2D numa superfície ou na tela, em geral de 0 a 1 nos dois eixos. Shaders desenham formas e padrões como funções dela. Smoothstep Um limiar suave. Vale 0 abaixo da primeira borda, 1 acima da segunda e segue uma curva em S com as pontas planas entre elas.t. A altura da UVUma posição 2D numa superfície ou na tela, em geral de 0 a 1 nos dois eixos. Shaders desenham formas e padrões como funções dela.uv = gl_FragCoord.xy / resolutiont define onde a mistura começa e termina, e passá-lo por um smoothstepUm limiar suave. Vale 0 abaixo da primeira borda, 1 acima da segunda e segue uma curva em S com as pontas planas entre elas.t = clamp((x − e0) / (e1 − e0), 0, 1); s = t² (3 − 2t)
A outra escolha é em que espaço de cor a mistura acontece. As mesmas duas pontas misturadas como valores sRGBA codificação padrão das cores de tela. Os valores guardados seguem uma curva próxima de uma potência 1/2.2 da luz, então precisam ser decodificados antes de iluminar ou mesclar. sRGB A codificação padrão das cores de tela. Os valores guardados seguem uma curva próxima de uma potência 1/2.2 da luz, então precisam ser decodificados antes de iluminar ou mesclar. OKLab Um espaço de cor em que distâncias iguais parecem diferenças iguais: L é a luminosidade, a vai do verde ao vermelho e b do azul ao amarelo. Rampas misturadas nele ficam uniformes.linear = ((c + 0.055) / 1.055)^2.4 for c > 0.04045
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
- HSL and HSV (abre em uma nova aba)Referência
- A perceptual color space for image processing (abre em uma nova aba)Artigo
- mix (abre em uma nova aba)Referência
- clamp (abre em uma nova aba)Referência
- Linear interpolation (abre em uma nova aba)Referência
- step (abre em uma nova aba)Referência
- smoothstep (abre em uma nova aba)Referência
- Shaping functions (abre em uma nova aba)Livro
- gl_FragCoord (abre em uma nova aba)Referência
- Uniforms (abre em uma nova aba)Livro
- UV mapping (abre em uma nova aba)Referência
- Euclidean vector (abre em uma nova aba)Referência
- length (abre em uma nova aba)Referência
- normalize (abre em uma nova aba)Referência
- Colors (abre em uma nova aba)Livro
- CanvasItem shaders (abre em uma nova aba)Documentação
- CSS Color Module Level 4 (abre em uma nova aba)Referência
- GPU Gems 3, chapter 24: The Importance of Being Linear (abre em uma nova aba)Livro
- sRGB (abre em uma nova aba)Referência