🔍 Как сделать виртуальную примерку очков: полный разбор проекта

Пока лето еще в самом разгаре и теплые деньки надеюсь у нас еще впереди, хотел бы поделиться опытом разработки веб-приложения для виртуальной примерки очков, которое мы делали в июне в рамках курса "Cursor. AI-прототипирование и ИИ-агенты".

Расскажу коротко (насколько позволяет формат заметки) о всех этапах - от исследования до деплоя.

Исследование решений 🔬

Сначала проводим анализ возможных подходов к решению задачи и существующих open-source проектов для AR-примерки, которые можно взять за основу. Как правило, после проведенного ресерча всегда возникает "развилка", которая в данном случае выглядит так:

• Самостоятельная разработка:
Создать решение с нуля, используя комбинацию передовых библиотек: MediaPipe для высокоточного отслеживания лица и Three.js для рендеринга 3D-моделей. Этот подход обеспечивает максимальный контроль, наилучшее качество и гибкость для будущего развития.

• Адаптация готового проекта: Взять за основу существующий open-source проект, например, bensonruan/Virtual-Glasses-Try-on (который демонстрирует связку MediaPipe + Three.js). Это может ускорить начальный этап, но в долгосрочной перспективе может оказаться менее гибким вариантом.

Мы решили пойти путем адаптации готового проекта. И выбирали из следующих вариантов:
• jeeliz/jeelizGlassesVTOWidget - 300 ⭐️ Самое популярное решение с готовой базой 3D-моделей
• bensonruan/Virtual-Glasses-Try-on - 46 ⭐️
• alperenuzun/basic-virtual-tryon-glasses - 30 ⭐️ Базовая реализация без продвинутых функций

Попробовав все три варианта, я выбрал Jeeliz как наиболее зрелое решение (ну и "звездочек" у него больше).

Архитектура финального решения 🏗

• Фронтенд: Lovable.dev - быстрое создание React-интерфейса
• Бэкенд: Яндекс.Облако - Docker-контейнер с nginx и виджетом
• Интеграция: Stripe для платежей + система аутентификации (заодно проверили как lovable.dev справился с "прикруткой" данных функций - все прошло гладко)

Потестировать финальное приложение можно по ссылке (примеры на скриншотах)
На посадочной странице есть подробная информация про архитектуру и внутреннее устройство приложения.

Техническая база проекта ⚡️

Использовали готовую библиотеку Jeeliz VTO Widget:
• WebGL-рендеринг с физически корректным освещением
• Нейросеть для отслеживания лица в реальном времени
• База 3D-моделей очков (Ray-Ban, Oakley, Carrera)
• Поддержка мобильных устройств

Что пришлось решать 🔧

1️⃣ HTTPS-требование - камера работает только через защищенное соединение 2️⃣ Контейнеризация - настроил Docker + Nginx с SSL-сертификатами 3️⃣ Проксирование API - внешние ресурсы Jeeliz через локальный прокси 4️⃣ GPU-совместимость - проверка WebGL на клиенте

Разделение фронт/бэк 📐

Lovable.dev (фронтенд):
• Посадочная страница с описанием
• Система регистрации/авторизации
• Интеграция Stripe для оплаты
• Адаптивный дизайн

Яндекс.Облако (бэкенд):
• Docker-контейнер с Nginx
• Jeeliz VTO Widget
• SSL через Let's Encrypt
• Прокси для внешних API

Практические находки 💡

• GPU нужен только на клиенте, сервер работает без видеокарты
• Обязательно тестировать WebGL-совместимость (например, chrome://gpu)
• Для слабых устройств есть режим пониженной производительности
• Размер приложения всего 2.1MB благодаря оптимизации

Результат работы 📊

Получили полнофункциональное приложение:
• Работающая AR-примерка в браузере (safari/firefox/chrome)
• Каталог с 200+ моделями очков
• Система оплаты и личный кабинет (подписку оформлять не нужно, она сделана для проверки функциональности)
• Готовое к продакшн-деплою решение

Весь процесс занял несколько часов благодаря использованию готовой библиотеки и правильной архитектуре.

О курсе 🎓
• Данный проект был реализован в рамках курса "Cursor. AI-прототипирование и ИИ-агенты"
• Следующий поток стартует 27 августа - отличная возможность освоить современные инструменты разработки с ИИ.
• Примеры реализованных проектов можно найти здесь.

@llm_notes

#webgl #ar #lovable #cursor #yandexcloud #glasses #productuniversity