Janelas de profundidade: paralaxe com rastreamento facial no navegador

A ideia começou de uma pergunta simples: dá para fazer o monitor parar de ser uma imagem plana e passar a se comportar como uma janela real, com profundidade e paralaxe, sem headset e sem hardware especial? A resposta é sim, e a peça central não é nova — é uma técnica de projeção de 2009 que a computação gráfica usa há tempos em CAVEs e simuladores. O que mudou é que hoje ela cabe inteira num navegador, rodando sobre a própria webcam do usuário.

O truque não é mover a câmera. É deformar a lente.

A primeira tentativa ingênua de "efeito 3D com webcam" costuma ser: pegar a posição da cabeça e mover a câmera virtual dentro da cena junto com ela. Isso produz um efeito de rotação, não de janela — a cena gira em torno de um eixo, mas não ganha profundidade real. O efeito de janela de verdade exige outra conta: a de Robert Kooima, descrita no relatório técnico Generalized Perspective Projection (2009), que trata a tela como um retângulo fixo no espaço e recalcula, a cada posição do olho, um frustum de câmera assimétrico — a pirâmide de visão que a GPU usa para projetar a cena não fica mais centrada, ela se inclina para compensar de onde você está olhando.

Isso é exatamente o mesmo princípio por trás da demonstração de Johnny Chung Lee com o sensor infravermelho do Wii Remote, que popularizou a ideia de "realidade virtual de mesa" em 2007: um sensor barato rastreando a cabeça, e o resto é matemática de projeção. A diferença é que, hoje, o sensor infravermelho dedicado virou uma webcam comum e um modelo de rastreamento facial rodando via WebAssembly.

Antes de seguir para a próxima peça, vale ver essa deformação de frustum funcionando — e vale ver num ambiente que você reconhece, não num cubo genérico. Um cenário abstrato deixa a matemática óbvia, mas esconde o efeito de verdade: um espaço reconhecível é o que deixa claro quando um canto "está errado" e quando ele volta a fazer sentido conforme você se move. A caixa abaixo é um quarto, livremente inspirado no quarto de Van Gogh em Arles.

Abrir experiência

Processado localmente no seu navegador. Nenhum vídeo é enviado a servidores.

A peça que faltava: rastreamento facial sem instalar nada

Para estimar onde estão seus olhos, uso o Face Landmarker do MediaPipe, um modelo que roda inteiramente no navegador (WebAssembly + GPU delegate) e devolve os pontos da íris a cada quadro de vídeo. A distância entre os cantos externos dos olhos, em pixels, vira uma estimativa de distância até a tela; a posição do centro dos olhos vira deslocamento lateral e vertical. Com isso, a cada frame eu tenho uma posição 3D aproximada da cabeça do visitante, em centímetros, relativa ao centro da tela — e é essa posição que alimenta a projeção assimétrica renderizada com Three.js.

A camada final, que fecha a ilusão, é a sombra. Um corpo (uma cabeça e ombros simplificados) segue essa mesma posição rastreada, mas fica num layer de renderização que a câmera principal nunca desenha — só a luz enxerga esse layer ao calcular seu mapa de sombra. O resultado é uma sombra real, projetada no piso e na parede da cena, que se move e cresce conforme você se aproxima da tela, sem que nenhuma forma extra apareça flutuando na sua frente.

Essa segunda caixa troca o interior por um exterior: uma paisagem ao entardecer, colinas se perdendo na neblina até o horizonte. Não tem paredes — o próprio céu, desenhado como uma cúpula ao redor de toda a cena, garante que nunca falta o que ver, não importa para que canto você olhe.

Abrir experiência

Processado localmente no seu navegador. Nenhum vídeo é enviado a servidores.

Da janela do quarto ao horizonte de uma cidade

As duas primeiras cenas são ambientes baixos e horizontais — um quarto, um campo. A terceira inverte isso: uma rua à noite, prédios altos dos dois lados com janelas acesas em ritmo aleatório, recuando até uma lua no fundo. Mesmo motor de projeção e rastreamento, composição completamente diferente — profundidade vertical e densa, em vez de aberta.

Abrir experiência

Processado localmente no seu navegador. Nenhum vídeo é enviado a servidores.

Uma janela por vez

As três experiências deste post compartilham o mesmo motor de rastreamento, mas nunca ficam abertas ao mesmo tempo: abrir uma fecha automaticamente a anterior, libera a câmera e descarta a cena 3D da memória da GPU. Isso não é só economia de recursos — é a forma certa de pedir uma webcam num artigo. A câmera de quem lê não é um recurso de decoração; é confiança emprestada, e a interface precisa devolver o controle assim que a demonstração termina.

Onde isso serve, além de truque bonito

Como Product Designer trabalhando entre fotografia e interface, o que me interessa aqui não é o efeito em si, mas o que ele deixa entrever: mostruários de produto que respondem à cabeça de quem olha, cenas ilustrativas de portfólio que ganham profundidade real sem depender de nenhum asset 3D pesado — só primitivas geométricas, luz e uma câmera bem calculada —, ou seções inteiras de um site que se comportam como espaços físicos em vez de imagens fixas. A técnica é barata em termos de infraestrutura: não existe servidor, não existe upload, é só matemática de projeção e um modelo de visão computacional rodando no dispositivo do visitante.

Referências

• Robert Kooima, Generalized Perspective Projection (Louisiana State University, 2009) — a formulação do frustum assimétrico usada aqui.
• Johnny Chung Lee — Head Tracking for Desktop VR Displays using the Wii Remote, a demonstração de 2007 que popularizou a técnica com hardware de consumo.
• MediaPipe Face Landmarker, o modelo de rastreamento facial que roda no navegador via WebAssembly.
• Three.js, a biblioteca WebGL usada para renderizar as três cenas.

Sobre o autor

Bolívar Alencastro

Product Designer em São Paulo, cruzando fotografia, interface e código para testar até onde a tela deixa de ser plana quando alguém do outro lado está mesmo olhando.

• LinkedIn
• Instagram