3D-генератор ландшафта на Three.js: создаём процедурный пейзаж с травой!

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

Недавно я наткнулся на библиотеку THREE.Terrain — процедурный генератор ландшафта для веба на основе Three.js. Что действительно бросилось в глаза, так это наличие файла SKILL.md в их репозитории. Этот файл предназначен для ИИ-агентов и объясняет им, как пользоваться библиотекой. По сути, автор изначально рассчитывал, что этой библиотекой будут пользоваться именно ИИ-агенты.

THREE.Terrain даёт всё необходимое для создания полноценной 3D-сцены на открытом воздухе. На выбор — несколько алгоритмов: Diamond-Square, создающий гористую местность; Perlin и Simplex, дающие более сглаженный ландшафт; и шум Уорли (Voronoi), создающий более экзотический, кристаллический рельеф. Добавьте сюда текстуры высот, расстановку объектов и тысячи экземпляров травы, колышущейся на ветру. Можно даже задать значение seed, чтобы результат был детерминированным и при перезагрузке всегда получался один и тот же ландшафт.

1Как добавить рельеф в Three.js-проект

Убедитесь, что у вас установлен Three.js версии r160 или выше. После этого просто выполните следующую команду, чтобы установить THREE.Terrain:

npm install three.terrain.js

После установки создайте меш для ландшафта и добавьте его на сцену. Все параметры необязательны, но значений по умолчанию хватит, чтобы было с чего начать.

2Добавить траву и анимацию ветра

Тысячи экземпляров колышущейся травы способны по-настоящему оживить 3D-сцену на открытом воздухе. THREE.Terrain поддерживает инстансинг тысяч экземпляров травы, при этом предоставляя возможности уровня детализации (LOD), чтобы «сжимать» дальнюю траву и удерживать стабильный фреймрейт. Можно управлять плотностью травы, диапазоном цветов, высотой травинок и тем, насколько плотно травинки группируются друг с другом. Анимация ветра тоже выполняется прямо в цикле рендеринга.

3Экспорт и импорт карты высот

Библиотека THREE.Terrain позволяет экспортировать любой ландшафт в PNG-изображение с картой высот в градациях серого — для этого нужно добавить элемент canvas на страницу и сохранить его правой кнопкой мыши. Также можно импортировать PNG-изображение с картой высот (например, нарисованное вами самими или созданное в другом инструменте) в библиотеку и использовать его как основу для меша ландшафта. Такая улица с двусторонним движением помогает сочетать процедурные и ручные методы.

4Что сказать агенту

Если хотите самый простой вариант, просто упомяните название библиотеки и направьте агента к файлу SKILL.md в репозитории. Автор этой библиотеки написал этот файл специально для того, чтобы научить ИИ-агентов пользоваться ею. Перед этим стоит открыть интерактивную демку по адресу icecreamyou.github.io/THREE.Terrain, чтобы дать агенту лучшее представление о том, какой именно ландшафт вам нужен.