Wróć na stronę główną

VELLECała kolekcja do przymierzenia.

Wirtualna przymierzalnia dla sklepu odzieżowego. Wybierasz górę, dół i buty, a cały zestaw oglądasz na modelce w ruchu. Możesz zmieniać kolejne elementy bez zatrzymywania nagrania.

Klient
Koncept studia LUSTRA
Branża
Moda, e-commerce
Zakres
Koncepcja, materiały wideo, przymierzalnia, interfejs
Technologie
React, canvas, wideo H.264
Narzędzia
Python, generator wideo, ffmpeg
Rok
2026

Od pojedynczych ubrań do gotowego zestawu.

Zdjęcia pozwalają obejrzeć każdą rzecz osobno. Trudniej na nich sprawdzić, jak koszula wygląda z wybraną spódnicą i jak cały zestaw zachowuje się w ruchu.

Chcieliśmy dać odwiedzającym możliwość samodzielnego łączenia ubrań na modelce. Z zachowaniem wyglądu sesji: tej samej osoby, światła i tła.

Jedno ujęcie jako baza całej kolekcji

Punktem wyjścia jest nagranie modelki w bazowym zestawie. Na jego podstawie powstały warianty tego samego ujęcia, w których zmienia się pojedyncze ubranie.

Strona łączy te warianty w wybrany zestaw. Pięć gór, pięć dołów i cztery warianty butów dają sto kombinacji. Można je zmieniać podczas oglądania, bez zatrzymywania nagrania.

Pierwszy komplet: tunika i spodnie Wrap
01Pierwszy komplet: tunika i spodnie Wrap
Kurtka Clasp na tej samej modelce
02Kurtka Clasp na tej samej modelce
Koszula Stripe i spodnie Balloon
03Koszula Stripe i spodnie Balloon

Etapy pracy

  1. 01

    Kierunek

    Jedna modelka, jasne tło i kolekcja w grafitach, bieli i wiśni.

  2. 02

    Nagranie

    Ujęcie bazowe i jedenaście wariantów z pojedynczymi elementami kolekcji.

  3. 03

    Warstwy

    Synchronizacja ruchu, dopasowanie obrazu i wyodrębnienie ubrań.

  4. 04

    Interfejs

    Wybór ubrań z wieszaków, przewijanie kolekcji i zapisywanie zestawów.

Jak działa przymierzalnia

  1. 01

    Synchronizacja ruchu

    Nagranie bazowe i warianty ubrań mają różną liczbę klatek. Dopasowujemy ich przebieg, żeby ruch modelki i materiału zgadzał się w każdym momencie.

  2. 02

    Dopasowanie obrazu

    Między wygenerowanymi wariantami pojawiają się drobne przesunięcia. Korygujemy je klatka po klatce, żeby ubrania pozostawały na swoim miejscu.

  3. 03

    Wyodrębnienie ubrań

    Z każdego wariantu wydzielamy ubranie wraz z jego cieniem. Zachowujemy krawędzie materiału, żeby dobrze łączył się z pozostałymi elementami zestawu.

  4. 04

    Łączenie zestawu

    Ubrania nakładamy w ustalonej kolejności. Osobno opracowane fragmenty pozwalają zachować właściwe relacje między rękawem, spódnicą i sylwetką modelki.

  5. 05

    Interfejs

    Góry, doły i buty mają osobne rzędy wieszaków. Kolekcję można przeciągać lub przeglądać strzałkami, a wybrane zestawy zapisać.

Detale, które wymagały dopracowania

Podobne odcienie materiału

Tunika i bazowe szorty mają zbliżony kolor. Przy wyodrębnianiu tuniki korzystamy także z różnic jasności i cienia przy brzegu materiału.

Kolor ubrania a odcień skóry

Wiśniowa kurtka i skóra mają miejscami podobną jasność. Sam kolor czerwony nie wystarcza do ich rozdzielenia, dlatego uwzględniamy również różnice odcienia.

Dłonie i fałdy materiału

Dłoń może znajdować się przed ubraniem albo częściowo znikać za falbaną. Uwzględniamy to przy łączeniu warstw, żeby kolejność elementów zgadzała się z ujęciem.

Wiązania i drobne elementy

Wiązania spódnicy wystawały poza jej obrys i utrudniały łączenie z innymi ubraniami. Usunęliśmy je z materiału przed przygotowaniem warstwy.

Cały zestaw przed dodaniem do koszyka

Odwiedzająca wybiera ubrania i od razu widzi je razem na modelce. Może porównać zestawy w tym samym świetle i ujęciu, a ulubione zapisać.

Zmiana elementu garderoby nie przerywa nagrania. Dzięki temu można obserwować ruch materiału i sprawdzać kolejne połączenia.

Następna realizacjaTermovioStrona marki