Conteúdo deste artigo
Nota do editor: E continuamos nossa celebração da comunidade Three.js enquanto fazemos a contagem regressiva para a primeira Conferência Three.js em Paris em setembro deste ano. Neste novo tutorial, Dominik Fojcik compartilha um pequeno truque de mágica para dar vida a imagens 2D com profundidade, luz e sombra, usando Three.js, TSL e WebGPU.
🇫🇷 Você está pensando em Paris? Como parte de nossa parceria com a primeira Conferência Three.js, os leitores do Codrops podem usar o código CODROPS para obter 15% de desconto . Obtenha seu ingresso →
Já vi muitos efeitos de imagem legais na web, mas a maioria deles ficam na superfície. E se você pudesse ir mais longe e fazer o efeito mergulhar na imagem? Algo que realmente entra na imagem como uma luz.
A chave para isso é um mapa de profundidade. Algo que antes parecia mágico agora é possível graças aos modelos de estimativa de profundidade, que se tornaram realmente bons para estimar a profundidade a partir de imagens 2D.
Mapa de profundidade
Este é o ingrediente principal do nosso efeito. Para conseguir um, precisamos alimentar um modelo de estimativa de profundidade com nossa imagem e usá-lo para gerar um mapa de profundidade. Você mesmo pode instalar um modelo como Depth Anything 3 ou usar uma Depth Generation Tool que criei para este artigo.
O mapa de profundidade bruto tem um problema que você não pode ver, mas o luz pode. É uma imagem de 8 bits, portanto possui apenas 256 valores de profundidade possíveis, e superfícies lisas são quantizadas em etapas planas. A iluminação lê a inclinação deste mapa e, a cada passo, a encosta aumenta repentinamente, de modo que o sombreamento que deveria fluir pela pedra lisa se transforma em um ruído arenoso e manchado. Para corrigir isso, convertemos o mapa de profundidade em flutuadores e o desfocamos para suavizar essas etapas.
Primeiro, convertemos os valores de profundidade de 8 bits em valores de ponto flutuante, desfocamos-os para remova as etapas visíveis e, em seguida, armazene o resultado como dados meio flutuantes para que possamos preservar informações de profundidade mais suaves.
###PRE_c536d718f6acccd74513a996fbd8cfe5###
Fingindo a superfície com um mapa normal
Como fazemos a luz agir como se nossa imagem fosse 3D? A resposta é um mapa normal .
A iluminação na verdade não se preocupa com a forma em si, ela se preocupa com normais : a direção de cada ponto em uma superfície. Um ponto voltado para a luz é brilhante, um ponto inclinado é escuro. Esse é todo o truque desse efeito.
Então, em vez de construir uma geometria real, podemos dar a cada pixel uma normal que faz o plano parecer tridimensional à luz.
Para criar o mapa normal, usaremos nosso mapa de profundidade. A função depthGradient faz uma amostra da textura do mapa de profundidade e calcula a inclinação da superfície que podemos usar para criar nosso mapa normal.
###PRE_f522cb4ba86377d9db83c2ef1d19636b###
Quando visualizado como cores, o mapa normal fica assim:
Para adicionar ainda mais detalhes, executo o mesmo truque na própria foto, usando brilho em vez de profundidade. É uma trapaça – uma faixa escura pintada inclina o normal da mesma forma que um groove real faria – mas sob uma luz em movimento parece um detalhe de superfície. Os dois gradientes são simplesmente somados:
###PRE_3c8012f3feac30cf4a994c4669baafae###
Aqui está o normal antes e depois de adicionar os detalhes.
Sombras
Normais fazem a imagem reagir à luz como uma superfície 3D, mas não podem fazer uma parte projetar sombra sobre outra. Para encontrar sombras, cada pixel traça uma linha em direção à luz através do mapa de profundidade. Se detectar uma colisão ao longo do caminho, o pixel estará na sombra.
O mapa de profundidade é amostrado em vários pontos ao longo deste caminho, e a quantidade de oclusão é acumulada para criar uma sombra suave.
###PRE_0de1b46d332bc5a905e0e9ba9b54181e###
Material
Todos os três ingredientes são passados para MeshPhongNodeMaterial, que trata do cálculo real da iluminação para nós:
###PRE_de654ef62b28671567a9064ff6f478bb###
Aqui, a imagem se torna o de acordo com a cor do material, nossas normais geradas controlam como a superfície reage à luz e as sombras baseadas em profundidade são adicionadas como oclusão de ambiente.
Palavras finais
Espero que este pequeno truque de mágica lhe dê alguma inspiração para criar seus próprios efeitos interessantes com profundidade mapas. Ainda há muito potencial inexplorado neste campo.
Desejamos a você tudo de melhor na próxima conferência Three.js! Não consegui ir esse ano, mas espero que na próxima!
