Виртуальная примерка люксовых очков

Контекст

О проекте

Клиент NDA

Сфера Люксовая оптика / e-commerce

Срок 1 месяц

Задача

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

Основные требования:

→ Автоматически определять лицо на фотографии
→ Определять положение и геометрию глаз
→ Автоматически позиционировать выбранную оправу
→ Рассчитывать масштаб и наклон очков
→ Подготовить изображения и модели оправ для примерки
→ Работать с большим товарным каталогом
→ Выполнять обработку на стороне клиента без обязательного backend
→ Передать самостоятельный модуль для интеграции в интернет-магазин

Как решали

Вызовы и решения

Показываем не только результат, но и задачи, которые пришлось решить по ходу проекта

Автоматическая посадка оправы

Проблема

Пользовательские фотографии отличаются разрешением, расстоянием до камеры, размером и положением лица. Фиксированное размещение изображения очков не даёт корректной посадки.

Решение

Реализовано распознавание лица и ключевых точек. На их основе система рассчитывает положение глаз, масштаб, координаты и наклон выбранной оправы.

Реалистичность виртуальной примерки

Проблема

Простого наложения изображения недостаточно: оправа должна восприниматься как часть фотографии, а не как графический слой поверх лица.

Решение

Настроены позиционирование и масштабирование оправ, визуальные параметры линз, затемнение, прозрачность и отражения. Для моделей подбирались параметры, влияющие на итоговую посадку.

Подготовка большого каталога

Проблема

Сервис должен был работать не с несколькими демонстрационными оправами, а с большим товарным каталогом. Изображения находились в разных источниках и требовали систематизации и подготовки.

Решение

Собраны фотографии оправ, организовано сопоставление по бренду и модели, подготовлены модели и данные, необходимые для работы виртуальной примерки.

Повороты головы и перспектива

Проблема

При ракурсах 3/4 и профиль обычная 2D-трансформация начинает искажать геометрию: дальняя линза чрезмерно сжимается, мост смещается, а дужки перестают соответствовать реальной перспективе.

Решение

Протестированы разные варианты перспективной трансформации и позиционирования. Это позволило определить границы 2D-подхода и выбрать корректную архитектуру для дальнейшего развития сложных ракурсов.

Итог проекта

Результаты

Ключевые показатели и эффект от реализованного решения.

1 месяц

полный цикл разработки

17 000+

позиций в исходном каталоге

Готово

модуль передан для интеграции

Функциональность

Что реализовали

Ключевые модули и возможности, которые вошли в итоговое решение

✓ Распознавание лица в браузере

✓ Facial landmarks

✓ Автоматическое позиционирование оправы

✓ Расчёт масштаба, наклона и yaw

✓ Canvas 2D-рендер линз и оправы

✓ Подготовка геометрии Ray-Ban RB3447

✓ Клиентская обработка без backend

✓ Модуль для интеграции в интернет-магазин

Процесс работы

01

Исследование

Разбор сценариев примерки, структуры каталога и требований к посадке оправ.

02

Прототип

Проверка распознавания лица и facial landmarks прямо в браузере, а также базовой геометрии позиционирования оправы.

03

Доработка посадки

Разработка собственной JS-геометрии примерки и Canvas 2D-рендера: масштаб, наклон, yaw, линзы, мост и дужки.

04

Подготовка каталога

Подготовка ассетов и геометрии модели Ray-Ban RB3447 для использования в модуле виртуальной примерки.

05

Передача модуля

Финальная сборка самостоятельного модуля и передача заказчику для внедрения на сайт.

Стек проекта

Технологии

Инструменты, которые использовали для реализации этого решения

HTML CSS JavaScript Computer Vision Facial Landmarks Canvas 2D

Хотите так же?

Расскажите о проекте — предложим решение за 24 часа

Быстрая связь:

@websolux websolux@mail.ru