Konfigurator produktu 3D (Retrodajnia)
Retrodajnia składa ręcznie kwietniki piętrowe w dziesiątkach kombinacji kolorów i wykończeń — a klient musiał wyobrażać sobie efekt z opisu. Zbudowaliśmy dla niej autorski konfigurator, w którym klient sam składa produkt i od razu widzi realistyczny podgląd: wybiera kolor osobno dla każdego blatu, dobiera obręcz i wykończenie nóg, a narzędzie przemalowuje zdjęcie kwietnika na żywo. To nie jest gotowa wtyczka z marketplace — to narzędzie napisane od zera pod ten konkretny produkt. Możesz je otworzyć i przeklikać przyciskiem powyżej.
Schemat działania — krok po kroku
Wejście do konfiguratora
Klient otwiera narzędzie na stronie sklepu — bez logowania, od razu działa.
Wybór modelu
Wybiera model kwietnika. Cena jest stała, niezależnie od konfiguracji — bez niespodzianek.
Kolor każdego piętra
Dobiera kolor osobno dla każdego z czterech blatów — 11 kolorów płyt laminowanych.
Obręcz i nogi
Wybiera kolor obręczy i wykończenie nóg — całość podmienia zdjęcie bazowe kwietnika.
Podgląd na żywo
Silnik na canvasie przemalowuje produkt w czasie rzeczywistym — bez przeładowań.
Realny kolor na zdjęciach
Przy każdym blacie klient podejrzy prawdziwy odcień na zdjęciach realizacji — uczciwie.
Dodanie do koszyka
Gotowa konfiguracja trafia do zamówienia — sklep wie dokładnie, co złożył klient.
Co to daje
Kupują to, co widzą
Realistyczny podgląd zmniejsza niepewność i ryzyko rozczarowania po zakupie.
Setki kombinacji
11 kolorów na 4 piętrach plus obręcz i nogi — każdy klient składa swój wariant.
Podgląd bez przeładowań
Canvas renderuje od razu, nie z gotowych obrazków — dlatego każda kombinacja wygląda realistycznie.
Uczciwość wobec klienta
Jasny komunikat, że podgląd jest poglądowy, plus realne zdjęcia koloru — buduje zaufanie.
Szyte pod produkt
Narzędzie zrobione od zera pod konkretny asortyment rękodzieła, nie gotowiec z marketplace.
Lekkie i samodzielne
Jeden samowystarczalny plik, bez ciężkich wtyczek — działa szybko i wszędzie.
Szczegóły
Po co klientowi konfigurator
Przy produkcie z dziesiątkami wariantów kolorystycznych opis i kilka zdjęć nie wystarczą — klient nie wie, jak wyjdzie jego kombinacja. Konfigurator pozwala mu złożyć kwietnik po swojemu i od razu zobaczyć efekt. To zmniejsza niepewność przed zakupem, wyróżnia markę rękodzielniczą i realnie pomaga podjąć decyzję o zamówieniu.
Jak powstaje podgląd
Podgląd nie jest zbiorem gotowych obrazków dla każdej kombinacji — to byłoby ich setki. Zamiast tego silnik na canvasie bierze zdjęcie bazowe kwietnika i przemalowuje poszczególne blaty piksel po pikselu, nakładając wybrany kolor na mapę cieni. Dzięki temu każda z setek kombinacji wygląda naturalnie, z zachowaniem światłocienia i faktury.
Uczciwość i realny kolor
Kolory na ekranie zawsze różnią się od rzeczywistych płyt, dlatego narzędzie tego nie ukrywa: pod podglądem jest wyraźna informacja, że wizualizacja jest poglądowa, a przy każdym blacie przycisk „Realny kolor na zdjęciach" pokazuje prawdziwy odcień na zdjęciach realizacji. Klient zamawia świadomie.
Dla zainteresowanych — jak to działa „pod maską". Konfigurator to jeden samodzielny plik HTML z silnikiem renderującym na canvasie 2D, bez backendu, bez frameworka i bez procesu budowania. Przemalowanie blatów to operacja na pikselach: maski alpha na piętro + mapa cieni nakładane na zdjęcia bazowe.
Silnik renderowania na canvasie
Dla każdego piętra trzymamy rzadką maskę alpha (tablice indeksów pikseli i wartości krycia) oraz wspólną mapę cieni jako Float32. Render to dla każdego blatu: out = base·(1−a) + kolor·cień·a, liczone tylko na pikselach maski, a wynik trafia przez putImageData na bufor i jest skalowany do widoku z uwzględnieniem DPR. Stąd płynne, realistyczne przemalowanie w czasie rzeczywistym.
Warianty jako złożenia zdjęć
Obręcz i wykończenie nóg to nie kolor nakładany programowo, tylko wybór zestawu zdjęcia bazowego — mamy 12 zestawów (4 obręcze × 3 wykończenia nóg), każdy ze zdjęciem bazowym i czterema maskami blatów. Wybór obręczy/nóg przełącza zestaw, a kolory blatów dokładamy na canvasie. Wszystkie obrazy są w base64 wprost w pliku, więc narzędzie działa też offline.
Samodzielność i wydajność
Całość to jeden plik: 69 obrazów wklejonych jako data URI, pasek postępu ładowania z dekodowaniem zasobów, leniwe skalowanie podglądu i zero zależności zewnętrznych (poza fontami Google). Brak backendu oznacza, że narzędzie łatwo osadzić i że jest szybkie. W portfolio serwujemy je jako kopię oznaczoną noindex.