Автор: 希彼赫
Попробовать онлайн О проекте
Bloom — цветочное поле в реальном времени, работающее в браузере: проведите мышью по полю или включите камеру и сделайте «щипок» обеими руками — и волны цветов распустятся вдоль вашей траектории.
Цветы рендерятся в реальном времени из удалённо загружаемых 3D-моделей; настраиваются радиус влияния, скорость цветения, свечение, размер цветов, плотность и скорость волн. Это и играбельная интерактивная работа, и полигон для проверки того, как 3D-ассеты ведут себя в реальном времени.
Ключевые моменты
- Проведите мышью по полю — и волны цветов распустятся вдоль траектории
- Перетаскивайте, чтобы вращать камеру, и крутите колесо для зума — смотрите на поле с любого ракурса
- Включите камеру и дважды сделайте «щипок» — всё поле расцветёт разом
- Свечение, плотность, скорость волн, а также размер и насыщенность каждого цветка настраиваются; нажмите H, чтобы скрыть интерфейс и записать чистый кадр
Технический разбор
3D-ассеты · Tripo text-to-3D
Все шесть цветков на поле — белый, жёлтый, ромашка, фиолетовый, синий и красный — сгенерированы напрямую в Tripo text-to-3D: пишешь промпт — получаешь GLB с PBR-материалами. Каждый цветок укладывается в 2 000–8 000 треугольников — не ради красоты как таковой, а потому что поле высаживает почти пять тысяч цветков разом: чем легче модели, тем стабильнее частота кадров.
Все модели выдаются по одной конвенции: лицом к +Z, основание в начале координат, высота около одной единицы. Коду не нужен особый случай ни для одного цветка — ставишь новый, и всё просто работает.
Тысячи на экране · InstancedMesh
Заставить несколько тысяч цветков распускаться в браузере одновременно помогает InstancedMesh из Three.js: на каждый вид — одна геометрия и один материал, копированием занимается инстансинг. По умолчанию на поле около 4 900 цветков, по одному draw call на вид — нагрузка куда меньше, чем можно ожидать.
Анимация цветения тоже не трогает модели: масштаб каждого экземпляра обновляется в instanceMatrix, и цветок вырастает из прижатого к земле ростка до полного раскрытия.
Волны цветения · рейкастинг + радиальный фронт
Когда мышь скользит по полю, Raycaster проецирует курсор на луг, и точка попадания становится началом волны; каждый цветок смотрит, как далеко он от этой точки, и по расстоянию решает, когда раскрыться — ближние первыми, дальние позже, кольцо за кольцом наружу. Звучит замысловато, но в основе — один простой расчёт расстояния.
Управление жестами · MediaPipe Hands
При включённой камере MediaPipe Hands в реальном времени отслеживает 21 ключевую точку кисти. Код следит ровно за одним: сомкнулись ли большой и указательный пальцы — два щипка, и всё поле расцветает из точки, куда указывает кончик пальца. Чтобы избежать ложных срабатываний, распознаётся только правая рука.
Свечение · постобработка bloom
Это мечтательное сияние над сценой даёт постобработка UnrealBloomPass: общее свечение по умолчанию стоит на 0,46 — светится, но не выгорает. У каждого вида цветов есть и свои регуляторы свечения и насыщенности, так что атмосферу можно выкрутить на максимум, не заглушая собственный цвет ни одного цветка.
