Konfigurator 3D na telefonie. Jak sprawić, żeby działał płynnie na mobile?
Klient ogląda Twój produkt na telefonie
Producenci zwykle testują nowy konfigurator na dużym monitorze w biurze. Klient robi coś zupełnie innego: klika w reklamę na Facebooku albo wynik z Google, otwiera stronę na telefonie sprzed trzech lat, na zasięgu LTE, w drodze do pracy.
Jeżeli model ładuje się osiem sekund, telefon się grzeje, a obracanie sofy klatkuje — klient nie napisze, że konfigurator jest wolny. Po prostu zamknie kartę. I nigdy się o tym nie dowiesz.
Dlatego wydajność na urządzeniach mobilnych nie jest szczegółem technicznym „do dopracowania później”. To warunek, żeby konfigurator 3D w ogóle zaczął sprzedawać. W tym wpisie pokazujemy, co realnie decyduje o płynności na telefonie i co można z tym zrobić.
Co spowalnia konfigurator na telefonie?
Problem prawie nigdy nie leży w jednym miejscu. Zwykle składa się na niego kilka rzeczy naraz:
- za ciężki plik GLB — model wyeksportowany prosto z katalogu renderowego, z setkami tysięcy trójkątów
- przewymiarowane tekstury — tkanina w rozdzielczości 4096×4096, której na telefonie i tak nikt nie zobaczy w tej jakości
- za dużo materiałów i osobnych elementów — każdy z nich to dodatkowa praca dla karty graficznej przy każdej klatce
- ładowanie wszystkiego na start — wszystkie tkaniny, wszystkie warianty, zanim klient kliknie cokolwiek
- ciężkie cienie i odbicia w czasie rzeczywistym — efektowne na komputerze, kosztowne na telefonie
Telefon ma słabszy procesor graficzny, mniej pamięci i agresywnie ogranicza wydajność, gdy się nagrzeje. Model, który na laptopie chodzi w 60 klatkach, na średniej klasy smartfonie potrafi spaść do 15 — i to właśnie ten moment, w którym klient traci cierpliwość.
Waga modelu: ile to jest „za dużo”?
Nie ma jednej magicznej liczby, ale w praktyce sprawdza się prosta zasada: cały konfigurator powinien być gotowy do interakcji w kilka sekund na zwykłym połączeniu mobilnym.
Przekłada się to mniej więcej na takie orientacyjne widełki dla pojedynczego produktu:
- geometria modelu — dziesiątki, nie setki tysięcy trójkątów
- plik GLB po kompresji — pojedyncze megabajty, a nie kilkanaście
- tekstury tkanin — najczęściej 1024×1024 w zupełności wystarczy, czasem 2048 przy dużych, wyraźnych wzorach
- liczba materiałów — tyle, ile klient faktycznie zmienia, bez rozdrobnienia na dziesiątki drobiazgów
Model do katalogu i model do konfiguratora to dwie różne rzeczy. Pierwszy ma wyglądać idealnie na jednym renderze, drugi ma działać płynnie na tysiącu różnych urządzeń. Więcej o samym przygotowaniu pliku piszemy we wpisie o modelu GLB sofy pod konfigurator.
Kompresja, która robi największą różnicę
Dwie techniki dają zwykle największy zysk przy najmniejszym kompromisie wizualnym:
Kompresja geometrii
Geometrię modelu można skompresować bez utraty widocznej jakości — plik potrafi schudnąć kilkukrotnie. Klient dostaje ten sam kształt sofy, tylko szybciej. Warto to robić na etapie eksportu, jako stały element przygotowania modelu, a nie ratunkową poprawkę na końcu projektu.
Kompresja tekstur
Zwykły JPG czy PNG trzeba po pobraniu rozpakować do pamięci karty graficznej — i to właśnie tekstury najczęściej zapychają pamięć telefonu. Formaty tekstur przystosowane do GPU zajmują znacznie mniej pamięci i szybciej się ładują. Przy konfiguratorze z kilkudziesięcioma tkaninami różnica bywa dramatyczna.
Do tego dochodzi rzecz najprostsza: nie wysyłaj klientowi tekstur, których nie ogląda. Miniaturki próbek w menu wyboru to małe obrazki, a pełna tekstura powinna doładować się dopiero po kliknięciu w daną tkaninę.
Ładuj etapami, nie wszystko naraz
Największą poprawę odczuwalnej szybkości daje zwykle nie sama optymalizacja pliku, tylko kolejność ładowania.
Sensowny scenariusz na telefonie wygląda tak:
- Najpierw ładuje się treść strony: nagłówek, opis, zdjęcie produktu, formularz. Klient od razu widzi, gdzie trafił.
- Konfigurator 3D doładowuje się osobno, dopiero gdy sekcja z modelem pojawi się w polu widzenia.
- Model startuje w wariancie domyślnym — jednym, najpopularniejszym zestawie tkaniny i układu.
- Pozostałe tkaniny i warianty dociągają się w tle albo na żądanie, gdy klient w nie kliknie.
Efekt: strona jest użyteczna po sekundzie, a nie po ośmiu. Przy okazji Google widzi treść od razu, bo opis i nagłówki nie czekają na model 3D — to ta sama zasada, którą opisujemy w tekście o konfiguratorze 3D w Next.js.
Dobrą praktyką jest też pokazanie czegokolwiek w miejscu modelu podczas ładowania: statycznego zdjęcia produktu albo prostego wskaźnika postępu. Pusty prostokąt wygląda jak zepsuta strona.
Interfejs też musi być mobilny
Płynność to nie tylko klatki na sekundę. Na telefonie zmienia się cała ergonomia:
- przyciski i próbki tkanin muszą być na tyle duże, żeby trafiać w nie kciukiem, a nie kursorem
- model potrzebuje własnej przestrzeni — gest obracania nie powinien walczyć z przewijaniem strony
- panel wyboru lepiej sprawdza się jako wysuwana szuflada na dole ekranu niż jako boczna kolumna wciśnięta w 360 pikseli szerokości
- przycisk zapytania powinien być widoczny bez szukania, najlepiej przypięty na dole
To często ważniejsze niż ostatnie 10% optymalizacji technicznej. Konfigurator, którego nie da się wygodnie obsłużyć kciukiem, nie wygeneruje zapytania, nawet jeśli działa w idealnie płynnych 60 klatkach.
Jak to sprawdzić przed wdrożeniem
Testowanie na własnym, nowym telefonie to za mało — to zwykle najszybszy sprzęt w całej grupie klientów. Warto sprawdzić:
- średniej klasy telefon z Androidem sprzed 2–3 lat, nie tylko najnowszy model
- działanie na danych mobilnych, nie na biurowym Wi-Fi
- zachowanie po 2–3 minutach obracania modelu, gdy telefon zdąży się nagrzać
- czas od wejścia na stronę do momentu, w którym da się kliknąć pierwszą tkaninę
- czy strona działa, gdy model z jakiegoś powodu się nie załaduje
Ostatni punkt bywa pomijany, a jest istotny: nawet jeśli 3D zawiedzie, klient powinien nadal widzieć opis produktu, zdjęcia i formularz kontaktowy. Konfigurator ma wspierać sprzedaż, a nie być jedynym wejściem do niej.
Podsumowanie
Konfigurator 3D ocenia się dziś na telefonie, a nie na stacji roboczej. O płynności decydują cztery rzeczy: rozsądna waga modelu, skompresowane tekstury, etapowe ładowanie i interfejs zaprojektowany pod kciuk. Każda z nich osobno daje zauważalną poprawę, a razem robią różnicę między narzędziem, które sprzedaje, a efektowną animacją, którą klient zamyka przed jej załadowaniem.
Jeżeli planujesz konfigurator dla sof, domków czy pokrowców — albo masz już taki, który działa zbyt wolno na telefonach — chętnie sprawdzimy, gdzie leży wąskie gardło. Napisz do nas, a podpowiemy, co da się poprawić bez przebudowy całego modelu.