О трехмерных шутерах на CSS +HTML [перевод]

Привет! Представляю вашему вниманию перевод статьи Building a 3D Game with CSS + HTML ^[1] автора Michael Bromley.

Не так давно я изучал редко используемые функции CSS — функцию анимации и 3D, а после общения в конференции по JavaScript я собрал вот это demo ^[2]. Пока я трудился над ним, мне стало любопытно, как далеко можно зайти в конструировании трёхмерной графики на чистом CSS.

(скриншот выполнен переводчиком)

В какой-то момент я наткнулся на работы Кейта Кларка (Keith Clark). Он собрал два замечательных примера на CSS: один из них — основа для 3D FPS-шутера от первого лица ^[3] (в стиле Counter-Strike. прим. переводчика), второй — модель звёздного истребителя X-Wing ^[4] с использованием теней:

(скриншот выполнен переводчиком)

Вдохновлённый его работами и образцами на Codеpen ^[5], я решил попробовать сделать звёздный 3D-шутер на чистом CSS и HTML, но, конечно, с добавлением JavaScript. То есть, чтобы отрисовать все объекты игры, я использовал только CSS и HTML. Иными словами, игра разрабатывалась без использования изображений, WebGl, canvas или векторной графики (SVG). Результат можно посмотреть и потестировать по данной ссылке ^[6].

Поскольку этой работой я хотел подчеркнуть возможности CSS, я остановился именно на олдскульной космической стрелялке: когда движешься вглубь экрана, а вражеские корабли летят на тебя. Что ещё нужно, чтобы получить эффект 3D?
Схематичный дизайн объектов и цветовая палитра навеяны старой игрой Tempset для компьютера Atari ^[7]. Этот стиль позволяет не заботиться о добавлении теней.

Почему CSS?

Хороший вопрос. Был ли CSS разработан для подобных вещей? Однозначно, нет. Я лишь хотел показать каким мощным средством может быть CSS.

Мнение переводчика

Результат у автора получился неплохой, в эту игру действительно можно поиграть, по крайне мере пару минут. Я не стал переводить всю статью. Далее автор пишет о преимуществах CSS для разработки 3D, а также о проблемах, с которыми столкнулся. Смыл сводится к тому, что не стоит использовать CSS для разработки игр, особенно трёхмерных.

Вместо заключения. Мысли переводчика

На мой взгляд, идея реализации трёхмерного пространства на CSS и HTML приобретает смысл,
когда стоит задача разработки проекта с неполной 3D-графикой, т.е. когда часть пространства или объекты могут быть реализованы благодаря некоторым трюкам, например, с перспективой.

В целом, современные 3D-игры, наполненные обилием эффектов, — в сравнении с проектами 20-летней давности — кажутся перегруженными. Стремление к натуралистичным эффектам отводит игрока от самой игры (я имею в виду спортивный азарт, желание пройти саму игру, в противовес наблюдению эффектных взрывов и салютов), поэтому мне все чаще и чаще вспоминаются 2.5D игры с объектами из спрайтов, некоторые из которых, вероятно, можно попытаться переложить, используя веб-технологии. Может быть, некоторые игры для консолей 90-х годов (кстати, для приставки Sega существовали вполне настоящие трехмерные игры. ^[8] Примечание для молодого поколения).

К желанию немного разобраться в данной теме меня привело чтение некоторых публикаций на Хабрахабре (и не только) по линейной алгебре, а также стремление понять, как изнутри устроены 3D-преобразования. После чтения статей, что приведены ниже, у меня даже появилось желание создать какую-нибудь простенькую игру на CSS, на тему космоса (с минимальным количеством 3d-преобразований и каким-нибудь трюками, заменяющими «реальное» 3D ), но через некоторое время я нашел данный блог, где уже было сделано почти то, что я хотел сделать. Должен заметить, что очень удобно использовать крайне удалённые объекты для формирования пространства. К таким объектам фактически не нужно применять линейные преобразования, а зрительный эффект даже интереснее (например, если фоном сделать фотографию космоса и возможность вращения по одной оси), нежели 3D-стены с фрактальными текстурами, как в современных играх… В общем, многие старые игрушки вполне можно воскресить для новых поколений.

Ссылки

1. 3D-трансформации средствами CSS ^[9]
2. Линейная алгебра для разработчиков игр ^[10]
3. Краткий курс компьютерной графики: пишем упрощённый OpenGL своими руками, статья 4a из 6 ^[11]
4. Затерянная документация или transform: matrix3d ^[12]
5. Создаём собственный программный 3D-движок ^[13]
6. learnopengl. Урок 1.7 — Трансформации ^[14]
7. Tridiv: редактор 3D CSS ^[15]

Автор: Ivan Gavryushin

Источник ^[16]