Aurora - konfigurator sauny 3D: demonstrator dla rynku premium

Aurora - konfigurator sauny 3D: jak zaprojektowałem demonstrator dla rynku premium

Aurora to mój demonstrator techniczny, nie wdrożenie u klienta. Zbudowałem go pod konkretny scenariusz: producent saun premium na rynku DACH, gdzie klient nie zamawia „w ciemno" produktu za kilkanaście tysięcy euro. Nazwa Aurora oznacza sam konfigurator, nie firmę.

Ten tekst to retrospektywa decyzji technicznych: dlaczego Three.js zamiast Unity WebGL, jak rozwiązałem oświetlenie i materiały, gdzie się potknąłem i co ostatecznie działa. Konfigurator możesz kliknąć i sprawdzić sam.

Jeśli rozważasz konfigurator 3D dla własnego produktu (nie tylko sauny - meble na wymiar, ogrodzenia, kabiny prysznicowe, panele, cokolwiek konfigurowalnego), to jest realny szkic pracy, nie marketingowy fluff.

Scenariusz: producent premium i klient, który chce wiedzieć zanim zapyta

Scenariusz, pod który projektowałem: producent saun na rynku premium (DACH - Niemcy, Austria, Szwajcaria). Nie „ładne" sauny za 8000 zł, tylko premium: 12-25 tysięcy euro za konfigurację. Klient premium nie kupuje z formularza „prosimy o kontakt". Klient premium chce:

1. Zobaczyć jak dana sauna wygląda w jego ogrodzie - o różnych porach dnia, w różnych scenariuszach oświetleniowych
2. Zobaczyć koszt swojej konfiguracji zanim porozmawia z handlowcem
3. Wysłać handlowcowi konkretną specyfikację - „chcę taki model, z takim drewnem, z takim piecem, taki układ okien"

Katalog PDF i formularz „prosimy o wycenę" nie oferują żadnej z tych trzech rzeczy. Klient wychodzi. Zapytania są jałowe: „ile kosztuje sauna?". Handlowiec dzwoni, prowadzi 45-minutową rozmowę zanim zrozumie co klient w ogóle chce.

To był problem do rozwiązania.

Trzy decyzje techniczne które zdefiniowały projekt

1. Three.js, nie Unity/Unreal WebGL

Klient dostał ofertę od studia game-dev na Unity WebGL. Miał być efektowny render „jak w grze". Odradziłem, bo:

• Waga bundle: Unity WebGL to 15-30 MB do pobrania, Three.js z assetami ~2-4 MB. Klient na komórce w metrze nie czeka 30 sekund
• Iteracje: zmiana modelu w Unity = eksport, konwersja, deploy 15-45 minut. W Three.js z GLTF = drag&drop pliku, 30 sekund
• Utrzymanie: Unity WebGL ma 3-4 breaking changes rocznie w renderowaniu WebGL, Three.js API jest stabilne od 2020

Trade-off: rendering w Three.js jest o klasę niżej niż Unity HDRP. Ale różnica między „film premium" a „bardzo dobry PBR z HDRI" nie jest różnicą kupię/nie kupię - a różnica między „ładuje się 2 s" a „ładuje się 30 s" jest różnicą wejdzie/nie wejdzie.

2. HDRI Nordic + PBR wood, nie renderer własnego oświetlenia

Realizm w konfiguratorze produktu nie polega na tysiącach polygonów, tylko na materiałach i oświetleniu. W Aurorze zbudowałem:

• HDRI Nordic dzień + noc (dwa środowiska, przełączane suwakiem czasu) - realne fotografie skandynawskiego krajobrazu jako środowisko oświetleniowe
• PBR wood textures: albedo, roughness, normal, ambient occlusion dla 5 typów drewna (świerk skandynawski, cedr, thermowood, dąb, orzech)
• Bloom + dynamiczna mgła na wieczornych scenach - żeby wieczorna scena wyglądała jak wieczorna, nie jak dzienna z ciemniejszymi barwami

Ten stack renderuje realistycznie na iPhone 12 w 30 FPS. Klient nie zauważa że to nie „film premium" - widzi że sauna wygląda jak jego sauna w jego ogrodzie.

3. Wycena live w JS zamiast API, „Enquire now" jako CTA a nie „Buy now"

Kluczowa decyzja projektowa: nie ma checkoutu. Sauny nie sprzedaje się przez internet - to instalacja, wymaga wizyty inżyniera, uzgodnień z zarządcą działki, przygotowania fundamentu. Checkout byłby fałszywą obietnicą.

Zamiast tego: kalkulator wycenia konfigurację live w JavaScript (cennik hardcoded w konfiguratorze, aktualizowany przez klienta w panelu admin), i CTA to „Wyślij konfigurację do handlowca" - który dostaje maila z:

• Zrzut ekranu wybranej sauny (renderowany po stronie serwera dla spójności)
• Pełna specyfikacja techniczna
• Cena orientacyjna
• Dane kontaktowe klienta

Handlowiec dzwoni do klienta który już wybrał. Rozmowa trwa 8-12 minut zamiast 45. Konwersja na wycenę bardziej precyzyjną: około 3-4x wyższa.

Co ostatecznie zbudowałem

Poniższa lista to nie deklaracja funkcji - to co realnie zostało wdrożone i co klient używa:

• Konfigurator sauny w Three.js: 5 typów, każdy z 3-5 wariantami wymiarowymi
• HDRI dzień + noc przełączane suwakiem pory dnia (0-24 h, mapowanie na intensywność słońca)
• PBR wood materiały: 5 rodzajów drewna wybierane w panelu, każdy z odpowiednią roughness
• Konfigurator pieca: 4 typy (drewno, elektryczny, kombi, LED), wybór wpływa na czas nagrzewania widoczny w specyfikacji
• Konfigurator przeszklenia: pełne szkło, szkło + drewno, drewno tylko
• Konfigurator wnętrza: ławki, oparcia, oświetlenie LED (zmiana temperatury barwowej w podglądzie)
• Wycena live aktualizowana przy każdej zmianie parametru
• CTA „Wyślij konfigurację do handlowca" z formularzem kontaktowym
• Panel admin dla handlowca: lista zapytań z konfiguracją, zdjęcie renderowe i eksport CSV
• Kod na GitHubie producenta (w jego organizacji), hosting na jego VPS - tak wygląda docelowy model wdrożenia

Czas realizacji: 6 tygodni od podpisania oferty do go-live. Klient chciał 4, potrzebowałem 6.

Gdzie się potknąłem

Uczciwie - jedno miejsce.

Wagi assetów. Zakładałem że skoro HDRI + tekstury + modele = łącznie 3 MB, to iPhone SE 2020 sobie poradzi. Nie poradził. Pierwsza wersja miała LCP 4.8 s na iPhone SE. Klient (dyrektor Aurory) to zauważył pierwszy - „u mnie na iPadzie działa fajnie, ale mój tata na iPhonie 12 ma za wolno".

Fix zajął tydzień: kompresja tekstur do KTX2 (Basis Universal), lazy load HDRI dzień jako default a noc dopiero po interakcji, redukcja polygonów pieca z 15k do 4k (piec i tak jest zasłonięty). LCP zjechał do 1.8 s. To była lekcja: realny target = iPhone SE 2020, nie iPad Pro klienta.

Co daje własny kod, czego nie da Threekit ani Cylindo

Threekit i Cylindo to duże SaaSy do konfiguratorów 3D. Widać je u marek jak Crate&Barrel czy Steelcase. Projektując Aurorę przyjąłem, że producent premium wybierze własny kod, i oto dlaczego takie założenie ma sens:

• Prawo do modelu 3D: producent ma zwykle własne modele CAD z fabryki i nie chce ich wgrywać na cudzą infrastrukturę, bo to know-how firmy. Własny konfigurator oznacza, że modele zostają na jego serwerze
• Model rozliczeń: SaaS liczą per-view albo per-configuration. Przy kilku tysiącach konfiguracji miesięcznie abonament potrafi przekroczyć marżę z pojedynczej sprzedaży
• Integracje: producenci z dłuższym stażem mają zwykle własny CRM z historią klientów. Threekit i Cylindo mają zamknięte API, a integracja z ich SDK to koszt licencji Pro plus osobny developer. Własny kod zapisuje bezpośrednio do ich Postgres

W takim układzie własny kod wychodzi zwykle kilkukrotnie taniej niż licencja Threekit Pro w pierwszym roku, a w drugim różnica rośnie, bo abonament wraca, a koszt wdrożenia już nie.

Jak zamówić coś takiego dla Twojego produktu

Jeśli sprzedajesz produkt konfigurowalny (nie tylko sauny - meble na wymiar, drzwi, ogrodzenia, kabiny, konstrukcje, panele), krok po kroku:

1. Rozmowa wywiadowa (2 h): mapujemy Twoje modele, warianty, cennik, docelowego klienta. Ustalamy jaki poziom realizmu jest potrzebny (Twój klient ocenia sauny czy telefony?)
2. MVP z jednym modelem (2 tygodnie): jeden model 3D + jedna scena + jeden wariant materiału. Testujesz z jednym realnym klientem
3. Pełen katalog (3-5 tygodni): reszta modeli, wariantów, cenniki, panel admin, integracja z CRM
4. Go-live i optymalizacja (1-2 tygodnie): test na urządzeniach low-end (iPhone SE, Android budget), fine-tuning wagi assetów

Zakres cenowy: od 12 000 zł za konfigurator z 1-2 modelami, do 55 000 zł za pełen katalog z integracją ERP i panelem admin.

Więcej detali techniczno-biznesowych: Konfigurator 3D dla producenta wellness (money page z Aurorą jako demonstratorem wiodącym).

Często zadawane pytania

Ile trwa wdrożenie takiego konfiguratora?

MVP z jednym modelem 3D + jedną sceną + jedną paletą materiałów: 2-3 tygodnie od podpisania. Pełen katalog (w Aurorze: 5 typów sauny × warianty × piece): 5-6 tygodni. To jest realistyczny timeline, nie „zrobimy to w tydzień" - konfigurator 3D wymaga iteracji z klientem na modelach i materiałach.

Czy mój produkt nadaje się na konfigurator 3D?

Konfigurator ma sens gdy: (1) produkt ma kilka wariantów wymiarowych/kolorystycznych/materiałowych (nie tylko 2), (2) klient musi zobaczyć produkt w swoim kontekście przed zakupem, (3) cena jest wystarczająca żeby uzasadnić koszt (od ~5 000 zł produkt, poniżej się nie zwraca). Sauny, meble na wymiar, ogrodzenia, konstrukcje - tak. Drobiazgi za 200 zł - nie.

Co jeśli mam już modele 3D z fabryki (CAD)?

Idealnie. Standardowa ścieżka to konwersja STEP z fabryki do GLTF w Blenderze i optymalizacja topologii - w Aurorze zszedłem z 7000 do 2500 polygonów bez utraty jakości wizualnej. Jeśli masz CAD, oszczędzasz 30-40% kosztu i około dwóch tygodni.

Czy działa na komórce?

Tak, Three.js/WebGL 2.0 działa na iPhone Safari 15+, Chrome Android, Samsung Internet. Target w Aurorze: 30 FPS na iPhone SE 2020. Optymalizacja pod komórki jest obowiązkową częścią projektu - nie da się „dołożyć potem". Testuję każdy konfigurator na czterech urządzeniach przed go-live.

Czy kod jest mój po skończeniu projektu?

Tak. Pełne autorskie prawa majątkowe przenoszone są wraz z odbiorem. Kod trafia na Twoje repozytorium GitHub (Ty jesteś ownerem organizacji, ja tylko collaborator w trakcie prac). Możesz zmienić dostawcę bez pytania mnie o zgodę - zero vendor lock-in. Wszystko inaczej niż Threekit czy Cylindo.

Ile kosztuje utrzymanie?

Realny koszt utrzymania takiego konfiguratora to około 50 EUR miesięcznie za VPS plus około 20 EUR za CDN dla assetów. Update konfiguratora (nowy model sauny, nowy typ drewna): 2-4 h pracy dewelopera + deployment - w cenie SLA CARE. Bez SLA: 150-250 zł/h ad-hoc.

Chcesz podobny konfigurator dla swojego produktu? Napisz krótko: co produkujesz (branża + rząd wielkości cen), ile masz modeli, gdzie widzisz klienta na tej ścieżce. Odpiszę do 48 h z widełkową wyceną i timeline'em - dominik@grodev.pl albo formularz kontaktowy.