Jogos de navegador: como criamos o Relic Hunter com Three.js e imagens de IA
Eu queria que o Relic Hunter: Desabamento do Templo parecesse um templo de verdade, não uma imitação de videogame. As imagens de IA tinham pedra entalhada, luz quente de tochas e sombras profundas. Minha primeira versão em Three.js tinha caixas cobertas por uma textura marrom que se repetia.
Este post conta como fechei esse abismo e transformei um único corredor gerado por IA num labirinto que dá para explorar. O Relic Hunter é um jogo de navegador grátis que roda no computador e no celular, sem baixar nem instalar nada. Por trás desse link simples há um sistema de projeção, um shader personalizado e várias concessões práticas, todas girando em torno de uma pergunta: como fazer um jogo 3D cinematográfico carregar rápido dentro de um navegador?
Por que criar um jogo 3D para o navegador?
A maior vantagem dos jogos de navegador é a facilidade de acesso: a pessoa clica num link e já está jogando. Não há instalador, loja de aplicativos nem conta entre a curiosidade e a primeira corrida. Isso torna os jogos de navegador grátis fáceis de descobrir, testar e compartilhar.
O porém é que cada modelo, textura e animação extra aumenta a espera antes de jogar. Por isso o Relic Hunter precisava de um sistema visual que reaproveitasse poucos recursos ao longo de seis fases, sem que cada corredor parecesse um copia e cola.
O jogo por trás do experimento visual
O Relic Hunter não é um corredor reto e infinito pintado para parecer labirinto. Cada uma das seis provas nasce de um labirinto gerado, com cruzamentos, rotas alternativas e becos sem saída de verdade. Antes de cada corrida, você tem alguns segundos para estudar o mapa. Quando o cronômetro começa, é lembrar o caminho, virar certo em cada cruzamento e não parar de andar.
Ele é um pouco jogo de corrida em labirinto, um pouco desafio de memória e um pouco fuga de templo. Uma curva errada custa bem mais que alguns passos: você tem que voltar enquanto o cronômetro do desabamento continua correndo. Dá para segurar M e olhar o mapa de novo, mas ler o mapa correndo traz uma pressão própria.
As três vidas são compartilhadas e valem para a campanha inteira. Os perigos chegam um de cada vez e depois começam a se sobrepor: é preciso abaixar para passar pelas lâminas oscilantes, pular vigas caídas e pisos quebrados, e as cabeças de leão entalhadas cospem fogo no caminho. Na quinta prova, Mira ou Vikram finalmente conquista a Syamantaka, a gema-sol de Surya. A sexta é a fuga, com o templo desmoronando atrás de você.
Por que as texturas 3D comuns não funcionavam
Tudo começou com imagens geradas por IA de corredores de pedra entalhada, luz quente de tochas e sombras profundas. Como imagens paradas, eram convincentes. A primeira versão jogável, não. Repetir a pedra como textura comum gerou uma caixa quadriculada e jogou fora o que a imagem de origem tinha de mais importante: a iluminação.
Uma fotografia parece real em grande parte por causa da iluminação: a sombra suave onde a parede encontra o chão, o brilho em volta de uma tocha e a escuridão no fim de um salão. Uma textura repetível é achatada de propósito, para emendar sem costuras. Ao tirar a iluminação para a imagem se repetir, tirei junto o que a fazia parecer real.
Tour Into the Picture: projetando a imagem em 3D
A solução veio de uma técnica de computação gráfica chamada Tour Into the Picture, ou TIP. Imagine que a imagem de origem foi tirada por uma câmera de verdade. Coloco uma câmera virtual no ponto correspondente da cena Three.js, dou a ela um campo de visão equivalente e projeto a imagem sobre uma geometria simples de chão, parede e teto, como um projetor de slides.
Perto desse ponto de vista, o corredor mantém as sombras, o brilho e a profundidade da imagem original e ainda funciona como um espaço por onde o jogador anda. No shader, cada ponto de uma superfície pergunta onde ele cai na imagem do projetor e pega aquela cor. O primeiro protótipo que funcionou dava a sensação de entrar num quadro.
Os cinco problemas que surgiram quando o jogador se mexeu
- Esticamento: quanto mais o jogador se afastava do projetor, mais a imagem se distorcia.
- Buracos: as aberturas laterais e as superfícies distantes fora da visão da câmera de origem não tinham detalhe projetado.
- Cintilação: trocar a direção da projeção nos cruzamentos fazia as paredes saltarem ou tremularem.
- Borrão de movimento: um pixel de origem podia se esticar por muitos pixels da tela nos pisos e nas paredes laterais.
- Iluminação assada: a imagem projetada já continha luz, então tochas comuns em tempo real não conseguiam simplesmente reiluminá-la.
Em captura de tela, esses problemas passavam batido; correndo, eram impossíveis de ignorar. Isso mudou meu critério para avaliar os gráficos: cada melhoria tinha que sobreviver a movimento, curvas e voltas para trás, e não só a um quadro parado bem escolhido.
O sistema híbrido que foi para o jogo
Em vez de um único projetor para um salão longo, o jogo espalha projetores por todo corredor aberto, nos dois sentidos. A cada quadro, ele escolhe os projetores próximos que olham para o mesmo lado que o jogador e mistura um número limitado deles. Assim o jogador nunca fica tão longe de uma boa fonte a ponto de a imagem virar um borrão esticado.
Os pontos mais complicados da arquitetura usam geometria de verdade. As paredes do fundo recebem painéis entalhados para não parecerem corredores que continuam para sempre. As aberturas laterais usam painéis de arco com buracos reais, deixando cada curva legível. As superfícies fora da melhor projeção voltam a ser pedra, não preto.
O shader final é um híbrido. Ele mede quanto a fotografia projetada está esticada em cada pixel. Onde a imagem está nítida, fica a fotografia. Nas superfícies inclinadas e borradas, entra um ladrilho de pedra bem definido, que pega emprestada a iluminação desfocada da fotografia. A imagem de IA continua decidindo onde o corredor é quente ou escuro; o ladrilho devolve o detalhe fino durante o movimento. A filtragem anisotrópica e os mipmaps ainda melhoram a nitidez das amostras restantes em ângulos fechados.
Personagens e armadilhas em camadas separadas
O corredor é o palco. Mira, Vikram, lâminas oscilantes, cabeças de leão que cospem fogo, vigas caídas e pisos quebrados são camadas interativas separadas. Tudo o que o jogador pode atingir, desviar ou ver se mexer precisa de um objeto próprio; embutir um perigo na imagem do corredor deixa a interação sem graça.
As peças animadas seguem um pipeline separado: imagens limpas feitas com o ChatGPT, clipes curtos animados com o Grok e remoção do fundo verde antes de entrarem na cena Three.js. Separar o mundo das partes móveis facilitou o ajuste dos dois.
O que isso mostra sobre jogos de navegador na web
Hoje, os jogos de navegador na web conseguem entregar gráficos 3D em tempo real, shaders personalizados, animação, som e controles responsivos dentro de uma página comum. O Relic Hunter consegue isso com uma imagem principal de corredor, um painel de arco e um pequeno conjunto de texturas de pedra, em vez de uma biblioteca pesada de ambientes 3D detalhados.
O resultado é um jogo em Three.js compacto, cujos corredores mantêm o clima da arte de IA enquanto o jogador corre, vira e volta. Essa economia de recursos pesa nos jogos sem download: arquivos menores encurtam o intervalo entre abrir a página e realmente jogar.
Como jogar Relic Hunter online
- Abra o Relic Hunter: Desabamento do Templo no seu navegador.
- Escolha Mira ou Vikram como caçador de relíquias.
- Estude o mapa antes de cada prova começar.
- Vire nos cruzamentos, pule ou abaixe diante das armadilhas e chegue à saída antes de o tempo acabar.
- Conquiste a Gema Syamantaka e escape do desabamento final.
Se você procura um jogo 3D de navegador grátis, uma corrida rápida num labirinto de templo ou um dos jogos de navegador online grátis que dá para começar sem criar conta, entre numa corrida e veja se consegue levar a gema-sol de volta à luz do dia.
Jogue Relic Hunter agora. É grátis, online e não precisa baixar nada. · Veja mais jogos de navegador · Leia sobre jogos grátis sem download.