Урок 4: Практика — 3D-продукт

Чему вы научитесь

• Проходить полный производственный цикл 2026 года: от ортографического 2D-референса до готового 3D-продукта на сайте и в портфолио
• Готовить бестеневой входной референс в Nano Banana Pro и собирать 3D-модель с PBR-картами в Hunyuan3D 3.1 Pro (или Tripo H3.1 / Meshy 7.1)
• Проводить модель через 7-пунктовый инженерный чек-лист в Blender (пивот в основании, реальные метры, чистый Albedo, Draco-сжатие)
• Собирать финальную подачу в трёх форматах: фотореалистичный рендер Cycles для Figma, сжатый GLB для веба и USDZ для AR на iPhone

Задача практикума

В этом уроке мы соединим все инженерные правила модуля d.5 в единый проект: создадим 3D-модель продукта (на примере минималистичной настольной лампы или беспроводных наушников), проверим её сетку и PBR-карты по стандарту 2026 года (World Models Watch: AI 3D Game Assets Guide, TRELLIS 2 Alternatives) и упакуем результат для реального продакшена.

Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.

Этап 1: Подготовка ортографического референса без ложных теней

Как мы разобрали в первом уроке, нельзя подавать в Image-to-3D рекламный постер с глубокими тенями, контровым неоном и широкоугольной перспективой 35 мм. Любая тень на входной картинке превратится либо в геометрическую вмятину на сетке, либо в чёрное пятно, намертво впечатанное в цветовую карту Albedo.

Для нашего проекта сгенерируем технически чистый референс в модели Nano Banana Pro (gemini-3-pro-image) на arckep.ru (или бесплатно в Flux Schnell на HuggingFace).

Эталонный промпт для входного референса:

minimalist desk lamp, matte white ceramic cylindrical base,
thin brushed steel arm, warm ring diffuser turned off,
orthographic front-three-quarter view, isolated on solid neutral light-gray background,
even flat diffused studio lighting, no cast shadows, no harsh specular highlights,
clean sharp silhouette, no overlapping parts, product technical reference

Референс: наушники для 3D-генерации (Nano Banana 2 через arckep.ru)

Сравним, чем технический референс для 3D-реконструкции отличается от обычного рекламного рендера:

Этап 2: Генерация 3D-модели и выбор параметров сетки

Переходим от плоского референса к трёхмерной геометрии и физическим картам материалов.

1. Откройте Hunyuan3D 3.1 Pro на arckep.ru. Перейдите в каталог моделей на arckep.ru, выберите Hunyuan3D 3.1 в режиме Image-to-3D и загрузите подготовленный на Этапе 1 референс (или набор ракурсов Multi-View).

2. Проверьте силуэт в режиме чистой геометрии (опционально). Если предмет сложный, сначала запустите быстрый прогон без текстур (geometry-only mode), чтобы убедиться, что стойка лампы или дужка наушников не имеет разрывов.

3. Задайте полигонаж и включите 4K PBR-карты. Укажите целевую плотность сетки (target face count) и активируйте генерацию PBR-текстур — модель создаст отдельные карты Albedo, Roughness, Metallic и Normal.

4. Альтернативные настройки в Tripo H3.1 / P2 и Meshy 6 / 7.1. Если вы собираете проект в Tripo H3.1, задайте faceLimit (например, 15000 для веба или 50000 для рендера), включите autoSize=true для масштаба в реальных метрах и quad=true для получения четырёхугольной сетки в формате FBX. В Meshy 6 / 7.1 выберите топологию Quad, если планируете гнуть провод или шарнир лампы, а для локального open-source пайплайна используйте Microsoft TRELLIS 2 (512³–1536³ O-Voxel).

5. Скачайте ассет. Сохраните модель в формате GLB (или FBX, если выгружали квад-сетку из Tripo/Meshy).

Этап 3: Инженерная доводка в Blender по 7-пунктовому чек-листу

Сырой файл из генератора нельзя сразу отправлять клиенту или на сайт. Откройте бесплатный Blender, удалите стартовый куб и импортируйте модель (File → Import → glTF 2.0 или FBX). Проведём её по всем семи пунктам производственного стандарта:

1. Пункт 1 и 2: Бюджет полигонов и топология. Включите статистику сцены (Viewport Overlays → Statistics). Для мобильного веба и карточек товаров удерживайте полигонаж ниже 15 000 треугольников (для hero-сцены и крупного рендера допустимо 50 000+). Если сетка слишком плотная, примените модификатор Decimate, а для сгибаемых деталей используйте Quad-топологию (через Remesh → QuadriFlow в Blender или изначальный экспорт с quad=true).

2. Пункт 3: Чистота геометрии (Watertight). В режиме редактирования (Tab) проверьте дно подставки и тонкие соединения. Удалите висящие в воздухе случайные вершины (Mesh → Clean Up → Delete Loose).

3. Пункт 4: Ревизия PBR-карт в Shader Editor. Переключитесь в режим Material Preview (Z) и откройте Shader Editor. Убедитесь, что к шейдеру Principled BSDF подключены честные карты, а на базовой текстуре цвета (Albedo) нет чёрных пятен. Для нашей лампы докрутите физику вручную: на керамическом основании поставьте Roughness = 0.3 и Metallic = 0.0, а на стальной ножке — Metallic = 1.0 и Roughness = 0.25.

4. Пункт 5: Установка Pivot Point в центр основания. Поставьте 3D-курсор в начало координат (0, 0, 0) (Shift + C). В режиме редактирования поднимите всю геометрию так, чтобы подошва лампы стояла ровно на плоскости пола (Z = 0), выровняйте её по центру и в объектном режиме нажмите Object → Set Origin → Origin to 3D Cursor. Теперь модель вращается вокруг своей оси без смещения.

5. Пункт 6: Реальный масштаб в метрах. Откройте боковую панель (N → Item → Dimensions). Если высота настольной лампы равна 9.2 m, уменьшите её клавишей S до реалистичных 0.38 m (38 сантиметров) и обязательно зафиксируйте масштаб комбинацией Ctrl + A → Scale.

6. Пункт 7: Сжатие Draco для мгновенной загрузки в вебе. При экспорте копии для сайта (File → Export → glTF 2.0 (.glb)) ограничьте размер текстур до 2048px (формат WebP) и во вкладке Compression включите Draco mesh compression. Вес файла сократится с 30–40 МБ до 1,5–3 МБ (загрузка на сайте быстрее 1 секунды).

Этап 4: Студийный рендер и три варианта финального Mockup

Когда модель вычищена и настроена, мы можем за 15 минут получить из одного 3D-файла сразу три продуктовых артефакта.

1. Фотореалистичный рендер в Blender (Cycles) и Mockup в Figma

1. Выставьте трёхточечный студийный свет:
   • Key Light (рисующий): Add → Light → Area, спереди-слева под углом 45 градусов, мощность 400–500 W, мягкий размер источника.
   • Fill Light (заполняющий): с противоположной стороны, мощность 150–200 W для высветления глубоких теней.
   • Rim Light (контровой): сзади-сверху, мощность 300 W, чтобы отделить силуэт стальной дужки от фона.
   • Дополнительно подключите студийную карту окружения HDRI с polyhaven.com во вкладке World Properties.
2. Настройте рендер Cycles: выберите движок Cycles (он физически точно считает отражения на металле и керамике), установите Samples = 128–256 с включённым Denoising, разрешение 2048×2048 или 3840×2160 и нажмите F12.
3. Соберите подачу в Figma: сохраните рендер в PNG с прозрачным фоном (Film → Transparent), перенесите во фрейм Figma 1920×1080 и впишите в карточку продукта или hero-экран интернет-магазина.

2. Интерактивный 3D-виджет для сайта (<model-viewer> или Spline)

Возьмите сжатый через Draco файл lamp-web.glb (до 15 тыс. треугольников, вес ~2 МБ):

• Подключите его через тег <model-viewer src="/models/lamp-web.glb" camera-controls auto-rotate shadow-intensity="1" environment-image="neutral"> на страницу товара. Благодаря пивоту в центре основания лампа будет плавно вращаться ровно в центре блока.
• Либо загрузите GLB в Spline, добавьте включение тёплого свечения лампы по клику (Mouse Down Event) и встройте сцену в Webflow или Framer.

3. AR-примерка в комнате покупателя на iPhone (USDZ)

Экспортируйте модель с реальным масштабом (0.38 m) в формат USDZ (напрямую из Blender 4.x или автоматически через атрибут ar в <model-viewer>). При открытии страницы в Safari на iPhone пользователь увидит кнопку проcмотра в дополненной реальности и сможет поставить лампу в реальную величину на свой рабочий стол.

Полная схема производственного пайплайна

Ортографический референс без теней (Nano Banana Pro на arckep.ru)
    │
    ▼
Реконструкция 3D + 4K PBR (Hunyuan3D 3.1 Pro / Tripo H3.1 / Meshy 7.1)
    │
    ▼
7-пунктовый инженерный чек-лист в Blender:
[<15k/50k полигонов • Quad/Tri • Watertight • Чистый Albedo • Пивот в дне • Метры • Draco]
    │
    ├──► Рендер Cycles (PNG с прозрачностью) ──► Продуктовый Mockup в Figma
    ├──► Сжатый GLB (< 3 МБ, загрузка < 1 сек) ──► <model-viewer> / Spline на сайте
    ├──► USDZ в реальном масштабе ──► AR-примерка на iPhone (Apple Quick Look)
    └──► FBX (quad=true + коллизии) ──► Игровой движок Unity / Unreal Engine