Show HN: A CSS-Only Terrain Generator 🔥 Горячее
Layoutit Terra - это интерактивный генератор рельефа на CSS, позволяющий создавать разнообразные ландшафты с настраиваемыми параметрами. Инструмент предлагает выбор между типами рельефа (пампы, холмы, горы) и биомами (умеренный, арктический, пустынный), а также контроль над размером мира и покрытием суши. Пользователи могут детально настраивать камеру через параметры вращения, наклона и увеличения, добавляя анимацию к созданным ландшафтам.
Генератор поддерживает экспорт результатов в多种 форматы, включая CSS, высотные карты, VOX, TXT и PNG, что обеспечивает гибкость использования. Функции импорта, отмены/повтора действий, а возможность копировать код для встраивания или открывать его в Codepen упрощают интеграцию в другие проекты. Несмотря на раннюю версию (v0.0.1), Layoutit Terra уже предоставляет мощные возможности для создания детализированных CSS-ландшафтов с минимальными усилиями.
Комментарии (80)
- Пользователи отмечают, что «CSS-only»-демо всё же использует JS для интерактивности, хотя рендеринг ландшафта действительно на 100 % CSS.
- Визуально демо напоминает RCT, SimCity 2000, Populous и другие изометрические «тайкун»-игры, вызывая ностальгию.
- Несколько человек сообщили о проблемах с производительностью: при включённом JS в Firefox 144 и Chrome 131 на Windows 10/11 рендеринг занимает 100-200 мс на обновление кадра, что приводит к просадкам фпс.
- Автор ответил, что в будущих версиях планируется добавить реки и водопады, а также улучшить производительность.
Procedural Island Generation (III)
Генерация процедурных островов (часть III)
Продолжаем с части II, где была создана основа карты высот и система горных хребтов. Теперь добавим детализированные шумовые слои, горные пики на основе расстояния и выполним смешивание для финального рельефа.
Карта высот (повтор)
Исходная карта высот из части I задаёт базовое распределение суши и воды:
Для визуализации используется палитра magma из matplotlib с искусственным затемнением океанских областей. Карта семплируется по центроидам треугольников Делоне.
Многоуровневые шумовые слои
Накладываем несколько октав шума Симплекса на разных частотах поверх базовой карты. Каждый слой добавляет детали разного масштаба.
Используется шесть слоёв с частотами: 1x, 2x, 4x, 16x, 32x, 64x. Отсутствует слой 8x (n₃).
Усиление прибрежного шума
Применяем высокочастотный шум specifically вдоль береговой линии:
\[e_{coast} = e + \alpha \cdot (1 - e^4) \cdot \left(n_4 + \frac{n_5}{2} + \frac{n_6}{4}\right)\]
Множитель \((1 - e^4)\) создает колоколообразную кривую, пикующуюся на береговой линии (e=0).
Поле расстояний до гор
Для горных пиков предварительно вычисляем поле расстояний через топологию триангуляции Делоне с использованием BFS:
- Начинаем от треугольников с горными точками (расстояние = 0)
- Посещаем соседние треугольники, увеличивая расстояние на рандомизированную величину
- Рандомизация создает естественные формы вместо идеальных конусов
Формула приращения расстояния: \[\Delta = s \cdot (1 + j \cdot r)\] где r использует треугольное распределение для естественного вида.
Порядок обработки соседей случайно перемешивается алгоритмом Фишера-Йейтса для избежания направленных смещений.
Смешивание высот
Финальная высота комбинирует все компоненты через взвешенное смешивание.
Комментарии (17)
- Автор выбрал подход на основе графа (Voronoi) и сетки (mesh), а не шума или фракталов, для большей структурной целостности и контроля над формами рельефа.
- Основная критика существующих методов (шум, фракталы) — их недостаточный реализм и неестественность, поскольку они не моделируют геологические процессы.
- Уникальность подхода в статье — комбинация Voronoi-диаграмм с добавлением шума к расстояниям и последующим моделированием эрозии.
- Обсуждается ценность альтернативных, телеологических (основанных на моделировании процессов) методов: тектоники, эрозии, климата для достижения максимального реализма.
- Отмечается, что физически-обусловленное моделирование — это сложно и вычислительно дорого, но используется в высокоточных профессиональных инструментах.
- Упомянуто разделение алгоритмов на онтогенетические (создающие конечную форму) и телеологические (симулирующие процесс формирования).
- Подчёркивается, что выбор метода отражает то, как автор концептуализирует процесс генерации, а не подход, основанный на данных.