Представлен открытый проект cssDoom — версия Doom, использующая для отрисовки только CSS

Разработчик Нильс Ленхеер представил открытый проект под названием cssDoom. Это реализация игры Doom, использующая для отрисовки графики только CSS, без применения элемента canvas и технологии WebGL. Игровая логика написана на языке JavaScript. В проекте используется в качестве эталона оригинальный код игры Doom, открытый компанией id Software. Наработки проекта cssDoom опубликованы на GitHub под лицензией GPLv2.

Всё что выводится на экран, включая спрайты, текстурированные стены, уровни и эффекты, оформлено через стилизованные при помощи CSS элементы <div>, размещаемые в 3D-пространстве при помощи CSS-свойств transform и transform-style: preserve-3d.

«Как это работает: мы начинаем с линейных, боковых и секторных параметров из WAD‑файла Doom и строим сцену, создавая элементы <div>, размещённые в 3D‑пространстве с помощью CSS‑преобразований. Но мы не устанавливаем эти свойства напрямую из JavaScript. Вместо этого мы устанавливаем пользовательские свойства с помощью исходной геометрии вершин Doom. Эти значения берутся непосредственно из WAD‑файла. CSS вычисляет правильную ширину, высоту и 3D‑преобразования с помощью тригонометрических функций», — пояснил автор проекта.

«Система координат Doom не соответствует напрямую CSS 3D. Doom использует нисходящую 2D‑систему, где Y увеличивается при движении на север. В CSS 3D Y направлен вверх, а Z — к зрителю. Вот почему вы видите translate3d(x, ‑z, ‑y) — наши пользовательские свойства заданы в координатах DOOM, в то время как для преобразования требуются координаты CSS. После того, как мы создали сцену, мы запускаем игровой цикл на JavaScript, который отслеживает состояние игры — положение игрока, ввод, столкновения, ИИ врагов. Этот игровой цикл — наименее интересная часть проекта,