Un experimento técnico sorprendente ha demostrado que los lenguajes web modernos pueden llevar a cabo hazañas impensables hace unos años.
El desarrollador Niels Leenheer ha creado una versión completamente funcional del clásico videojuego DOOM donde toda la representación visual en 3D se realiza exclusivamente con CSS, prescindiendo de motores gráficos tradicionales o de la API Canvas.
Este proyecto, llamado cssDOOM, utiliza JavaScript para la lógica del juego, pero delega la tarea de dibujar paredes, suelos y enemigos en las capacidades de renderizado del lenguaje de estilos, un enfoque radicalmente distinto.
DOOM es uno de los títulos más influyentes en la historia de los videojuegos y se ha convertido en un “Hola mundo” para la comunidad de desarrollo, siendo portado a incontables plataformas improbables.
Por otro lado, CSS (Cascading Style Sheets) es el lenguaje estándar para definir el aspecto visual de las páginas web. Durante la última década, sus especificaciones han incorporado potentes funciones de transformaciones y animaciones 3D, evolucionando desde una herramienta para maquetar texto y cajas a un sistema capaz de manejar complejas composiciones espaciales.
El proyecto de Leenheer representa la culminación de esta evolución, llevando las capacidades gráficas de CSS a un terreno tradicionalmente reservado para motores de juego especializados.
cssDOOM no es un simple remake 2D. Leenheer ha reconstruido la esencia del renderizado 3D de la versión original usando únicamente las herramientas que ofrece el navegador web moderno.
- Cada muro, suelo, barril y enemigo en el juego es un simple elemento
<div>de HTML. Su posición, rotación y escala en el espacio tridimensional se controlan mediante transformaciones CSS 3D, mientras que las texturas se aplican como imágenes de fondo. - El código del juego que gestiona el movimiento, la física y la interacción está escrito en JavaScript. Sin embargo, este código solo actualiza propiedades CSS; es el motor de renderizado del navegador el que, al interpretar esos estilos, genera cada fotograma de la escena.
- El proyecto también emplea filtros SVG para efectos visuales y se apoya profundamente en las optimizaciones de composición de los navegadores modernos para lograr una experiencia jugable.
“Quería encontrar los límites de lo que un navegador puede hacer. Ver lo poderoso que es el CSS moderno”, explicó Niels Leenheer sobre la motivación detrás del proyecto.
Más allá de la curiosidad técnica, cssDOOM funciona como un banco de pruebas extremo para los motores de renderizado de los navegadores. Según el análisis del propio desarrollador, el proyecto ha revelado bugs e inconsistencias en la implementación de ciertas características CSS en los principales navegadores.
Por ejemplo, el manejo de miles de texturas aplicadas mediante variables CSS personalizadas (var()) puede causar problemas de rendimiento, y la composición de un gran número de superficies transformadas en 3D muestra comportamientos inestables en algunos navegadores.
Estos hallazgos son valiosos para la comunidad, ya que exponen los límites de las implementaciones actuales y pueden guiar futuras optimizaciones.
El proyecto también sirve como una demostración pedagógica poderosa. Ilustra de manera tangible cómo las tecnologías web centrales (HTML, CSS y JavaScript) pueden combinarse para crear experiencias interactivas complejas sin depender de plugins o tecnologías externas, reafirmando el potencial de la web como plataforma de aplicaciones.
cssDOOM se inscribe en una larga tradición de utilizar el icónico shooter para evaluar la madurez y flexibilidad de una plataforma. Al hacerlo con CSS, Leenheer no solo rinde homenaje a este legado, sino que también redibuja la frontera de lo posible en el desarrollo frontend.
El experimento prueba que el lenguaje de estilos ha alcanzado un nivel de sofisticación que permite aventurarse más allá del diseño de interfaces y adentrarse en el terreno de los gráficos en tiempo real.