#инструмент дня

Этого стоило ожидать. Вашему вниманию — Quake на CSS.

Реализован он с помощью движка PolyCSS, а выбрать карту можно просто передав значение в параметр. Например, вот второй уровень первого эпизода: https://cssquake.com/?map=e1m2

Итак, а что же такое PolyCSS?

PolyCSS — 3D-движок, который рендерит модели обычными DOM-элементами через CSS matrix3d(). Без WebGL и без canvas для самой сцены. Загружает OBJ/MTL, STL, glTF/GLB и VOX, умеет в текстуры, свет, тени, камеры, orbit/map/first-person controls, плюс есть обёртки для React и Vue.

Полигоны при этом реально остаются HTML-элементами. Их можно увидеть в DevTools, стилизовать через CSS, повесить click, анимацию или вообще работать с ними как с обычным DOM. Отсюда же и довольно специфичная модель производительности: важны количество DOM-узлов и объём работы, который потом достаётся браузеру на рендер и композитинг.

Поэтому PolyCSS много возится с самой геометрией: убирает внутренние грани, объединяет подходящие поверхности и выбирает разные способы рендера для разных типов полигонов. По умолчанию используется lossy`-оптимизация, которая может немного упростить исходную сетку ради меньшего количества DOM-элементов; если это нежелательно, есть `lossless. С текстурами похожая история: движок собирает texture atlas, а элементы показывают нужные участки, вместо того чтобы тупо вешать отдельную картинку на каждый треугольник.

До Three.js или Babylon.js по возможностям тут далеко: освещение проще, у теней и текстур есть ограничения, а большие сцены довольно быстро начинают упираться в DOM. Но для небольших интерактивных сцен, моделей и всяких веб-экспериментов подход вполне рабочий, и при этом весь результат остаётся частью обычной страницы.

PolyCSS: https://github.com/layoutit/polycss
cssQuake: https://github.com/layoutit/cssQuake

Демонстрация квейком, конечно, это мощно.

#3d #polycss #quake