Пока лето еще в самом разгаре и теплые деньки надеюсь у нас еще впереди, хотел бы поделиться опытом разработки веб-приложения для виртуальной примерки очков, которое мы делали в июне в рамках курса "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