Dissolução
Fazer uma superfície queimar ou se materializar em manchas irregulares, comparando um ruído com um limiar que se move.
Cards
Um exemplo ao vivo para ajustar, aprender e copiar.
Como funciona
Uma dissolução esconde uma superfície um pedaço de cada vez, em vez de apagar tudo de uma vez. Cada pixel recebe um
valor aleatório fixo de uma função de ruídoUma função pseudoaleatória e suave da posição. Valores ou gradientes aleatórios ficam numa grade e são misturados entre os pontos, então pontos próximos recebem valores parecidos e o resultado não tem padrão visível. Ruído Uma função pseudoaleatória e suave da posição. Valores ou gradientes aleatórios ficam numa grade e são misturados entre os pontos, então pontos próximos recebem valores parecidos e o resultado não tem padrão visível.
Por que é barata e por que funciona bem na tela
O efeito inteiro é uma consulta de ruído e uma comparação por pixel, e o limiar é a única coisa que muda com o tempo.
Animá-lo é trabalho de quem controla o objeto: um script anima o limiar quando um inimigo morre, uma timeline o conduz
numa cutscene, ou o time o alimenta direto numa demonstração em loop. O ruído não se mexe, então as manchas crescem
no lugar, e o olho entende isso como um material sendo consumido, e não como um padrão deslizando por cima dele.
A comparação também dá uma borda de graça. Os pixels cujo ruído está só um pouco acima do limiar são os próximos a
sumir, então 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. 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 = clamp((x − e0) / (e1 − e0), 0, 1); s = t² (3 − 2t)
Escondendo os pixels
O jeito como os pixels somem depende do estágio. Numa superfície 3D, o shader devolve um alfa de 0 ou 1 e o material
usa recorte por alfaDescartar todo fragmento cujo alfa fica abaixo de um limiar e desenhar o resto totalmente opaco. A superfície continua na passagem opaca, grava profundidade e não precisa de ordenação, mas as bordas ficam duras. Recorte por alfa Descartar todo fragmento cujo alfa fica abaixo de um limiar e desenhar o resto totalmente opaco. A superfície continua na passagem opaca, grava profundidade e não precisa de ordenação, mas as bordas ficam duras.if (alpha < threshold) discard;
Escolhendo o ruído
O tamanho das manchas é a escala do ruído. O ruído de valor, feito com o hash nos cantos da grade, é o mais barato e basta aqui, porque a borda disfarça a grade quadriculada dele; o ruído de gradiente ou algumas oitavas de fBm dão bordas mais irregulares e naturais, com um pouco mais de conta. Uma textura de ruído também serve, e uma pintada à mão deixa o artista decidir onde o buraco abre primeiro.
Leitura complementar
- step (abre em uma nova aba)Referência
- smoothstep (abre em uma nova aba)Referência
- Shaping functions (abre em uma nova aba)Livro
- Uniforms (abre em uma nova aba)Livro
- Window: requestAnimationFrame() method (abre em uma nova aba)Documentação
- The OpenGL ES Shading Language, version 3.00 (abre em uma nova aba)Documentação
- Noise (abre em uma nova aba)Livro
- Value noise (abre em uma nova aba)Referência
- Value noise derivatives (abre em uma nova aba)Artigo
- Standard Material 3D and ORM Material 3D (abre em uma nova aba)Documentação
- Spatial shaders (abre em uma nova aba)Documentação
- Blending (abre em uma nova aba)Artigo