Autor: Theodore
Experimente ao vivo Descrição
Willow Ferry é uma vila aquática de Jiangnan renderizada em tempo real no navegador: paredes brancas e telhas escuras, empenas em cabeça de cavalo, fachadas de lojas com treliças sob beirais com lanternas penduradas, uma ponte de pedra em arco sobre o canal, barcos wupeng atracados junto aos degraus e salgueiros pendendo sobre a água verde-jade. A tela de carregamento dá o tom: “Follow the water. Come home a little late.”
A vila tem seu próprio dia — hora dourada, hora azul, noite de luar, amanhecer, manhã, tarde —, que dá uma volta completa em cerca de sete minutos, com o sol e a lua sempre em movimento e as sombras girando lentamente atrás deles. Segure T para fazer as horas passarem mais depressa, ou pressione 1–5 para ir direto para a tarde, a hora dourada, a hora azul, o luar ou a chuva enevoada. A chuva enevoada é uma condição do tempo, e não um horário: ao escolhê-la, o relógio fica parado até você escolher outro horário.
As teclas ←/→ percorrem seis pontos de vista: Willow Bank, Moon Bridge, Ferry Steps, Tea Pavilion, Town in the Mist e The Slow Boat. Cada um vem acompanhado de uma frase curta, algumas das quais mudam conforme o horário — na hora dourada, Willow Bank exibe “The sun rests in the arch.” —, e a frase de Moon Bridge é uma releitura do poema “Fragmento” (断章), de Bian Zhilin: “You stand on the bridge to watch the view. / From a window, someone watches you.”
Arraste para olhar ao redor, use a rolagem para deslizar para a frente, caminhe com WASD (Shift para ir mais rápido, Q/E para subir e descer) e clique para focar. O botão de abertura vai de f/1.4 a f/16, e a última posição desliga a profundidade de campo para que tudo fique nítido; há um leve balanço de câmera na mão (Drift), que pode ser desligado, e H oculta a interface. Clique em “Ride the boat” e a câmera desce suavemente até a proa enquanto o barco vai flutuando pelo canal: ←/→ (A/D) mudam a direção, ↑ (W) rema com mais força, ↓ (S) alivia o ritmo e, quando você solta, o barco reencontra sozinho a trajetória. O quanto ele pode se desviar foi medido ao longo do percurso, de modo que ele nunca bate nas margens de pedra, nos barcos atracados nem no arco da ponte.
A vila inteira é feita por código: as casas, a ponte de pedra em arco, os barcos wupeng, as lanternas, os salgueiros, os pessegueiros e os blocos e degraus das margens de pedra são todos gerados por scripts em Blender Python e exportados como GLB. O gerador de casas divide os lotes, escolhe os tipos de casa, define as empenas em cabeça de cavalo de acordo com a altura e encaixa pequenos jardins murados entre elas; só a casa principal, junto aos degraus do embarcadouro, é posicionada à mão. Os céus e parte das superfícies de reboco, pedra, madeira e seixos vêm de céus fotográficos e texturas escaneadas CC0 do Poly Haven; todas as outras texturas, e todo o som, também saem dos scripts.
A interface é só em inglês, e o som começa com o seu primeiro clique. Funciona melhor no Chrome, no Edge ou no Safari para desktop e passa para WebGL2 quando não há WebGPU; a primeira visita baixa pouco mais de 40 MB, então a tela de carregamento fica visível por alguns instantes.
Como roda no navegador
A parte web é construída sobre o renderizador WebGPU do three.js r186, com Vite, e os modelos são comprimidos com meshopt. À medida que os modelos chegam do Blender, seus materiais são reconstruídos em TSL com base no nome: manchas na linha-d’água, musgo, cáusticas, desgaste do tempo, o balanço ao vento e o brilho noturno das janelas e das lanternas são todos calculados em shaders, e os mesmos materiais TSL também rodam em WebGL2.
A maior parte do esforço foi para a água: reflexo, refração, turbidez e absorção, o cintilar do sol e da lua e o rastro do luar, ondulações de chuva, manchas de vento, a esteira do barco e a água afastada pela proa. O céu é um céu fotográfico do Poly Haven que faz crossfade entre os horários e também fornece a luz ambiente e a direção do sol e da lua; sombras de nuvens deslizam sobre a vila, as colinas e a água, bancos de névoa baixos pairam sobre o canal, e há vaga-lumes, partículas flutuantes e fios de chuva.
O pós-processamento adiciona SSAO (somente sobre a luz ambiente), os bancos de névoa, bloom, profundidade de campo, gradação de cor e FXAA. O foco automático funciona como o de uma DSLR, lançando um raio a partir do centro da imagem (acelerado com three-mesh-bvh), ou você pode clicar para escolher o ponto de foco. Para manter tudo rápido, a cena é dividida em camadas: detalhes finos, como telhas de capa, treliças e ferragens de latão, são desenhados só na vista principal e ficam totalmente ocultos a mais de 28 metros; o leito do canal e os seixos ficam fora dos reflexos; e as estruturas de pedra e as árvores ficam fora do pré-passe de SSAO. As sombras da luz principal são redesenhadas quando a luz se move e, fora isso, a cada cinco quadros; as peças do barco são mescladas por material no carregamento, e a grama e as pedras das margens são desenhadas por instanciamento.
Todo o som é sintetizado ao vivo com Web Audio — não há um único arquivo de áudio: o marulho e o gotejar da água (mais altos perto dela), o vento nos salgueiros, pássaros de dia, grilos e sapos à noite, um sino de templo ao longe, remadas quando você anda de barco e, como música, um dedilhado pentatônico esparso.
