Будни разработчика: блог лид JS

#инструмент дня Этого стоило ожидать. Вашему вниманию — Quake на CSS. Реализован он с помощью движка PolyCSS, а выбрать карту можно просто передав значение в параметр. Например, вот второй уровень первого эпизода: Ссылка скрыта Итак, а что же такое 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: Ссылка скрыта cssQuake: Ссылка скрыта Демонстрация квейком, конечно, это мощно. #3d #polycss #quake