Модель в частицах — облако точек по поверхности на three.js

Хотелось третьего: взять готовый файл модели и собрать из него эффект прямо в браузере — так, чтобы форма читалась, но подавалась не в лоб, и чтобы всё настраивалось живьём, а не подбиралось заранее в редакторе.

Модель для демонстрации — наш олень: один меш, 21 248 треугольников, 65 КБ со сжатием Draco. Специально ничего под эффект не готовилось, взят обычный рабочий файл.

Ход работы

• точки раскидывает MeshSurfaceSampler из three.js: он строит по мешу таблицу площадей граней и потом выдаёт случайную точку на поверхности. Грань выбирается пропорционально своей площади, поэтому плотность не зависит от того, как модель разбита на треугольники — у оленя тело и тонкие ветви рогов покрываются одинаково ровно;
• если в модели несколько деталей, бюджет точек делится между ними по той же площади, а таблица кешируется по геометрии: инстансам одного меша своя не нужна;
• облако не появляется целиком. Точки посчитаны заранее, но показываются постепенно: растёт диапазон отрисовки, и модель будто прорисовывает сама себя. Дописывать буфер каждый кадр, как в учебных примерах, незачем — это пересоздание атрибута на каждом кадре;
• по поверхности одновременно ползут линии: следующая точка берётся случайно и принимается, только если она недалеко от предыдущей. Каждая линия идёт своим оттенком: они расходятся симметрично вокруг основного тона, поэтому рядом с фиолетовым получаются синий и малиновый. У линии есть хвост, и стирается он не удалением данных, а сдвигом окна отрисовки — поэтому линия может ползти сколько угодно долго, не упираясь в размер буфера;
• точка рисуется кругом по gl_PointCoord, без текстуры, и уменьшается с расстоянием: иначе дальняя половина модели выглядит такой же плотной, как ближняя, и объём пропадает;
• размер точки, плоскости отсечения камеры и посадка кадра считаются от габаритов самой модели. Файлы приходят в разных единицах, и без этого одна модель превращалась в сплошной силуэт, а другая целиком уезжала за дальнюю плоскость — обе ошибки были пойманы при смене модели;
• цвет смешивается из двух тонов по высоте и целиком крутится одним ползунком оттенка. Тема сайта переключает и палитру, и режим смешивания: на тёмном фоне точки складываются аддитивно и светятся, на светлом аддитив увёл бы всё в белое;
• защита производительности: потолок devicePixelRatio и площади буфера, пауза рендера вне экрана, уважение системного «уменьшить движение».

Результат

Виджет не привязан к оленю: модель задаётся в настройках кейса, а не в коде, и подставить можно любой .glb. Прорисовка не заканчивается: собрав облако целиком, виджет не сбрасывает его, а начинает по кругу заменять самые старые точки свежими — сзади стирается, впереди появляется. Линия ведёт себя так же, поэтому пришедший на страницу позже застаёт живую работу, а не готовую картинку.

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

Это единственный из наших виджетов, которому нужен движок: three.js плюс сам файл модели. Остальные три — пирамида, звёздное поле и лава-лампа — обходятся двумя десятками килобайт и нулём зависимостей. Здесь цена другая, и платится она за другое: за возможность взять любую готовую модель и показать её так.