Eu acho que você deve pensar no efeito como "calcular um mapa de onde a água está" + "gerar um vetor normal desse mapa e usá-lo para compensar uma pesquisa de textura de fundo".
Quebrando o que o seu exemplo shadertoy faz, ele apenas calcula uma "trilha" para mostrar onde ocorre a desembaçamento:
Calcula as normais das gotas de chuva circulares,
e usa esse mapa normal para compensar uma pesquisa de textura para refração falsa.
Se você deseja que as trilhas sejam feitas via pós-processamento em um sombreador, basta criar a forma "trilha" no sombreador usando alguma álgebra. Por exemplo, na função a seguir, sobreponha um "caminho instável" e um atarraxamento na cabeça e na cauda para obter
float trailDrop(vec2 uv, vec2 id, float t) {
// wobbly path
float wobble = 0.5 + 0.5
* cos(120.0 * uv.y)
* sin(50.0 * uv.y);
float v = 1.0 - 10.0 * abs(uv.x - 0.5 + 0.2 * wobble);
// head
v *= clamp(30.0 * uv.y, 0.0, 1.0);
v *= clamp( uv.y + 7.0 * t - 0.6, 0.0, 1.0);
// tail
v *= clamp(1.0 - uv.y - pow(t, 2.0), 0.0, 1.0);
return clamp(v * 10.0, 0.0, 1.0);
}
Aqui está um POC aproximado em shadertoy - https://www.shadertoy.com/view/XlBfz1 demonstrando a criação de um conjunto de trilhas de chuva. Parece granulado em pequenas resoluções devido à resolução de derivativos, mas deve parecer melhor se você a exibir em tela cheia.
Editar: Adicionado um exemplo com gotas de chuva sobrepostas
Deixado como um exercício para o leitor:
1) Adicione as pequenas gotas redondas. para inspiração, veja a StaticDrops
função no seu exemplo shadertoy original.
2) Adicione cálculos normais de alta qualidade. Como #define CHEAP_NORMALS
implica a opção no seu exemplo shadertoy original, o dFdx interno é uma aproximação de baixa fidelidade e você pode obter melhores resultados calculando manualmente as derivadas (ao custo de calcular a função 3 vezes).
3) Aleatorizar o espaçamento entre as colunas. Você pode ampliar as colunas e modificar o uv.x - 0.5 + 0.2 * wobble
bit para adicionar um deslocamento aleatório no eixo x. Você provavelmente também desejará tirar uma página do exemplo original mais uma vez e colocar duas camadas de fluxos de tamanhos diferentes umas sobre as outras para obter uma aparência menos uniforme.
você pode fazer esse efeito seguindo as etapas abaixo:
Partícula
RenderTextuer
você pode armazenar o resultado usando RenderTexture. este é um exemplo de multipass em shadertoy:
https://www.shadertoy.com/view/ltccRl
Criei uma câmera para Rendering particulas to RenderTexture:
GrabPassing
você pode pegar o passe para aplicar a distorção
Eu expliquei isso neste post:
Como replicar o efeito de partícula de distorção do Quantum Break?
Borrão
usando alfa em cores ao longo da vida, temos um desfoque simples
para obter melhores resultados, é melhor usar o desfoque simples, mas como conseguimos o desfoque?
Matriz de convolução
No processamento de imagens, um núcleo, matriz de convolução ou máscara é uma matriz pequena. É usado para desfoque, nitidez, gravação, detecção de bordas e muito mais. Isso é realizado fazendo uma convolução entre um kernel e uma imagem.
para mais detalhes, siga este link
Borrão de caixa
Repetição
você pode usar Rendertexture para armazenar o quadro anterior. repetindo isso, você obtém desfoque.
Normal
Conclusão
Shader final:
sem usar alfa em cores durante a vida útil:
usando alfa em cores ao longo da vida útil:
A fonte está disponível:
https://github.com/smkplus/RainDrop
Tem mais!
também você pode fazer ondulações
Links Úteis
https://80.lv/articles/breakdown-animated-raindrop-material-in-ue4/
https://seblagarde.wordpress.com/2013/01/03/water-drop-2b-dynamic-rain-and-its-effects/
fonte
Na verdade, havia uma pergunta sobre isso anos atrás, mas ela não se refere à Unidade (infelizmente). Se você olhar o slide 57 da apresentação vinculada, eles mencionarão uma abordagem baseada em grade.
Há uma pergunta um pouco relacionada à Física SE que você pode achar interessante. O link para droplet.pdf na questão vinculada está quebrado, mas ainda está no Wayback Machine. Ele aborda algumas das matemáticas da água que escorrem de alguns tipos de superfícies. As gotas preferem viajar em caminhos usados anteriormente por gotas de chuva anteriores, por exemplo (consulte a p926).
Você provavelmente poderia modelar as cabeças e caudas de cada "gota de chuva" e permitir que ela ziguezagueie um pouco. Quando duas gotas de chuva alongadas colidem, suponho que você possa combiná-las em uma gota de chuva maior e mais rápida. O volume de água permanece o mesmo. Ele está apenas sendo movido e modelado pelas forças da gravidade, adesão ao vidro e coesão.
fonte