Создание генеративных CSS-миров
Выжимка статьи: Crafting Generative CSS Worlds
Вдохновленный ностальгией по изометрическим пиксельным играм 90-х, этот проект демонстрирует, как воссоздать подобный шарм с помощью современного CSS. Статья исследует генератор ландшафта Layoutit Terrain Generator, показывая, как комбинирование сложенных сеток и 3D-преобразований может создавать полностью адресуемое трехмерное пространство прямо в браузере, без использования Canvas или WebGL. Для настройки сцены используется элемент .scene как крепление для камеры с perspective: 8000px для почти изометрического вида. Элемент .floor наклоняет все пространство с помощью transform: rotateX(65deg) rotate(45deg), устанавливая ориентацию камеры. Множество элементов .z затем располагаются вертикально с translateZ(25px * level), где каждый слой действует как срез сетки на определенной высоте, формируя координаты X, Y и Z.
Помимо простых кубов, для построения ландшафта введены новые примитивы: flats (плоскости), ramps (пандусы), wedges (клинья) и spikes (шипы). Эти формы следуют диметрической системе 2:1, где каждая единица высоты равна двум единицам глубины, с размерами ячеек 50x50x25px и постоянным наклоном грани в 26.565° для плавных переходов. Благодаря тому, что формы являются обычными DOM-элементами, их легко стилизовать с помощью CSS background-image или background-color. Освещение в движке направленное и "запекается" в текстуры: каждая видимая грань получает класс light-level на основе ее угла к источнику света, обеспечивая правдоподобное затенение.
Генерация ландшафта начинается с карты высот, построенной с использованием библиотеки simplex-noise, с последующими проходами для сглаживания и террасирования местности. Важное правило гласит, что соседние тайлы не могут отличаться более чем на один уровень высоты, что предотвращает образование обрывов и обеспечивает согласованные склоны. Классификатор определяет, какая форма подходит для каждой ячейки, используя обширный свод правил и ручные переопределения для сложных пересечений.
Основное ограничение производительности связано с количеством DOM-элементов: сетка 32x32x12 является безопасным пределом, так как превышение приводит к падению частоты кадров. Использование clip-path для треугольных граней изначально снижало производительность из-за перерисовки, поэтому его заменили на предварительно вырезанные спрайты PNG. Этот проект демонстрирует, что техника сложенных сеток выходит за рамки простых кубов, открывая путь для изометрических веб-игр и легких интерактивных 3D-проектов, которые остаются простыми, читаемыми и легко инспектируемыми без WebGL.
