Программист из Нидерландов выпустил версию классического шутера DOOM, которая работает без графического движка. Вся графика в игре отрисовывается через CSS, а javascript отвечает только за логику, перемещение игрока и поведение монстров.
Проект называется cssDoom и для его создания автор взял оригинальные WAD-файлы из версии 1993 года и превратил каждый элемент сцены в HTML-блоки, а их положение в пространстве задаётся через CSS-трансформации. Главная техническая проблема: в CSS нет камеры и автор обошёл это классическим трюком — движется не игрок, а весь мир вокруг него. javascript передаёт в CSS четыре параметра: координаты игрока по X, Y, Z и угол обзора, а движок CSS сдвигает и поворачивает всю сцену в противоположную сторону. Запуск DOOM на разных устройства уже давно не новость, а вот его переделка интереснее.
Бессмертная классика в браузере
Главная проблема — браузеры не оптимизированы для тысяч 3D-трансформированных элементов. Большие карты заставляют Safari на iOS падать, поэтому была добавлена система отсечения (culling): элементы вне поля зрения или слишком далеко скрываются. С небом в игре вышла проблема, так как оригинальный DOOM жульничает и рисует текстуру неба на 2D-стенах поверх реальной геометрии. В честном 3D такой трюк не проходит, и сквозь окна становится видно то, чего не должно быть.
В cssDoom доступны все девять уровней первого эпизода и пять уровней сложности. Помимо стандартного вида от первого лица, есть режим, где камера поднимается под потолок, а также режим следования за игроком с видом от третьего лица — причём позиция камеры там вычисляется целиком в CSS.
Оригинальный DOOM, вероятно, будет жить вечно
Исходный код выложен на GitHub и поиграть в браузерную версию может любой желающий.
Как думаете, у подобных экспериментов есть практическая польза за пределами «а сможет ли CSS запустить DOOM»? Или это чисто техническое развлечение, которое не влияет на реальную разработку? Делитесь мнением в комментариях.