cssQuake: jugar Quake en el navegador sin WebGL ni canvas

cssQuake muestra Quake original de 1996 renderizado en HTML y CSS sin WebGL ni canvas

Cada pocos años alguien decide llevar los límites del CSS a otro nivel, y el cssQuake es el último ejemplo: una versión jugable del Quake original de 1996 que corre en el navegador sin una sola línea de WebGL y sin usar el elemento <canvas>. Todo lo que ves en pantalla —paredes, suelos, enemigos, proyectiles— es HTML real, posicionado y deformado mediante propiedades de CSS.

¿Qué es exactamente cssQuake?

cssQuake es un port de Quake, el shooter en primera persona de id Software, desarrollado por Layoutit Studio y construido sobre PolyCSS, un motor propio que trata el árbol del DOM como si fuera el grafo de escena de un motor 3D tradicional. En lugar de dibujar píxeles sobre un lienzo, PolyCSS coloca elementos HTML en el espacio usando transformaciones matrix3d(), los textura con fondos CSS en píxel art y los agrupa en mallas (meshes) como haría cualquier engine de toda la vida.

El proyecto convierte los datos originales del juego —mapas BSP, modelos, texturas— en JSON y assets listos para el navegador durante un paso de preparación previo. Una vez generado ese paquete, el navegador ya no necesita tocar los archivos PAK o BSP originales mientras juegas: todo lo que corre en tiempo real es TypeScript manipulando CSS.

Cómo consigue renderizar un FPS en 3D sin WebGL

La clave está en tres propiedades de CSS que la mayoría de desarrolladores web rara vez exprimen a este nivel:

transform-style: preserve-3d, que habilita un espacio 3D real para los elementos hijos en lugar de aplanarlos en 2D.
perspective, que define la distancia de la cámara virtual y, por tanto, la sensación de profundidad de toda la escena.
matrix3d() y translate3d(), las funciones de transformación que posicionan, rotan y escalan cada cara del mapa como si fuera un polígono de un motor gráfico convencional.

Con esas piezas, cada superficie del mapa de Quake —cada pared, rampa o plataforma— se convierte en un elemento HTML al que PolyCSS aplica su propia matriz de transformación, calculada a partir de la geometría original del juego. El navegador hace el resto: compone, recorta e ilumina esos elementos como si fueran polígonos texturizados, todo sin tocar la GPU a través de WebGL.

Un proyecto con vocación de motor, no solo de demo

Lo que distingue a cssQuake de otros experimentos curiosos de "mira lo que hace el CSS" es que PolyCSS está pensado como un motor 3D reutilizable, no como un truco aislado. El propio motor se distribuye como paquete independiente, con integraciones para Vanilla JS, React y Vue, soporte para formatos de modelo habituales como OBJ+MTL, glTF/GLB o STL, y primitivas generadas (cajas, esferas, cilindros, sólidos platónicos) para construir escenas desde cero sin depender de un juego concreto.

cssQuake, en ese sentido, funciona como la demo de cabecera de PolyCSS: la prueba de que el motor aguanta algo tan exigente como un shooter completo, con mapas, modelos animados, iluminación dinámica por lightstyles, puertas, botones, física de recogibles y transiciones de nivel.

Lo que incluye la experiencia jugable

Menú de partida con nombre, color, selección de mapa, límite de frags y de tiempo, y número máximo de jugadores.
Geometría de los mapas BSP originales renderizada íntegramente como elementos HTML/CSS.
Sistemas de juego conectados a la renderización: visibilidad, iluminación, puertas, botones, movimiento de brush models, objetos recogibles y peligros del escenario.
HUD y menús con estado propio, también construidos sobre PolyCSS.

¿Necesito tener Quake para jugarlo?

El código de cssQuake es de código abierto bajo licencia GPL-2.0, pero el repositorio no incluye los datos originales del juego, que siguen siendo propiedad de id Software. El proceso de preparación está pensado para trabajar con la versión shareware de Quake 1.06 (el episodio gratuito que id Software distribuyó originalmente) o con un archivo pak0.pak local si dispones de una copia legítima del juego completo.

¿Por qué importa esto más allá de la curiosidad?

Que el CSS pueda sostener una escena 3D interactiva completa no significa que vaya a sustituir a WebGL o a APIs como WebGPU para gráficos serios; el propio rendimiento de PolyCSS depende del número de elementos montados y del área de los atlas de texturas, algo muy distinto a cómo escala una GPU. Pero como ejercicio de los límites reales del navegador —y como herramienta didáctica para entender transformaciones 3D sin pasar por la curva de entrada de un motor como Unity— cssQuake es un caso de estudio excelente para cualquiera que trabaje con CSS a diario.

Si te dedicas al desarrollo web, merece la pena abrir las DevTools mientras juegas: ver en vivo cómo se generan y actualizan esas matrices matrix3d() fotograma a fotograma enseña más sobre el modelo de cajas y transformaciones de CSS que cualquier tutorial teórico.

Jugar a cssQuake Ver el código en GitHub