Объём из плоскости
Creative Developer · 2026 — настоящее время
Хотелось «оживить» статичный портрет, не снимая видео. Решение собралось из трёх частей. Первая — вырезка фона: модель отделяет человека от заднего плана. Вторая — глубина: Depth Anything V2 по одной фотографии строит карту глубины (где нос, скулы, плечи относительно камеры), так появляется настоящий объём, а не плоский рельеф. Третья — рендер: тысячи точек живут на пружинах, тянутся к целевой форме и перетекают между формами (портрет → надпись → фигура) одним и тем же облаком. Всё рисуется прямой записью в пиксельный буфер, поэтому держит 60fps даже на тысячах точек. В конструкторе глубина считается прямо в браузере (transformers.js), можно загрузить своё фото, покрутить объём и сохранить клип вращения или ассеты.
Идея
Статичный портрет на сайте — скучно, а видео — тяжело и не вписывается в LED-эстетику. Захотелось, чтобы лицо «жило» из тех же точек, что рисуют весь сайт, и при этом было объёмным, а не плоским эффектом.
Собрал движок-облако: точки тянутся к целевой форме на пружинах, поэтому переходы получаются мягкими. Один и тот же набор частиц умеет быть портретом, надписью и любой другой фигурой — между ними он перетекает.
Получился не один эффект, а движок форм. Он же стоит в хиро главной: наводишь — собирается лицо, кликаешь — фраза или фигура.
Как устроено
Вырезка фона. Модель отделяет фигуру от заднего плана — точки садятся только на объект.
Глубина. Depth Anything V2 по одной фотографии строит карту глубины: ярче = ближе. Из неё беру Z для каждой точки — нос и скулы реально выступают, при повороте виден объём.
Облако. Тысячи частиц с пружинной физикой тянутся к цели; смена формы — это смена цели, точки сами перелетают.
Скорость. Рисую не вызовами canvas на каждую точку, а прямой записью в пиксельный буфер — один putImageData на кадр, отсюда 60fps на тысячах точек.
Конструктор
Мало показать готовый портрет — интереснее дать любому закинуть своё фото и увидеть себя в 3D-точках.
В конструкторе глубина считается прямо в браузере через transformers.js (та же Depth Anything, без сервера). Сразу — быстрый предпросмотр, по кнопке «Обработать» — реальная глубина и вырезка фона. Ползунки крутят плотность точек, рельеф и зерно. Сохранить можно клип вращения (webm) или ассеты: силуэт и карту глубины.
Закинь фото (посчитаем глубину) или 3D-модель (.glb/.obj).
Фото: JPEG/PNG/WebP (HEIC с айфона может не открыться). 3D: .glb, .gltf или .obj — точки берутся прямо с поверхности модели, объём настоящий.
Глубину считает Depth Anything прямо в браузере (модель грузится один раз). Наведи курсор на холст — облако отыгрывает объём.
По сути маленький редактор: фото на входе — объёмное облако на выходе, с возможностью унести результат с собой. Попробуй прямо здесь ↓
Зачем мне это
Мне важно регулярно собирать что-то руками — это держит связь с технической стороной дизайна. Здесь сошлись три вещи, которые я люблю: AI прикладной, а не на словах (глубина из одной фотки), внимание к перформансу (тысячи точек без тормозов) и продуктовое мышление — мало сделать красиво, надо чтобы другой человек смог взять и попробовать на себе.