Cómo hacemos los juegos 3D de JuegaMix: Three.js en el navegador

Por qué 3D en el navegador

De los 87 juegos del portal, 13 están hechos en tres dimensiones: Glide 3D, Tiny Planet, Kart Rush 3D y diez más. No es por moda: hay sensaciones que en dos dimensiones no salen, como la velocidad de un túnel que se te viene encima o una bola rodando sobre un planeta diminuto.

La condición era la de siempre: sin descargas y que cargue rápido en un móvil normal. El navegador puede con eso gracias a WebGL, que da acceso a la tarjeta gráfica desde una página web.

Qué es Three.js en palabras llanas

WebGL es potente pero de muy bajo nivel: triángulos, matrices y programas que corren en la tarjeta gráfica. Three.js es una biblioteca de código abierto que pone encima un vocabulario que cualquiera entiende: escena, cámara, luces y mallas con geometría y material. Tú describes qué hay y dónde está; Three.js lo traduce a lo que la tarjeta gráfica necesita en cada fotograma.

En nuestros juegos casi todo nace de esas primitivas. La pista de Kart Rush 3D es una cinta calculada a partir de diez puntos de control, muestreada 120 veces. El planeta de Tiny Planet es un icosaedro subdividido con ruido en cada vértice para que no sea una esfera perfecta, con sombreado de pocas bandas, estilo dibujo animado. Hasta su cielo degradado es un lienzo de 4 por 256 píxeles pintado por código al arrancar.

El mismo contrato mount() que los 2D

Para el portal, un juego 3D no es un caso especial. Cada juego exporta una función mount(container, sdk) y devuelve un objeto con destroy, pause, resume, restart, setMuted y enterFullscreen. El portal carga el módulo bajo demanda y lo monta en el reproductor sin saber si dentro hay Phaser o Three.js.

En un juego 3D, mount crea un lienzo dentro del contenedor, levanta un renderizador WebGL y arranca el bucle de animación del navegador. pause cancela ese bucle; resume lo reanuda reiniciando el reloj para que no haya un salto de tiempo acumulado; destroy libera renderizador, geometrías y materiales y quita el lienzo. Monedas, misiones, récords y ajustes viajan por el mismo SDK que en cualquier título 2D.

Rendimiento en móvil

Un juego 3D que va a tirones no se disfruta, y la mayoría de las partidas se juegan en teléfonos.

Pocas llamadas de dibujo. Cada objeto que la tarjeta gráfica pinta por separado cuesta tiempo. En Glide 3D, las 90 líneas de velocidad que pasan junto a la nave son una sola malla instanciada: una geometría, un material y 90 matrices actualizadas cada fotograma, es decir, una única llamada de dibujo en lugar de 90. Obstáculos y orbes salen de una reserva creada al inicio (16 y 12 grupos) que se recicla en vez de crear y destruir objetos en plena partida.

Resolución con tope. El renderizador usa la densidad de píxeles del dispositivo, pero nunca por encima de 2: en una pantalla de densidad 3 eso ahorra más de la mitad de los píxeles sin que se note.

Post-proceso opcional. Los efectos a pantalla completa, como el resplandor, son lo más caro. Los aplicamos solo donde aportan y los suavizamos si pides menos movimiento.

Movimiento reducido de verdad. Si tu sistema tiene activada esa preferencia, o la activas en tu perfil del portal, los juegos 3D la respetan: sin sacudida de cámara, menos partículas (8 en lugar de 16 al esquivar de cerca, 14 en lugar de 30 al chocar), líneas de velocidad casi apagadas y resplandor a menos de la mitad.

Un detalle que nos costó un error: la sacudida de cámara compartida escribe posición y rotación de forma absoluta a partir de una base, así que se aplica siempre como la última escritura del fotograma; si algo mueve la cámara después, la sacudida se pierde.

Un ejemplo concreto: Glide 3D, resplandor y velocidad

Glide 3D es un vuelo por un pasillo de 14 unidades de ancho por 8 de alto. La nave empieza a 30 unidades por segundo y acelera 1,5 cada segundo hasta un máximo de 96. Rozar un obstáculo sin tocarlo activa un impulso que multiplica la velocidad por 1,5 durante 1,6 segundos. El hueco entre oleadas empieza en 26 unidades y se estrecha 0,12 por segundo hasta 11: la dificultad sube sola sin cambiar ninguna regla.

El resplandor de neón sale de una cadena de tres pasos: se dibuja la escena, se le aplica un filtro de resplandor y se convierte el resultado al espacio de color de la pantalla. Su fuerza no es fija: en vuelo normal vale 1,15, durante un impulso sube a 1,85 y con movimiento reducido se queda en 0,55. El valor se interpola cada fotograma hacia el objetivo, así que el impulso "se enciende" en vez de saltar. Las líneas de velocidad hacen lo mismo: más, más largas y más opacas cuanto más rápido vas.

Kart Rush 3D aplica la misma idea al derrape: mantenerlo 0,9, 2 o 3,2 segundos carga tres niveles que, al soltar, dan un impulso de 0,8, 1,2 o 1,5 segundos. Los cuatro rivales usan la misma señal de dirección que tú, y su velocidad máxima se ajusta con una goma elástica entre 0,92 y 1,12 según lo lejos que vayan, para que el pelotón se mantenga cerca sin trampas.

Qué no hacemos: assets pesados

Ninguno de los 13 juegos 3D descarga modelos, texturas ni archivos de audio. Las geometrías son primitivas generadas por código, los materiales son colores y parámetros, y las pocas texturas se pintan en un lienzo al arrancar. No es una limitación de Three.js, que carga modelos sin problema; es una elección para que un juego pese lo que pesa su código y arranque con una conexión irregular. El coste es evidente: un aspecto geométrico y de neón, no fotorrealista. Preferimos un juego que carga en dos segundos a uno más bonito que nadie llega a ver.

Los próximos 3D del programa

El programa de juegos nuevos que contamos en el primer artículo del blog incluye un runner infinito en 3D con tres carriles, cinco mundos y personajes desbloqueables. Es el primero que necesitará una cadena de modelos de baja poligonización propios, distinta de la de sprites de los 2D, y por eso va después del puzle de física ya publicado y del plataformas de precisión que viene ahora.

Cuando llegue contaremos qué cambió: cuánto pesan esos modelos, cómo los cargamos sin bloquear la pantalla y qué presupuesto de llamadas de dibujo nos pusimos. Mientras tanto, las categorías de habilidad y carreras reúnen la mayoría de los 3D actuales.