Quake запустили в браузере на CSS, но он медленнее Pentium-133 из 1996 года

Что это на самом деле

CSSQuake — играбельная браузерная копия Quake от id Software, отрисованная через CSS под маркой «Powered by PolyCSS». Есть одиночный и многопользовательский режимы, настраиваемые карты и лимиты фрагов, стандартное управление FPS, оверлеи отладки для FPS, статистики и динамического света. Это больше, чем трюк с рендерингом: логику игры тоже переписали заново, с намеренными отступлениями от оригинала, которые один игрок отправился искать:

«Похоже, тут на CSS сделан не только рендерер, но и полная копия движка и логики, верно?… по некоторым кнопкам надо стрелять, а не касаться их, а некоторые секретные двери открываются касанием, а не выстрелом». — комментатор, разобравший различия в поведении

Два прокола

Посылка «чистый CSS» не пережила встречи с тредом:

«Похоже, этому CSS Quake для работы нужен JS…». — комментатор, проколовший формулировку «чистый CSS»

А сравнение по производительности вышло почти слишком метким:

«Отличное достижение, но не могу не заметить, что Quake шёл плавнее на моём Pentium-133 в 90-х, чем идёт на моём Mac M1 Pro». — Jedberg, бывший инфраструктурный инженер, о цене производительности

Трюк, честный в том, что он трюк

CSSQuake принадлежит к гордой линии веб-хаков «потому что я мог», и тред относится к нему с верной смесью восхищения и подколок. Тридцатилетняя просадка производительности — не упрёк автору, а идеальная маленькая иллюстрация того, сколько слоёв абстракции теперь стоит между нажатием клавиши и пикселем. Pentium на 133 МГц гонял вручную отлаженный софтверный рендерер прямо во фреймбуфер; M1 Pro гоняет CSS-движок раскладки, изображающий 3D-растеризатор, внутри браузера внутри ОС. Частота кадров — это квитанция за всё это, и именно поэтому проект скорее забавный, чем впечатляющий так, как, вероятно, надеялся автор.