Implementação do efeito de adesivo foil
(4rknova.com)- Código-fonte de shader para implementar o efeito de adesivo foil, simulando de forma realista os reflexos e o brilho da superfície
- Permite ajustar com precisão várias características, como metallicidade, rugosidade e reflexo iridescente
- O ponto central é a reprodução do efeito de micro partículas (flakes) da superfície foil e das cores iridescentes que mudam conforme o ângulo
- Utiliza várias técnicas de computação gráfica baseadas em física, como amostragem de environment map, efeito Fresnel, sombra AO e alpha cutoff
- Uma implementação avançada de shader que pode ser usada para renderização de adesivos foil em alta qualidade em ambientes 2D/3D reais
Visão geral
Este conteúdo apresenta um código de shader GLSL para implementar um efeito visual brilhante como o de um adesivo foil. O objetivo é criar uma textura visual de alta qualidade combinando metallicidade, iridescência, efeito de micro partículas na superfície e reflexos do ambiente. O efeito foil realista é gerado com o uso de textura 2D, environment map e vários parâmetros de ajuste.
Principais variáveis e constantes
- O efeito pode ser ajustado com diversas variáveis uniform
- Ex.:
uFlakeSize(tamanho dos flakes),uRoughness(rugosidade),uMetalness(metallicidade),uIridescence(iridescência) etc.
- Ex.:
- Suporte a texturas, environment map e informações do sistema de coordenadas do mundo
Estrutura principal das funções
Função hash (hash)
- Usada para gerar valores aleatórios necessários ao efeito de micro partículas (flakes)
Conversão de coordenadas do environment map (dirToEquirectUv) e amostragem do environment map (sampleEnvRough)
- Dá suporte à amostragem por direção no environment map
- Aplica o mip level adequado de acordo com a rugosidade (lod)
Efeito iridescente (iridescenceColor)
- Gera cores dinamicamente de acordo com o ângulo e a espessura da superfície
- Assim como em uma superfície foil real, a cor muda conforme o ângulo de visualização
Luminância (luminance)
- Calcula a informação de brilho da cor para uso em pós-processamento e afins
Lógica principal do shader
Alpha cutoff e tratamento de frente/verso
- Determina se o pixel sobrevive com base no valor alfa da textura base
- Ajusta intensidade de AO, tratamento de descolamento (peeled) e cor de acordo com frente/verso
Processamento de reflexão, flakes, iridescência e metallicidade
- Calcula normal da superfície (
normal), vetor de visão, vetor de reflexão e reflexos do ambiente - Para o efeito de flakes, aplica hash por posição e offset aleatório por ângulo
- Permite controlar com precisão brilho, máscara, boost etc. dos flakes
- Usa
perturbedNormalpara refletir o deslocamento da superfície dos flakes - Mistura os flakes e a cor ao redor com cores iridescentes
Combinação do environment map e cálculo da cor final
- Altera a rugosidade dinamicamente conforme a intensidade dos flakes
- Aumenta o realismo com mascaramento de metal/normal/reflexão e cálculo de Fresnel
- Gera a cor final combinando componentes diffuse (difusa) e spec (reflexiva)
- Produz a saída como cor final junto com o alfa base
Implicações
Este shader é adequado para reproduzir com realismo os efeitos visuais complexos característicos de materiais foil (reflexos fortes, micro partículas, iridescência etc.). Como permite ajustar o efeito com precisão por meio de diversos parâmetros, ele oferece personalização flexível e renderização de adesivos foil de alta visibilidade. Tem grande potencial de uso em 3D, web 2D, jogos, UI interativa e vários outros contextos.
1 comentários
Comentários no Hacker News
Quando eu trabalhava com desenvolvimento de jogos mobile, já implementei um efeito em cartas legais em que o “brilho” mudava conforme a inclinação do celular, como se fosse um objeto 3D real. Acho curioso que hoje em dia o iOS ofereça esse tipo de efeito de adesivo nativamente
Um site de marketplace de cartas de Magic está aplicando um efeito simples de CSS em cartas foil. Mas eu sempre fico pensando em como implementar, de forma mais realista, os diversos efeitos foil que se vê nas cartas reais de Magic, sem perda de performance e de um jeito que se encaixe bem na UX CRUD em Svelte
A tecnologia de shaders é realmente fascinante. No site Shadertoy, dá para testar vários shaders na prática
Tim Oliver já fez uma apresentação excelente sobre a experiência de criar o efeito de foil holográfico aplicado ao "golden ticket" do Threads. O vídeo pode ser visto aqui
Eu acho esse efeito realmente muito bonito e visualmente impressionante, mas, para ser sincero, não gosto tanto assim do efeito foil cintilante em si. Ele também é usado em adesivos e cartas, mas acho mais agradável quando esse tipo de estilo aparece só como um toque de brilho metálico suave. Talvez eu seja minoria, mas vendo a popularidade desse efeito, parece que esse gosto continua sendo bem nichado
É um efeito realmente incrível. Lembrei do shader de grade de difração que Alan Zucconi criou para renderizar CDs. Dá para conferir aqui
O resultado ficou mais legal do que eu esperava. Foi divertido ajustar os parâmetros e observar a imagem refletida do cômodo inteiro
No iOS existe um efeito de adesivo “shiny” que reage quando você inclina o celular. Quando vi isso pela primeira vez, fiquei realmente impressionado
É meio off-topic, mas ao ler este post pensei que, no futuro, a IA também poderá aprender formas de implementar esse tipo de efeito. Por um lado, isso dá uma sensação de libertação, porque a IA acaba funcionando como o bookmark definitivo, a ponto de nem ser mais preciso acumular favoritos. Mas, por outro, também há algo triste e amargo na ideia de que posts legais como este talvez não sejam devidamente reconhecidos pela IA
Fico muito feliz por poder encontrar textos interessantes e inesperados como este