Техножнец

🌲 Биом «Северный Лес» — процедурная генерация в одном HTML‑файле

Тысячи объектов, ни одной готовой модельки. Только код, шумы и физика. Один HTML — целый живой биом.

Сцена: что внутри

Изометрический мир с сезоном поздней осени. Холмистый рельеф с тремя кратерами‑озёрами, тремя пересекающимися дорогами, утопленным в дно стволом погибшего дерева. Берёзы с золотой листвой, покрытые ягодами кусты, грибные кластеры у пней, цветущие поляны, муравейники с активными колониями. Над водой роятся комары, пчёлы перелетают между цветами, рыбы проходят траектории под рябью воды.

Всё дышит ветром. Все объекты отбрасывают и принимают тени.

Почему это редкая комбинация

Большинство «процедурных» сцен либо генерят рельеф, либо размещают модели. Здесь каждый камень, бревно, лист, гриб, рыба, муравейник — построены из чистой геометрии в реальном времени, без единой текстуры с диска. Все 5+ миллионов треугольников — функция от seed‑числа.

Если сменить seed — другой лес. Те же закономерности, иная композиция.

Рельеф и террейн

Высота поверхности — суммы FBm‑шумов разных частот плюс «вычитаемые» кратеры‑чаши с поднятыми краями.

Дороги — катмулл‑ромовы кривые между точками карты, прорезающие рельеф через signed distance field.

Шейдер террейна делает 5 материалов одновременно:

грязь с воронои‑трещинами
мокрая земля с бликами
камень с галечной структурой
тропа с продольными колеями от телег
трава с проплешинами и пожухлыми пятнами

Веса слоёв вычисляются из высоты, наклона, расстояния до дорог. Bump‑карта — те же шумы что и в albedo, через dFdx/dFdy (одна выборка на пиксель вместо трёх). На дорогах сверху накладывается поле отпечатков ног — эллипсы, ориентированные вдоль направления тропы, с большей плотностью в центре дороги и на перекрёстках. Колея — две борозды по ±42 см от оси, на пересечении дорог накладываются друг на друга.

Вода и подводный мир

Озёра — отдельный mesh с шейдером отражений, специульной мутностью по глубине кратера (не по глубине поля зрения!) и динамической прозрачностью. У краёв — прозрачная зелёная вода, в центре — тёмно‑зелёная муть.

Рыбы плавают по waypoint‑маршрутам с фильтром "только глубокие центры". Тело рыбы изгибается синусоидой в vertex‑шейдере (живая чешуя с iridescent‑бликом). Водоросли растут только в самой глубокой зоне дна.

Деревья и ветер — самая задротская часть

3‑harmonic gust‑функция: три синуса с разными пространственными и временными частотами создают детерминированные порывы ветра по карте. На разных деревьях — разные фазы и амплитуды (по seed‑координате).

Двухуровневый bend:

Ствол гнётся целиком, основание неподвижно, амплитуда квадратично растёт к верхушке
Каждый лист отдельно дрожит вокруг своего центра — собственная частота, фаза, флаттер по 6 гармоникам

Каждый лист имеет атрибут aLeafCenter (мировая позиция узла), вокруг которого крутится локальная rotation matrix. Лист шевелится независимо, но едет вместе с веткой.

Падающие листья — instanced mesh на 140 квадов, физика с инерцией ветра, вращением, плавным оседанием на землю. Кусты и цветы реагируют на тот же ветер с уменьшенной амплитудой — чтобы вся сцена двигалась как единое поле.

Жизнь в биоме

Муравейники — конусы с displacement‑шумом, размещены вне дорог, кратеров и крутых склонов. Около каждого ходят активные муравьи — instanced спрайты на меше‑муравейнике с собственной state machine: foraging → returning → on‑hill → back. На вершине холма выталкиваются от пика наружу. У воды разворачиваются обратно. В каждом кадре микро‑jitter скорости — броуновское движение, не геометрические окружности.

Пчёлы перелетают между позициями цветов. State machine: fly_to_flower → hover → fly_to_next. Геометрия — SphereGeometry(6,4) со scale(2,1,1) — продолговатое тельце с полосками.

Мошки над водой — рои по 84 особи на каждое озеро. Random walk в bounding sphere, 3D геометрия с эмиссивным свечением (видны при сумерках).

Рыбы — body bend через изгибную деформацию vertex‑шейдера, чешуя с переливами. Маршруты привязаны к маске глубины кратера.

🔥40👍7❤6👏11

1.58K viewsedited 05:03