DOOM запустили на CSS
Содержание
Неожиданный поворот в мире веб‑разработки
Веб‑технологии давно вышли за рамки статичных страниц и простых интерактивных элементов. Но мало кто мог представить, что с их помощью получится запустить культовую игру DOOM прямо в браузере — и при этом обойтись без привычных инструментов для графического рендеринга.
Разработчик Нильс Ленхер реализовал амбициозный проект: он перенёс первый уровень DOOM в браузер, используя для визуализации исключительно CSS. Игровая логика написана на JavaScript, но вся графика построена на каскадных таблицах стилей — без применения Canvas и WebGL. Код проекта опубликован на GitHub под лицензией GPLv2, а поиграть можно на cssdoom.wtf. Для запуска подойдут последние версии Chrome или Safari — Firefox пока не поддерживает все необходимые функции.
Этот эксперимент не про производительность: он демонстрирует, на что способен современный CSS.
Как CSS стал 3D‑движком
На первый взгляд, каскадные таблицы стилей не предназначены для сложных графических задач. Однако Ленхер доказал обратное, создав полноценную 3D‑сцену из тысяч DIV‑элементов. Каждый объект — от стен до врагов — это стилизованный блок, размещённый в пространстве с помощью CSS‑свойств transform и transform-style: preserve-3d.
Ключевой момент — использование оригинальных данных из WAD‑файла 1993 года. Координаты, высота пола и потолка, геометрия уровней передаются в виде CSS custom properties. Дальше в дело вступают математические функции: ширина стены вычисляется по теореме Пифагора через hypot(), а угол поворота — через atan2(). Эти инструменты, добавленные в CSS сравнительно недавно, позволяют проводить тригонометрические расчёты прямо в стилях.
Разделение обязанностей между языками — основа архитектуры проекта. JavaScript отвечает за игровой цикл, коллизии и управление состоянием, а CSS берёт на себя все визуальные задачи: от позиционирования объектов до анимации и освещения.
В CSS нет понятия виртуальной камеры, как в классических 3D‑движках. Вместо этого разработчик применил хитрый приём: при движении игрока перемещается весь окружающий мир в противоположном направлении.
JavaScript передаёт всего четыре параметра: --player-x, --player-y, --player-z и --player-angle. На их основе CSS трансформирует сцену: поворачивает мир вокруг игрока и сдвигает его в пространстве. Если персонаж идёт вперёд, окружение смещается назад; если поднимается по лестнице, платформа опускается вниз. Такой подход требует инвертирования координат, но позволяет обойтись без сложной логики камеры.
Одна из задач — создать иллюзию бесшовного пространства. Полы и стены должны стыковаться без видимых швов, даже если принадлежат разным секторам уровня. Решение нашлось в выравнивании текстур по мировым координатам: паттерн повторяется бесконечно, но его начало привязано к глобальной сетке. Это достигается через свойство background-position, которое учитывает положение каждого сектора.
Сложные формы уровней — L‑образные комнаты, закруглённые коридоры, платформы с отверстиями — реализованы с помощью clip-path. Для простых многоугольников используется polygon(), для объектов с внутренними контурами — path() с правилом заливки evenodd. Новая функция shape() объединила преимущества обоих методов, позволив работать с процентами и сложными контурами одновременно.
Освещение секторов управляется через filter: brightness(). Каждому участку сцены присваивается custom property --light, которое каскадно применяется ко всем элементам внутри: стенам, полам, спрайтам. Мерцающие лампы создаются анимацией этой переменной через @keyframes.
Враги, двери, лифты и снаряды оживают благодаря возможностям CSS. Двери открываются через CSS transitions: при смене атрибута data-state на контейнере панели плавно сдвигаются вверх. Лифты требуют синхронизации с позицией игрока — здесь JavaScript рассчитывает траекторию с помощью функции cubic ease-in-out, чтобы движение оставалось плавным.
Снаряды (ракеты и файерболы) анимируются через CSS animations. JavaScript задаёт конечную точку и длительность полёта, а стили перемещают объект от старта к финишу. Враги — это 2D‑спрайты с эффектом billboarding: они всегда повёрнуты к камере. Зеркальное отражение достигается через scaleX(-1), а анимация ходьбы — через сдвиг background-position-x в spritesheet.
Чтобы избежать синхронного движения всех зомби, JavaScript добавляет случайную задержку (animation-delay). В будущем эту функцию можно будет перенести в CSS — как только появится встроенная поддержка случайных значений.
Границы возможного
Проект cssDoom — это демонстрация эволюции веб‑технологий за последние 30 лет. Функции вроде hypot(), atan2() и @property превратили CSS из инструмента для оформления страниц в среду для сложных вычислений и 3D‑визуализации. Нильс Ленхер подчёркивает: главная цель — найти границы возможностей браузера. Эксперимент показал, что разделение логики (JavaScript) и рендеринга (CSS) не только возможно, но и элегантно. Хотя производительность остаётся невысокой из‑за тысяч DIV‑элементов, проект доказал: современный CSS способен на гораздо большее, чем кажется на первый взгляд.
Хотите проверить сами? Запускайте первый уровень DOOM в браузере, управляйте персонажем с помощью WASD и мыши — и убедитесь, что веб‑технологии умеют удивлять.
Подготовлено по материалам с сайта: https://tproger.ru/news/razrabotchik-postroil-doom-na-chistom-css---rendering-bez-edinoj-s
38 просмотров · 16.04.2026
DOOM запустили на человеческих нейронах
Живые человеческие нейроны научились играть в DOOM. В лаборатории Cortical Labs биологический процессор освоил культовый шутер — и это не трюк, а шаг к принципиально новым вычислительным системам. Как клетки без глаз и сознания «видят» трёхмерный мир и учатся побеждать — разбираемся в деталях необычного эксперимента.
В России хотят ввести цензуру для Искусственного интеллекта
В России готовят масштабное ужесточение контроля над искусственным интеллектом: государство может ввести двойную цензуру — блокировать «неправильные» запросы пользователей ещё до обработки и фильтровать ответы нейросетей по утверждённому перечню запрещённых тем. Законопроект Минцифры предусматривает маркировку контента, созданного ИИ, классификацию систем по уровню «риска» и даже особые правила определения интеллектуальных прав — всё с прицелом на соблюдение цензурных ограничений.
Искусственный интеллект будет учить детей
Учителя Подмосковья больше не тратят время на проверку тетрадей: им на помощь пришли нейросети. В регионе запускают масштабную цифровую трансформацию образования: от ИИ‑помощников для педагогов до «киберуроков» для первоклассников. Узнайте, как искусственный интеллект меняет школы и колледжи Московской области — и какую роль в этом играют IT‑классы, где старшеклассники уже сегодня осваивают программирование и алгоритмизацию.
В России заработал первый испытательный центр для роботов
Будущее уже рядом: в Москве заработал первый в России испытательный центр полного цикла для роботов и беспилотных систем. Расположенный в «Сколково», он даёт отечественным разработчикам уникальную возможность тестировать инновационные решения в реальных условиях — от уборки помещений и патрулирования улиц до перевозки грузов и выполнения сложных промышленных задач. Узнайте, какие роботы уже проходят испытания и как новый центр ускорит внедрение передовых технологий в повседневную жизнь.
По андроиду в каждый дом
Роботы уже не фантастика — они наступают. Китай опережает США в гонке за первенство в робототехнике, стоимость создания андроидов стремительно падает, а компании вроде Tesla и Unitree готовят серийные модели. К 2040‑м годам человекоподобные помощники могут поселиться в каждом доме. Разбираемся, как изменится мир, когда роботы возьмут на себя рутину, — и что это значит для нас уже сегодня.
Искусственный интеллект без программирования
Канадский стартап Taalas совершил технологический прорыв: компания представила чип HC1, в архитектуру которого напрямую «впаяна» нейросеть Llama 3.1 8B. Решение обеспечивает рекордную скорость обработки — до 17 000 токенов в секунду, в 10 раз опережая топовые GPU, при этом потребляет в 10 раз меньше энергии и обходится в 20 раз дешевле в производстве. Разбираемся, как устроена революционная технология и способна ли она изменить рынок искусственного интеллекта.
Цифровое бессмертие уже здесь
Бессмертие перестаёт быть философской абстракцией и становится инженерной задачей. Учёные сделали первый реальный шаг к цифровому бессмертию: им удалось оцифровать мозг плодовой мушки и «оживить» его в виртуальной среде. Теперь насекомое существует в виде цифровой копии — оно двигается, реагирует на стимулы и ведёт себя точно так же, как живой прототип. Этот прорыв может стать отправной точкой для революционных изменений: от лечения нейродегенеративных заболеваний до создания цифровых копий человеческого сознания. Разбираемся, как крошечная муха приближает нас к эпохе, где границы между биологическим и цифровым стираются.
Работа в ЖКХ научила нейросеть материться
Что будет, если соединить футуристические технологии и будни ЖКХ? История о том, как искусственный интеллект, обученный вежливости, внезапно начал материться после первых же недель работы в колл‑центре управляющей компании, обернулась одновременно и комичной, и по‑своему тревожной картиной. Почему нейросеть так быстро переняла «крепкие выражения», как разработчики спешно переучивали электронного оператора и при чём тут вечная проблема человеческого терпения в сфере коммунальных услуг — разбираемся в этой истории о столкновении высоких технологий с суровой реальностью ЖКХ.
Интересные факты об Илоне Маске
Илон Маск — неординарный предприниматель и визионер, чьё имя стало синонимом технологических прорывов. От первых шагов в программировании в 12 лет до статуса миллиардера и основателя SpaceX, от непростого детства и семейных испытаний до амбициозных планов по колонизации Марса — путь Маска полон контрастов, смелых решений и неожиданных поворотов. Рассказываем о ключевых вехах жизни человека, который не просто меняет мир, но и переосмысливает границы возможного.
Гигаватты для ИИ
Компания xAI Илона Маска официально ввела в эксплуатацию суперкомпьютер Colossus 2 — первый в мире кластер для обучения искусственного интеллекта с энергопотреблением на уровне 1 гигаватта. Это сопоставимо с мощностью атомной электростанции и уже превышает пиковое потребление такого мегаполиса, как Сан-Франциско.
На этом проект не останавливается. В ближайшие месяцы, по заявлениям компании, энергопотребление Colossus 2 планируется увеличить до 1,5 гигаватта, а в перспективе — приблизиться к отметке 2 гигаватта.