Я запустил Depth, когда разрабатывал веб-сайт продукта, который сильно зависел от 3D-рендеринга. Другие инструменты охватывали часть рабочего процесса, но я не смог найти простой модуль визуализации, который принимал бы произвольные модели.
Готовые изображения были созданы командой визуализации, которая уже обрабатывает запросы дизайнеров со всей компании. При этом каждые две недели я просматривал работу с руководством и между этими обзорами менял страницу.
У меня был доступ к 3D-моделям, но самому протестировать идею означало уйти из Figma, подготовить сцену в Blender или Cinema 4D, программном обеспечении, которым я не пользовался свободно, экспортировать изображение и вернуть его обратно.
На этом этапе мне не нужны были финальные материалы или производственное освещение. Мне нужно было достаточно формы и света, чтобы оценить, смотрится ли изображение на странице.
Для этой части процесса была создана глубина: загрузите модель, настройте камеру и освещение, поместите рендер на холст и продолжайте проектирование оттуда.
Прежде чем приступить к работе над полным интерфейсом, я построил узкую проверку концепции вокруг этого рабочего процесса. Он мог загрузить модель, переместить камеру, изменить свет и вернуть изображение в Figma. В основном я следил за тем, насколько отзывчивой остается сцена внутри окна плагина и насколько много 3D-управления может туда поместиться, не заставляя инструмент казаться незнакомым для тех, кто проводит большую часть дня в Figma.
Как только MVP доказал, что я могу добиться желаемой производительности и качества рендеринга в Figma, я начал работать над полезными функциями и формировать общее впечатление от плагина.
Глубина разделена между двумя частями плагина Figma. Three.js обрабатывает модель, камеру, материалы и освещение внутри окна плагина, а отдельный контроллер считывает и обновляет документ Figma. Когда пользователь выбирает кадр, контроллер отправляет его в 3D-сцену в формате PNG. После завершения рендеринга он возвращается в Figma как обычный слой изображения. Двукратный экспорт удваивает ширину и высоту PNG, сохраняя при этом заданный размер слоя на холсте, создавая более четкое изображение без изменения композиции.
Я сохранил шаблон инспектора Figma справа и использовал соглашения о камере, окне просмотра и временной шкале, аналогичные таким инструментам, как Cinema 4D и 3ds Max. Экспортировать просто: выберите множитель и поместите изображение в свой проект Figma.
Во время движения камеры Depth временно уменьшает рендеринг, а затем восстанавливает более полные тени и более чистые края изображения, помещенного в Figma.
Если в модели используются прозрачные или полупрозрачные материалы, функция «Глубина» включает в экспорт фон сцены, чтобы сохранить убедительные отражения и преломления.
Создание веб-сайта
Что касается веб-сайта, я хотел, чтобы посетители почувствовали, что делает Depth. Я структурировал его в соответствии с порядком, в котором рендер обретает форму: посетитель встречает голую форму, меняет ее материал и окружение, затем попадает в каталог окончательных рендеров. Сайт начинается почти полностью темным и представляет информацию один слой за раз. Тот же объект остается видимым при изменении этих переменных, что облегчает чтение эффекта каждого решения.
Первая сцена
Я хотел, чтобы начало выглядело кинематографичным, но при этом давало посетителям некоторый контроль над сценой. Он представляет визуальный язык сайта до начала глав «Форма», «Материал» и «Окружающая среда», поэтому качество изображения имеет больший вес, чем где-либо еще на странице.
В моей первой попытке использовалась живая 3D-модель. Это было самое прямое расширение Depth: создайте форму, перенесите ее в браузер и позвольте посетителю манипулировать ею. Я пробовал разные текстуры и HDRI, но материалы и освещение так и не достигли того визуального качества, которое я хотел для открытия. Сцена вела себя правильно, но по-прежнему выглядела как интерактивный 3D-эксперимент, а не как изображение, которое я имел в виду.
Я перестал пытаться оживить всего героя. Я сгенерировал два кадра и с помощью Seedance 2.0 создал поворот между ними на 360 градусов. Это движение превратилось в последовательность из 240 кадров, управляемую горизонтальным положением указателя мыши, поэтому перемещение по странице поворачивает остров напрямую, а не запускает фиксированное видео. Теперь я мог управлять композицией, деталями поверхности и атмосферой центрального изображения кадр за кадром, сохраняя при этом простую физическую реакцию.
Готовый герой по-прежнему использует 3D в реальном времени. Эти слои обеспечивают глубину и мгновенное движение, в то время как остров сохраняет качество изображения, которое я не мог получить от первой полностью живой версии. Рукописное название DEPTH находится внутри той же композиции. Вместе они создают впечатление одной 3D-сцены, хотя центральное изображение является контролируемым носителем.
Гибридный подход предполагает стоимость носителя, поэтому первый кадр не может зависеть от готовности всей последовательности. Страница сначала рисует плакат, сохраняет отдельные пейзажные и портретные материалы, а более тяжелые части начинает позже.
Форма и материал
Та же форма остается на месте при переходе страницы из формы в материал. Когда пользователи применяют к объекту разные материалы, новой поверхности требуется почти 2 секунды, чтобы пройти по объекту, что
Система управления реагирует немедленно; только поверхность требует времени. Переход происходит внутри одного непрозрачного материала Three.js, смешивая цвет, шероховатость, металлический отклик, детали поверхности и отражения перед тем, как объект будет освещен. Three.js по-прежнему рассматривает его как один сплошной объект, поэтому его края и глубина остаются стабильными, пока посетитель его вращает. Если кто-то передумает на полпути, выбор исходного материала вернет развертку обратно с ее текущей позиции. Выбор третьего варианта быстро удаляет активное изменение, а затем начинается последний выбор.
Среда
Следующая глава открывает сцену. Объект все еще здесь, теперь с выбранной поверхностью, и посетитель может поворачивать окружающую среду вокруг него. Я хотел, чтобы отражения фотографического мира не размещались за объектом, где облака, снег и горизонт заполнили бы черное пространство и сделали бы страницу похожей на обычное 3D-окно просмотра.
Я разделил работу на две части. HDRI, панорамное изображение, обернутое вокруг 3D-сцены для освещения и отражений, остается невидимым. Гора, которую на самом деле видит посетитель, представляет собой отдельный слой, взятый из реальной местности и нарисованный как редкое поле точек. Его выступы и изменения высоты взяты из модели, но пунктирная текстура сохраняет тот же визуальный язык, что и остальная часть сайта.
Оказывать
В заключительном разделе я хотел показать, как рендеринг из Depth может перейти в реальный рабочий процесс проектирования. После настройки сцены посетитель помещает объект в вымышленный магазин абстрактных фигур, превращая изолированный рендер в часть готового сайта.
В каталоге каждая фигура представлена как сочетание формы, материала и света — те же самые решения, которые посетитель только что исследовал.
Вы можете изучить сайт по адресу глубина.к вашему сведению и открыть глубину в Figma.