Juegos de navegador: cómo hicimos Relic Hunter con Three.js e imágenes de IA
Yo quería que Relic Hunter: Derrumbe del templo pareciera un templo de verdad, y no la versión aproximada que suele salir en un videojuego. Las imágenes de IA tenían piedra tallada, luz cálida de antorchas y sombras profundas. Mi primera versión en Three.js, en cambio, eran cajas cubiertas con una textura café que se repetía.
Aquí te cuento cómo cerré esa brecha y cómo convertí un solo pasillo generado con IA en un laberinto que se puede recorrer. Relic Hunter es un juego de navegador gratis que funciona en computadora y en celular, sin descargar ni instalar nada. Detrás de ese enlace tan sencillo hay un sistema de proyección, un shader propio y varias soluciones prácticas pensadas para una sola pregunta: ¿cómo consigues que un juego 3D de aire cinematográfico cargue rápido en el navegador?
¿Por qué hacer un juego 3D para el navegador?
La gran ventaja de los juegos de navegador es lo fácil que es llegar a ellos. Sigues un enlace y empiezas al instante. Entre la curiosidad y la primera partida no hay instalador, ni página de tienda de apps, ni cuenta que crear. Por eso los juegos de navegador gratis son tan fáciles de descubrir, probar y compartir.
La contrapartida es que cada modelo, textura o animación extra alarga la espera antes de jugar. Relic Hunter necesitaba, por lo tanto, un sistema visual que reutilizara pocos recursos a lo largo de seis niveles sin que cada pasillo pareciera un copiar y pegar.
El juego que hay detrás del experimento visual
Relic Hunter no es un pasillo recto y eterno pintado para que parezca laberinto. Cada una de sus seis pruebas sale de un laberinto generado, con cruces, rutas alternativas y callejones sin salida de verdad. Antes de empezar tienes unos segundos para estudiar el mapa. Cuando arranca el reloj, hay que acordarse de la ruta, girar donde toca en cada cruce y no parar.
Es un poco juego de laberinto, un poco reto de memoria y un poco escape de un templo. Equivocarte de giro cuesta más que unos pasos: tienes que dar la vuelta mientras el reloj del derrumbe sigue corriendo. Si mantienes la tecla M puedes volver a mirar el mapa, aunque leerlo a la carrera tiene su propia presión.
Las tres vidas son compartidas y duran toda la campaña. Los peligros llegan de uno en uno y después empiezan a combinarse: hay que agacharse ante las cuchillas que se balancean, saltar vigas caídas y pisos rotos, y esquivar el fuego que escupen unas cabezas de león talladas. En la quinta prueba, Mira o Vikram por fin se hace con la Syamantaka, la gema del sol de Surya. La sexta es la huida, con el templo viniéndose abajo a tus espaldas.
Por qué las texturas 3D normales no funcionaban
El estilo visual partió de imágenes de IA con pasillos de piedra tallada, luz cálida de antorchas y sombras profundas. Como imágenes fijas eran convincentes. En la primera versión jugable, no. Repetir la piedra como una textura corriente daba una caja con mosaicos y tiraba a la basura lo más valioso de la imagen original: su iluminación.
Una fotografía parece real en buena parte por la luz: la sombra suave donde la pared se junta con el piso, el resplandor alrededor de una antorcha, la oscuridad al fondo de un salón. Una textura repetible se aplana a propósito para que pueda unirse sin costuras. Al quitarle la luz para que se repitiera, también le quité lo que la hacía sentirse real.
Tour Into the Picture: proyectar la imagen sobre el 3D
La solución salió de una técnica de gráficos por computadora llamada Tour Into the Picture, o TIP. Imagina que la imagen original la tomó una cámara de verdad. Pongo una cámara virtual en el punto equivalente de la escena de Three.js, le doy una vista igual y proyecto la imagen sobre una geometría sencilla de piso, paredes y techo, como lo haría un proyector de diapositivas.
Cerca de ese punto de vista, el pasillo conserva las sombras, el resplandor y la profundidad de la imagen original, y a la vez es un espacio por el que el jugador se puede mover. En el shader, cada punto de una superficie averigua dónde cae dentro de la imagen del proyector y toma ese color. El primer prototipo que funcionó daba la sensación de meterse dentro de un cuadro.
Los cinco problemas que aparecieron al mover al jugador
- Estiramiento: cuanto más se alejaba el jugador del proyector, más se deformaba la imagen.
- Huecos: las aberturas laterales y las superficies lejanas que quedaban fuera de la vista de la cámara original no tenían detalle proyectado.
- Parpadeo: al cambiar la dirección de la proyección en los cruces, las paredes daban saltos o titilaban.
- Manchas al moverse: un solo píxel de la imagen podía estirarse sobre muchos píxeles de pantalla en pisos y paredes laterales.
- Luz horneada: la imagen proyectada ya traía su propia luz, así que las antorchas normales en tiempo real no podían volver a iluminarla sin más.
En las capturas de pantalla era fácil que estos problemas pasaran inadvertidos, pero al correr eran imposibles de ignorar. Eso cambió mi forma de evaluar los gráficos: cada mejora tenía que aguantar el movimiento, los giros y las vueltas atrás, y no solo un cuadro fijo bien elegido.
El sistema híbrido que quedó en el juego
En vez de un único proyector para un salón largo, el juego reparte proyectores por cada pasillo abierto, en las dos direcciones. En cada cuadro escoge los proyectores cercanos que miran hacia donde avanza el jugador y mezcla un número limitado de ellos. Así el jugador nunca queda tan lejos de una fuente útil como para que la imagen se vuelva un borrón estirado.
Los puntos arquitectónicos delicados usan geometría real. Las paredes del fondo llevan paneles tallados para que no parezcan pasillos que siguen para siempre. Las aberturas laterales usan paneles de arco con huecos de verdad, y así cada giro se entiende bien. Las superficies que quedan fuera de la mejor proyección caen en piedra, y no en negro.
El shader final es un híbrido. Mide, píxel por píxel, cuánto se estiró la fotografía proyectada. Las zonas nítidas conservan la fotografía. Las superficies muy inclinadas y manchadas mezclan un mosaico de piedra bien definido, que toma prestada la iluminación desenfocada de la fotografía. La imagen de IA sigue decidiendo dónde el pasillo es cálido y dónde es oscuro; el mosaico devuelve el detalle fino mientras te mueves. El filtrado anisotrópico y los mipmaps afinan las muestras que quedan en ángulos muy cerrados.
Personajes y trampas, por separado
El pasillo es el escenario. Mira, Vikram, las cuchillas que se balancean, las cabezas de león que echan fuego, las vigas caídas y los pisos rotos son capas interactivas independientes. Todo lo que el jugador puede golpear, esquivar o ver animarse necesita su propio objeto; si horneas un peligro dentro de la imagen del pasillo, la interacción se ve plana.
Las piezas animadas siguen otro proceso: imágenes limpias hechas con ChatGPT, clips cortos animados con Grok y eliminación del fondo verde antes de colocarlas en la escena de Three.js. Con el mundo y sus partes móviles por separado, fue más fácil ajustar cada uno.
Lo que esto significa para los juegos de navegador
Los juegos de navegador de hoy pueden ofrecer gráficos 3D en tiempo real, shaders propios, animación, sonido y controles ágiles dentro de una página cualquiera. Relic Hunter lo logra con una imagen principal de pasillo, un panel de arco y unas pocas texturas de piedra, y no con una pesada biblioteca de entornos 3D detallados.
El resultado es un juego de Three.js compacto, con pasillos que conservan el ambiente de las ilustraciones de IA mientras corres, giras y regresas. Esa economía de recursos importa en los juegos sin descargas: archivos más livianos acortan el tiempo entre abrir la página y jugar de verdad.
Cómo jugar Relic Hunter online
- Abre Relic Hunter: Derrumbe del templo en tu navegador.
- Elige a Mira o a Vikram como cazador de reliquias.
- Estudia el mapa antes de que empiece cada prueba.
- Gira en los cruces, salta o agáchate ante las trampas y llega a la salida antes de que se acabe el tiempo.
- Toma la Gema Syamantaka y escapa del derrumbe final.
Si buscas un juego 3D de navegador gratis, un laberinto de templo veloz o alguno de los juegos de navegador gratis online que se empiezan sin crear una cuenta, lánzate a una partida y comprueba si logras devolver la gema del sol a la luz del día.
Juega Relic Hunter ahora. Es gratis, online y no necesita descargas. · Explora más juegos de navegador · Lee sobre los juegos gratis sin descargas.