Bluestone Lane

Descrição

Bluestone Lane é uma obra em tempo real, com três a quatro minutos de duração, que roda no navegador. Anoitece numa velha rua à espera da demolição: do outro lado da rua, todas as portas de enrolar estão baixadas, as paredes exibem o caractere 拆 (“demolir”) dentro de círculos pintados, e um dos prédios já está meio demolido. Só uma porta de enrolar ainda está meio aberta — a de uma pequena oficina de conserto de eletrodomésticos, onde o robô que um velho técnico montou com o gabinete de um rádio, uma lente de câmera e canos hidráulicos continua sentado num banquinho ao lado da bancada.

Clique para começar: a câmera entra caminhando, vinda da rua, e contorna o robô até ficar diante do rosto dele. Segure o botão esquerdo do mouse ou a barra de espaço para abrir a íris da lente — a primeira tentativa sempre falha, então solte e segure de novo. Continue segurando e mova o mouse: a cabeça do robô acompanha o movimento e, onde quer que a luz dele caia, o passado volta.

O primeiro ato se passa na oficina. Fora do feixe está o presente: tudo empoeirado e desbotado, teias de aranha nas prateleiras, lascas de reboco e cacos de vidro no chão, e a TV sobre a caixa de papelão, o relógio de parede, o ventilador de mesa e o rádio valvulado, todos quebrados. Onde a luz cai, as coisas estão como eram: a TV exibe sua programação, o rádio acende o dial e toca uma melodia, e o pêndulo do relógio balança.

Depois de um tempo, a mesma melodia chega, baixinho, do outro lado da rua. O robô vira a cabeça para ouvir enquanto o enquadramento recua até a porta; a luz dele vacila, a estática vai se infiltrando na música, a imagem perde o sincronismo a todo momento e, num último rasgo, a cena corta para o segundo ato.

O segundo ato se passa na rua. Qualquer uma das cinco lojas do outro lado da rua em que o feixe pousar volta a um fim de tarde de meados dos anos 1990 — luzes acesas lá dentro, roupas estendidas nas sacadas, vizinhos em banquinhos baixos junto à porta — e você ouve os sons daquela loja. As lojas que você já encontrou continuam acesas; as que ainda não encontrou chamam por você com seus letreiros e seus sons. A energia vai se esgotando enquanto você olha. O último olhar do robô volta para a loja de eletrônicos de onde vem a melodia, e a rua inteira se acende por um instante; então a energia acaba, o feixe tremula e se apaga, a música para no meio de uma frase, e a rua volta a ser o que é hoje. O final olha para fora, de dentro da oficina: o robô continua de frente para a rua escura, uma lâmpada se acende do outro lado da rua, e a última frase diz: “Ele se lembra da rua de luzes acesas.”

Depois da cartela final, clique para assistir de novo. A interface é em inglês por padrão, com um link na tela inicial para mudar para chinês; no celular, mantenha o dedo pressionado na tela e deslize-o. Recomenda-se usar fones de ouvido e um navegador com WebGPU, como uma versão recente do Chrome ou do Edge; navegadores sem WebGPU passam automaticamente para WebGL2. O primeiro carregamento demora um pouco, porque é preciso baixar os modelos e pré-compilar os shaders.

Como o Tripo foi usado

O Tripo gerou mais de vinte objetos da oficina: o robô, dois rádios valvulados (um aberto para conserto, outro fechado), dois televisores CRT, um ventilador de mesa, um relógio de parede, um despertador, um gravador cassete, uma luminária de mesa, um ferro de solda, uma lupa, uma caixa de ferramentas, um gaveteiro de peças, a bancada, uma bicicleta de passeio aro 28, uma garrafa térmica, uma caneca esmaltada e o braço, a perna e o torso sobressalentes — além de quatro versões quebradas feitas especialmente. As paredes e o piso do cômodo, as prateleiras e as caixas de papelão sobre elas, os cabos, a parede de ferramentas e os objetos pequenos da bancada são geometria construída em código; a fileira de lojas do outro lado da rua é feita de duas fotografias geradas (“agora” e “antes”), não de modelos.

• Da referência ao modelo: cada objeto começa como uma renderização de produto sobre um fundo liso cinza-claro, que depois vai para o Tripo. Antes da modelagem, três abordagens foram comparadas no rádio aberto — image-to-3D direto, imagem para multivista e depois para 3D, e uma folha de quatro vistas montada à mão convertida em 3D —, e a maioria dos modelos seguiu a rota imagem → multivista → 3D, com geometria e texturas detalhadas, mapas PBR e a iluminação embutida removida das texturas, para que a luminária de mesa, o crepúsculo lá fora e o feixe do robô se encarreguem da iluminação.
• O robô: o Tripo o entregou como uma única malha — cabeça, corpo e banquinho fundidos entre si. Em vez de cortar a cabeça, o autor lhe deu um “pescoço macio” no vertex shader: um peso calculado a partir da posição vale 1 na cabeça feita do gabinete do rádio, 0 no corpo e nos ombros, e varia gradualmente ao longo do pescoço e dos cabos ao redor dele; assim, ao virar a cabeça, cada vértice é torcido em torno do pescoço na fração do ângulo que lhe cabe. Nada é cortado, então nenhuma costura pode se abrir, e os cabos se enrolam no pescoço conforme ele gira. O banquinho foi separado com um script do Blender, para que, no segundo ato, o robô inteiro gire sobre ele até ficar de frente para a rua. O emblema cromado “上海” (Xangai) no rosto e a plaqueta “人民电器” (Elétrica do Povo) no peito são geometria do próprio modelo, e o mesmo design gerou o braço, a perna e o torso sobressalentes pendurados nos ganchos da parede e apoiados junto à bancada.
• Versões quebradas: para que o presente fora do feixe e o passado dentro dele combinassem, a TV sobre a caixa de papelão, o relógio de parede, o ventilador de mesa e o rádio valvulado ganharam, cada um, uma segunda versão, deteriorada — a imagem de referência foi retrabalhada para parecer danificada e depois modelada com as mesmas configurações do Tripo. As duas versões ficam no mesmo lugar: os pixels que o feixe toca mostram a intacta, e o restante mostra a quebrada.
• Malhas brutas na web: cada modelo bruto do Tripo tem cerca de 1,9 milhão de triângulos e texturas 4K (8K no caso do robô). Em vez de decimá-los no Blender — o que rasga as costuras das texturas e deixa rachaduras brancas visíveis de perto —, o autor os simplificou com meshopt preservando as costuras, em vários níveis de detalhe, cada um com seu erro medido. Em tempo de execução, cada objeto mostra apenas o nível cujo erro fica abaixo de um pixel da tela e cuja textura não é mais grosseira que a tela: níveis mais simples de longe, mais finos à medida que você se aproxima. No site publicado, o nível mais fino fica a uma fração de milímetro da malha bruta. Os níveis mais grosseiros carregam primeiro e o restante chega por streaming conforme a necessidade, sendo liberado de novo quando a memória de vídeo passa do orçamento.
• Visualizador de modelos: adicione ?review ao endereço para entrar no modo de inspeção, com iluminação de inspeção intensa; arraste para orbitar, use a rolagem para dar zoom e pressione 1–8 para as vistas predefinidas. Dê um clique duplo em qualquer modelo e a câmera desliza até ele, com o nome do modelo e sua contagem bruta de triângulos do Tripo no canto inferior esquerdo.

Como roda no navegador

Não há motor de jogo: a obra é construída diretamente sobre o renderizador WebGPU do three.js, com Vite, e navegadores sem WebGPU passam automaticamente para WebGL2.

O passado é calculado pixel a pixel. O olho do robô projeta um cone de luz, e cada pixel é testado contra ele durante a renderização: dentro do cone, você vê os modelos intactos, as TVs ligadas e uma gradação de cor mais quente; fora dele, o presente empoeirado e desbotado — e as versões quebrada e intacta se alternam com base nessa mesma máscara. As duas fotografias do outro lado da rua alternam entre o agora e o antes da mesma forma, e a vitrine da loja de eletrônicos é uma pequena loja 3D de verdade, com TVs que também exibem sua programação.

A obra abre rápido e roda com fluidez graças a três coisas. Todos os shaders são compilados de forma assíncrona e em paralelo, e um objeto cujo shader ainda não está pronto é simplesmente pulado naquele quadro, em vez de atrasá-lo. A tela de carregamento desenha cada objeto uma vez em cada passe (pré-passe de profundidade, passe principal e cada mapa de sombras), então, depois que você clica para começar, nada é compilado no meio da história. E a renderização é limitada a cerca de 2,1 milhões de pixels (aproximadamente 1080p), com a resolução caindo automaticamente quando os quadros demoram demais. Quando um modelo muda de nível, os dois níveis são desenhados ao mesmo tempo em conjuntos complementares de pixels aleatórios e fazem um crossfade de 0,35 segundo, suavizado pelo anti-aliasing temporal, para que nada “salte” de perto. Adicione ?q=low para um modo de baixa qualidade (sem oclusão de ambiente nem reflexos em espaço de tela; mapas de sombras com metade do tamanho).

O som sobrepõe gravações de campo CC0 e síntese com Web Audio: a rua ao entardecer lá fora, o zumbido da lâmpada fluorescente e da rede elétrica, o tique-taque do pêndulo, um tom de teste de TV, os servos do robô e o som do olho dele se abrindo — e a melodia do rádio é uma composição pentatônica original. No segundo ato, cada loja do outro lado da rua tem seu próprio som.

Ao longo do processo, o autor também corrigiu um bug no renderizador WebGPU do three.js r186: quando dois modelos diferem apenas na forma como suas normais são armazenadas (Int8 versus Int16), o renderizador permite que compartilhem um único pipeline, e assim o que for desenhado em segundo lugar lê seus vértices no formato errado e sua superfície se ilumina numa bagunça que lembra camuflagem. O WebGL2 não é afetado.