Kiedy konfigurator 3D produktu zarabia na siebie, a kiedy jest stratą

Czym jest konfigurator 3D i co zmienia w sprzedaży

Konfigurator 3D to model produktu wczytany w przeglądarce, którym klient steruje sam: obraca go, przybliża i przełącza warianty, a widok zmienia się natychmiast.

Sprzedaż produktu wariantowego rozbija się prawie zawsze w tym samym miejscu. Klient musi wyobrazić sobie złożenie, którego nie widzi na żadnym zdjęciu: katalog pokazuje trzy ustawienia, a on chce czwarte. Konfigurator usuwa ten krok, bo pokazuje dokładnie ten wariant, który klient przed chwilą wybrał.

Druga zmiana dotyczy obsługi, nie marketingu. Pytania w rodzaju „czy ten front pasuje do tego korpusu" przestają trafiać na skrzynkę, bo odpowiedź jest już na stronie. Oszczędność pojawia się po stronie handlowca.

Trzecia zmiana jest najmniej efektowna i najbardziej wymierna. Konfiguracja klienta może pojechać razem z zamówieniem do produkcji jako gotowa specyfikacja. Znika etap, na którym ktoś przepisuje wybór z maila do arkusza i myli jeden symbol wykończenia.

Warto od razu wiedzieć, czego konfigurator nie zrobi. Nie naprawi niejasnej oferty, nie zastąpi opisu ani wymiarów i nie sprzeda produktu, którego nikt nie szuka. Karty aplikacji obiecują wyższą konwersję i mniej zwrotów, ale to deklaracje producentów oprogramowania, a nie pomiar z Twojego sklepu.

Dla jakich produktów się opłaca, a dla jakich jest stratą

Granicą nie jest branża ani cena produktu, tylko liczba kombinacji, które klient może złożyć. Policz ją, zanim zamówisz model.

Sześć kolorów korpusu, pięć frontów, trzy szerokości i dwa uchwyty to nie szesnaście zdjęć, tylko sto osiemdziesiąt złożeń. Na tym polega arytmetyka tej decyzji: fotografia rośnie mnożąco, a model dodająco. Dokładasz jedną teksturę i obsługujesz kolejne trzydzieści kombinacji.

Próg wygląda tak. Do kilkunastu kombinacji zdjęcia wygrywają zawsze, bo są tańsze, wierniejsze i nie wymagają technologii. Między kilkunastoma a pięćdziesięcioma decyduje częstotliwość zmian w ofercie. Powyżej stu sesja kompletnego katalogu przestaje być projektem, a staje się kosztem wracającym przy każdym nowym kolorze.

Produkty, przy których to działa, mają wspólną cechę: wariant zmienia wygląd, a nie tylko etykietę. Meble na wymiar, kuchnie, drzwi, okna i schody, maszyny z opcjami wyposażenia, opakowania z nadrukiem, biżuteria z grawerem. Klient kupuje coś, czego nie zobaczy przed dostawą.

Bywa jednak wydatkiem bez zwrotu: przy produkcie w jednym wykonaniu, przy sprzedaży wyłącznie ceną oraz tam, gdzie decyduje faktura materiału oglądana z bliska, jak len, drewno lite czy kamień. W dwóch pierwszych przypadkach zrób dobre zdjęcia i popraw kartę produktu. W trzecim postaw na makrofotografię i próbki wysyłane pocztą.

Jak to działa technicznie i dlaczego telefon jest miarą

Pod spodem są cztery rzeczy: siatka modelu, materiały, silnik rysujący w przeglądarce i budżet na ładowanie. O powodzeniu najczęściej decyduje ostatnia.

Model to siatka trójkątów opisująca kształt, a materiały to obrazy nałożone na tę siatkę: kolor, mapa nierówności oraz szorstkość i metaliczność powierzchni. Lista kontrolna Shopify dla partnerów wymienia dokładnie taki komplet, z mapą emisji jako opcjonalną.

Do przeglądarki jedzie to praktycznie zawsze jako glTF, najczęściej binarny plik .glb. Dokumentacja three.js podaje powód: dane wierzchołków są zapisane binarnie i trafiają na kartę graficzną bez przetwarzania, a ten sam zapis tekstem bywa od trzech do pięciu razy większy. Format służy wyświetlaniu, nie edycji.

Rysowaniem zajmuje się WebGL, interfejs przeglądarki działający na elemencie canvas. MDN opisuje go jako odpowiednik standardu OpenGL ES 2.0, a WebGL 2 jako odpowiednik OpenGL ES 3.0, zgodny wstecz. Wtyczek nie trzeba, obsługują go wszystkie współczesne przeglądarki, ale sprzęt użytkownika też musi te funkcje wspierać. Biblioteka three.js ma na to gotowe sprawdzenie i komunikat zastępczy.

Telefon jest miarą, bo to jego limity zobaczysz pierwsze. MDN podaje jako bezpieczne minimum rozmiar tekstury 4096 pikseli i osiem jednostek tekstur w jednym programie cieniującym, a nie trzydzieści, które działają akurat na Twoim komputerze. Tekstury zmiennoprzecinkowe na większości urządzeń mobilnych nie zadziałają jako cel renderowania.

Wagę plików ustala się na starcie projektu. Shopify przyjmuje modele GLB i USDZ do 500 MB, ale wszystko powyżej 15 MB optymalizuje automatycznie, a jako cel podaje około 4 MB i tekstury nie większe niż 2048 na 2048 pikseli w wersji mobilnej.

Progi Core Web Vitals nie zmieniają się dlatego, że masz scenę 3D: LCP do 2,5 sekundy, INP do 200 milisekund i CLS do 0,1, mierzone na 75. percentylu wejść. Kanwa z modelem nie figuruje na liście kandydatów na LCP, więc o wyniku przesądzi obrazek zastępczy albo nagłówek. Stąd wzorzec, który polecam: zdjęcie jako pierwszy widok, scena po geście użytkownika.

Wartości w tej sekcji to stan na 19 września 2026 r. Progi i limity bywają aktualizowane, więc sprawdź je w dokumentacji web.dev i w pomocy swojej platformy.

Konfigurator czy zdjęcia wariantów: drogi są trzy

Między sesją zdjęciową a konfiguratorem na żywo leży trzecia opcja, o której mówi się rzadko, a która często wystarcza.

Tą opcją są rendery z modelu. Budujesz model raz, a potem generujesz z niego zwykłe obrazki dla wybranych kombinacji i wgrywasz je do sklepu tak, jakby były zdjęciami. Strona nie ładuje sceny, klient nie czeka, a Ty obsługujesz setkę wariantów bez fotografa. Wadą jest generowanie kombinacji z góry, więc przy tysiącach złożeń paczka obrazów przestaje być praktyczna.

Zdjęcia pozostają najlepszym wyborem tam, gdzie liczy się wiarygodność. Klient rozpoznaje render, a tam, gdzie ufa fakturze i kolorowi, fotografia wygrywa niezależnie od budżetu. Dochodzi rzecz czysto praktyczna: zdjęcie działa w wynikach wyszukiwania, w porównywarce i w reklamie, a scena 3D nie.

Konfigurator na żywo bierze się dopiero wtedy, gdy klient ma naprawdę składać, a nie wybierać z listy. Jeśli w Twoim procesie sprzedaży regularnie pada zdanie „proszę o wizualizację w takim zestawieniu", to sygnał, że trzecia droga już nie wystarcza. Gdy potrzebujesz wyłącznie opcji i dopłat, bez podglądu, wystarczy zwykłe rozszerzenie do opcji produktu.

Co jest potrzebne na start i co wydłuża przygotowanie

Najdłuższy etap rzadko dotyczy grafiki. Dotyczy ustalenia, co w Twoim produkcie jest osobnym wariantem, a co tylko innym opisem.

Czas przygotowania zależy od trzech rzeczy: liczby elementów, którymi steruje użytkownik, liczby materiałów oraz tego, czy model już istnieje. Jedna bryła w kilku kolorach to inna skala pracy niż mebel z dwudziestu części z osobnym wykończeniem każdej. Nie ufałbym wycenie, która podaje termin, zanim zobaczy tę listę.

Zła kolejność wygląda tak: najpierw model, potem narzędzie, a na końcu okazuje się, że cennik ma wyjątki, których narzędzie nie obsługuje. Odwróć ją i zacznij od listy opcji oraz reguł cenowych, bo to ona przesądza, czy wystarczy wtyczka z katalogu, czy potrzebny jest własny kod.

1. Lista opcji i regułSpis opcji, ich wartości oraz kombinacji zakazanych. To dokument handlowy, nie techniczny, i tylko Ty możesz go napisać. Bez niego model trzeba przerabiać, bo w połowie prac okaże się, że jeden z frontów nie występuje w najwęższej szerokości.
2. Dokumentacja produktuRysunki techniczne albo wymiary, zdjęcia z kilku stron i próbki materiałów. Pliki z produkcji bywają pomocne, ale model CAD opisuje geometrię dla maszyny, a nie dla karty graficznej, więc na potrzeby strony i tak powstaje osobna, lekka siatka.
3. Model, UV i materiałyModelowanie, rozłożenie powłok UV i przygotowanie tekstur. Lista kontrolna Shopify jest tu dobrym standardem także poza Shopify: rzeczywista skala, powłoki UV bez nakładania, oszczędna geometria i tekstury zapisane jako zoptymalizowane pliki JPG.
4. Optymalizacja i testy na urządzeniachZejście z wagą, sprawdzenie na starszym telefonie i wolnym łączu oraz przygotowanie widoku zastępczego. Ten etap przesądza, czy konfigurator zostanie na stronie, czy zniknie po pierwszym miesiącu.
5. Integracja i cennikPodpięcie pod koszyk, reguły cenowe i przekazanie konfiguracji do zamówienia. Dopiero tutaj widać, czy wycena, którą stosujesz w mailach, daje się w ogóle zapisać w regułach.

Integracja z koszykiem: WooCommerce, Shopify i wycena

Ładny podgląd jest najprostszą częścią pracy. Trudne jest to, żeby wybór klienta stał się pozycją zamówienia z właściwą ceną i kompletem danych do produkcji.

Jedna zasada obowiązuje niezależnie od platformy: cenę wylicza serwer. Przeglądarka może pokazywać kwotę na bieżąco, ale wartość pozycji musi policzyć ponownie sklep, na podstawie przesłanej konfiguracji. Konfigurator, który wysyła do koszyka gotową kwotę, prędzej czy później sprzeda drzwi za złotówkę.

Druga zasada dotyczy zapisu. Do zamówienia trafia nie obrazek, tylko dane: identyfikatory opcji, wymiary i wersja cennika, według której liczono. Bez niej nie odtworzysz po pół roku, skąd wzięła się kwota na fakturze.

W Shopify najkrótsza droga prowadzi przez aplikację z katalogu, bo obsługuje podgląd, opcje i przekazanie wyboru do koszyka w jednym pakiecie. W WooCommerce wybór jest szerszy i znacznie bardziej nierówny: STAGGS ma ponad 400 aktywnych instalacji, ale modele GLB i GLTF obsługuje dopiero w wersji PRO, a niektóre wtyczki konfiguratorów mają mniej niż dziesięć instalacji. Liczba instalacji nie mówi nic o jakości kodu, mówi natomiast, ilu ludzi znajdzie błąd przed Tobą.

We własnej aplikacji nie ma wtyczki, jest za to swoboda. Cennik staje się zestawem reguł po stronie serwera: cena bazowa, dopłaty za opcje, przelicznik za wymiar, mnożniki wykończeń i kombinacje zakazane. Ten sam zestaw obsługuje potem ofertę w PDF i zamówienie, więc handlowiec i sklep liczą tak samo.

Ceny w tabeli poniżej to stan na 19 września 2026 r. Karty aplikacji zmieniają się niezależnie od cenników platform, więc przed zakupem potwierdź plan, limit produktów i prowizję na karcie narzędzia.

Ceny i stawki sprawdzone 19 września 2026. Dostawcy zmieniają cenniki, więc przed decyzją sprawdź aktualną kwotę u źródła.

Od czego zależy koszt konfiguratora 3D

Koszt ma cztery składniki i tylko jeden z nich widać w cenniku narzędzia.

Pierwszy to model, czyli praca jednorazowa. Rośnie razem z liczbą osobnych elementów sterowanych przez użytkownika, liczbą materiałów i wymaganym stopniem realizmu. Produkt z czterema bryłami i ośmioma kolorami jest projektem niewielkim, ten sam produkt z indywidualnym wymiarem każdej części zupełnie innym.

Drugi to integracja: reguły cenowe, kombinacje zakazane i przekazanie konfiguracji do zamówienia oraz do produkcji. Tutaj nie płaci się za grafikę, tylko za dokładność. Każdy wyjątek w cenniku, który dziś obsługujesz w głowie, trzeba spisać, a bywa ich więcej, niż się pamięta.

Trzeci to koszt stały narzędzia, jedyna pozycja z publicznym cennikiem. Rozliczenia bywają mieszane, bo obok abonamentu pojawia się prowizja od sprzedaży spersonalizowanego produktu. Przy większym obrocie to prowizja, a nie abonament, jest większą pozycją, więc policz ją na własnej sprzedaży, zanim wybierzesz plan.

Czwarty składnik bywa pomijany, a wraca co sezon: aktualizacje oferty. Nowy kolor, nowe wykończenie, zmiana ceny materiału. Jeżeli dodanie wariantu wymaga wykonawcy, konfigurator w dwa sezony stanie się muzeum oferty sprzed dwóch sezonów. Pytanie, kto doda kolejny wariant i w jaki sposób, zadaj przed podpisaniem umowy, a nie po odbiorze.

U mnie każdy taki projekt zaczyna się od tej samej rozmowy: ile jest realnych kombinacji, które z nich sprzedają się naprawdę i co ma się stać po dodaniu produktu do koszyka. Modele i sceny przygotowuję w Blenderze, a interakcję na stronie w three.js i WebGL, razem z wersją mobilną i widokiem zastępczym dla urządzeń, które sceny nie udźwigną. Jeśli chcesz przeliczyć to na swoim produkcie, napisz, z czego się składa i jak dziś wyceniasz nietypowe zamówienie.

Pytania i odpowiedzi