Wizualizacje 3D, motion i design

Co dokładnie mogę zrobić w 3D

Wizualizacja 3D to obraz policzony z modelu produktu, a nie zdjęcie. Model powstaje raz i obsługuje potem rendery katalogowe, animacje, konfigurator na stronie oraz podgląd w rozszerzonej rzeczywistości.

Zwykle zaczyna się od pytania, czym zastąpić sesję, której nie da się zrobić, bo produkt jeszcze nie istnieje, stoi w hali u kooperanta albo ma czternaście wybarwień. Model odpowiada na to inaczej niż fotografia: kolejny wariant to zmiana materiału i ponowne policzenie sceny, a nie kolejny dzień zdjęciowy.

Najwięcej daje tam, gdzie produkt ma wiele wariantów albo trudno go sfotografować: meble, oświetlenie, opakowania, komponenty przemysłowe, produkty w sklepie internetowym. Każda z tych branż potrzebuje czego innego: mebel sprzedaje tkanina i proporcja w pokoju, oprawa rozsył światła, opakowanie czytelność nadruku, a komponent przemysłowy przekrój i sposób montażu.

• Rendery produktowe i packshotyPojedyncze ujęcia na jednolitym tle do karty produktu oraz sceny aranżacyjne do kampanii. Z jednego modelu wyciągam kadry w kilku proporcjach, także pionowe.
• Warianty kolorystyczne i materiałoweJeden model i podmieniane materiały: wybarwienia, tkaniny, forniry, wykończenia metalu. Dwadzieścia wariantów to dwadzieścia renderów z tej samej sceny, a nie dwadzieścia ustawień planu.
• Animacje produktuKrótkie ujęcia pokazujące rozłożenie, montaż, przekrój albo zasadę działania. Sprawdzają się tam, gdzie zdjęcie nie tłumaczy, co dzieje się w środku.
• Obrót 360 stopniSekwencja gotowych klatek dookoła produktu, którą odbiorca przewija palcem. Telefon tylko wyświetla obrazy i nie liczy sceny, więc nie potrzebuje mocnej karty graficznej, a materiały wyglądają tak samo jak w renderze.
• Aranżacje i wnętrzaProdukt postawiony w kontekście: showroom, kuchnia, biuro, hala. Przydatne wtedy, gdy o zakupie decyduje skala i sąsiedztwo innych przedmiotów.
• Podgląd AR na telefonieModel ustawiony w pomieszczeniu klienta przez aparat telefonu, bez instalowania aplikacji. Wymaga dwóch plików: USDZ dla iPhone’a i GLB dla Androida.

Przykłady, które sprawdzisz na tej stronie

Na tej stronie możesz od razu uruchomić trzy rodzaje przykładów: rendery z obrotem 360°, sceny liczone na żywo i konfigurator. Wszystkie zrobiłem sam; to pokazy, nie realizacje dla klientów, a marki produktów są wymyślone.

W galerii renderów są trzy produkty: słuchawki z aluminium i skóry ekologicznej, szklany flakon perfum z bursztynowym płynem i głośnik w dzianinie. Modele, materiały i światło powstały w Blenderze w całości ze skryptu, bez gotowych modeli, tekstur i zdjęć. Każdy obrócisz o 360°: to 192 klatki policzone przez Cycles w tym samym świetle co główny render, od 1,7 do 5,4 MB na produkt, pobierane dopiero po pierwszym dotknięciu.

Niżej są dwie sceny liczone na żywo w Twojej przeglądarce: relief z heksagonów reagujący na kursor i monolit z pola znaków, który obracasz palcem. Bez WebGL 2 albo przy ograniczeniu ruchu zobaczysz w ich miejscu kadr ze sceny.

Konfigurator sprawdzisz w demo Cukierni: składasz tort z wariantów, obracasz go palcem, oglądasz przekrój, robisz zdjęcie jak do sklepu i przenosisz złożony wariant do formularza zapytania, także na telefonie. Tak samo działałby konfigurator Twojego produktu, z Twoimi wariantami i nazwami.

Render czy sesja zdjęciowa: kiedy co się opłaca

Nie zawsze 3D. Przy jednym produkcie, który leży u Ciebie w magazynie i dobrze wygląda pod światłem, sesja zdjęciowa bywa tańsza i szybsza niż budowanie modelu od zera.

Punktem przełamania jest liczba wariantów. W wycenie 3D największą pozycją jest model i scena: trzeba je zbudować, oteksturować i oświetlić. Przy drugim i przy dziesiątym wariancie pracuje już gotowa scena i zmienia się tylko materiał, a w fotografii każdy wariant to kolejne ustawienie planu, światła i retusz. Jak policzyć oba scenariusze na liście obrazów potrzebnych w ciągu roku, rozpisuję w przewodniku render 3D czy sesja zdjęciowa.

Druga różnica dotyczy zmian po fakcie. Kiedy po obejrzeniu renderu pada prośba o inne tło, inny kadr albo inną nogę stołu, wracam do pliku i liczę scenę ponownie. Przy zdjęciach oznacza to powrót do studia z produktem.

Są jednak rzeczy, przy których wybieram aparat. Wiarygodny render skóry, jedzenia, kwiatów albo tkaniny w ruchu wymaga symulacji i wielu rund poprawek, a zdjęcie oddaje je od razu. Render musi też pokazywać produkt takim, jaki jest: w sprzedaży konsumentom wygładzony spaw albo kolor ładniejszy niż w magazynie może zostać uznany za praktykę wprowadzającą w błąd w rozumieniu art. 5 ustawy o przeciwdziałaniu nieuczciwym praktykom rynkowym.

Wizualizacja 3D, sesja zdjęciowa i grafika 2D w typowym projekcie produktowym

Tabela jest szersza niż ekran: przesuń ją palcem w bok.

Konfigurator 3D na stronie i podgląd AR

Konfigurator 3D to scena liczona na żywo w przeglądarce klienta. Model wczytuje się raz, a zmiana koloru albo modułu jest podmianą materiału lub elementu, nie pobraniem kolejnego obrazka.

Buduję to na Three.js i WebGL, a model dostarczam w glTF 2.0, zwykle jako pojedynczy plik GLB. glTF jest wolną od opłat licencyjnych specyfikacją Khronos Group, a od 2022 roku ma status normy ISO/IEC 12113:2022, więc ten sam plik otworzy przeglądarka, silnik gry i narzędzie do AR. Geometrię kompresuję ratyfikowanym rozszerzeniem KHR_draco_mesh_compression, a tekstury zapisuję w KTX 2.0 z kompresją Basis Universal, przez rozszerzenie KHR_texture_basisu.

Strona techniczna jest zwykle prostsza niż uporządkowanie oferty. Konfigurator wymaga zamkniętej listy wariantów, jednoznacznych nazw, informacji o kombinacjach niedozwolonych oraz decyzji, skąd biorą się ceny. Gdy warianty żyją w Shopify, WooCommerce albo w arkuszu, podpinam je po identyfikatorze wariantu, żeby scena i koszyk nie rozjechały się po zmianie cennika.

Podgląd w rozszerzonej rzeczywistości ma osobną ścieżkę w każdym systemie. Na iPhonie uruchamia się AR Quick Look, który potrzebuje pliku USDZ i iOS 12 lub nowszego. Na Androidzie Scene Viewer przyjmuje glTF oraz GLB i wymaga urządzenia z obsługą ARCore oraz Androida 7.0 lub nowszego. WebXR, czyli rozszerzona rzeczywistość liczona w samej przeglądarce, według caniuse nie działa w Safari na iOS, więc traktuję go jako dodatek dla Chrome na Androidzie, a nie główną ścieżkę.

• Kiedy konfigurator się nie zwracaPrzy dwóch kolorach wystarczą dwa rendery i przełącznik obrazków. Scena 3D zaczyna mieć sens od kilkunastu kombinacji albo tam, gdzie klient musi obejrzeć produkt z drugiej strony.
• Treść obok sceny, nie w scenieWyszukiwarka nie zobaczy tego, co dzieje się wewnątrz kanwy WebGL. Nazwy wariantów, opisy i zdjęcia zostawiam w zwykłym kodzie HTML obok sceny, żeby strona pozostała czytelna i indeksowalna.
• Zapis konfiguracjiWybór klienta warto zapisać w adresie strony i w treści zapytania. Bez tego handlowiec dostaje wiadomość „proszę o ten z pierwszego ekranu”.

Co jest potrzebne na start

Im więcej twardych danych dostanę pierwszego dnia, tym mniej zgadywania i rund poprawek.

Brak części materiałów nie blokuje startu, ale wtedy część decyzji podejmuję na własne założenie i trzeba je potwierdzić na podglądzie.

• Rysunki techniczne lub pliki CADNajlepiej STEP, IGES, DWG albo DXF. Z modelu konstrukcyjnego buduję wersję pod render szybciej i dokładniej niż ze zdjęć, bo nie odtwarzam proporcji na oko. Jak wygląda praca z plikiem STEP albo SolidWorks, opisuję w przewodniku wizualizacja 3D z pliku CAD.
• Wymiary i grubościGdy nie ma pliku CAD, wystarczy szkic z wymiarami gabarytowymi. Najważniejsze są promienie zaokrągleń i fazy, bo to na nich załamuje się światło i po nich najszybciej widać sztuczny render.
• Materiały i wybarwieniaKody RAL, Pantone lub NCS, nazwy dekorów płyt, symbole tkanin z katalogu producenta. Zdjęcie próbnika w świetle dziennym mówi więcej niż opis „ciepły dąb”.
• Zdjęcia referencyjne egzemplarzaKilka ujęć z różnych stron, w tym detale łączeń, logotypów i faktury. Służą do weryfikacji modelu, nie do przerysowania.
• Grafiki w wektorachLogotypy, nadruki i etykiety w SVG, AI lub PDF. Nadruk podniesiony z rastra rozmywa się przy zbliżeniu i widać to na pierwszym renderze detalu.
• Lista wariantów i wykluczeńSpis tego, co naprawdę sprzedajesz, z identyfikatorami i kombinacjami niemożliwymi do wykonania. Zwykle powstaje dopiero na potrzeby konfiguratora, dlatego warto zacząć go pierwszego dnia.

Jak wygląda proces i kiedy akceptujesz podgląd

Pracę dzielę tak, żeby najtańsze poprawki wypadały na początku. Proporcje poprawiam w szarej makiecie, zanim powstaną materiały i światło, bo po finalnym renderze ta sama zmiana oznacza poprawianie sceny i liczenie wszystkich ujęć od nowa.

Rytm pracy wyznacza liczba wariantów i tempo decyzji po podglądzie. W praktyce to kilka rund rozłożonych na kilka tygodni, przy czym najdłużej czeka się nie na render, tylko na próbki materiałów i na domknięcie listy wariantów. Termin zapisujemy przy zamkniętym zakresie, bo wcześniej byłby zgadywaniem.

Żeby zacząć, wystarczy opis produktu, kilka zdjęć albo plik CAD i informacja, gdzie obrazy trafią: karta produktu, katalog, kampania czy konfigurator. W odpowiedzi dostajesz rząd wielkości ceny i listę brakujących materiałów, a zakres, cenę i termin na piśmie, zanim cokolwiek zaczniemy.

1. Ustalenie zakresuUstalamy, co ma zobaczyć odbiorca, ile jest wariantów, gdzie materiał trafi i na jakich urządzeniach. Z tego wynika liczba ujęć, poziom szczegółowości i formaty plików.
2. Zebranie materiałówPrzeglądam pliki CAD, wymiary, próbki i zdjęcia, a potem wypisuję braki. Wtedy wychodzą rozbieżności między rysunkiem a egzemplarzem, a lepiej teraz niż po renderze.
3. Blokowanie bryłyBuduję model bez materiałów, w neutralnym świetle, i pokazuję go z uzgodnionych kadrów. Sprawdzasz proporcje, wymiary i kompletność, zanim zacznę dokładać detal.
4. Materiały, światło i kadryDokładam wybarwienia, faktury i scenę. Dostajesz podgląd w obniżonej jakości, bo służy do decyzji o kolorze i kompozycji, a nie do publikacji.
5. Akceptacja podgląduTo punkt kontrolny: po nim kadr, materiały i światło uznajemy za zamknięte. Uwagi zbierasz w jednej turze, najlepiej z zaznaczeniem na obrazie.
6. Render finalny lub scena do wdrożeniaLiczę pełną jakość albo składam scenę Three.js i osadzam ją na stronie. Na tym etapie sprawdzam wagę plików, czas wczytywania oraz sterowanie dotykiem.
7. PrzekazanieDostajesz pliki wynikowe, źródła w uzgodnionym zakresie i opis, jak podmienić materiał albo dodać kolejny wariant.

Wydajność na telefonie i dostępność

O tym, czy scena działa na stronie, decyduje najsłabszy telefon, na którym ktoś ją otworzy, a nie komputer, na którym powstała. Dlatego limity trójkątów, tekstur i megabajtów ustalam przed modelowaniem.

Punktem odniesienia są wytyczne Google dla Scene Viewera: zalecany limit to 100 000 trójkątów, a za idealny uznają przedział od 30 000 do 50 000. Do tego najwyżej dziesięć materiałów, tekstury nie większe niż 2048 na 2048 pikseli i plik do 10 MB; większy walidator oznacza ostrzeżeniem, a powyżej 15 MB błędem. Trzymam się ich także w scenach bez AR, bo to konkretny, publiczny budżet dla modeli oglądanych na telefonie.

Druga część budżetu dotyczy samej strony. Według Core Web Vitals opisanych przez Google na web.dev dobry wynik to Largest Contentful Paint do 2,5 sekundy i Interaction to Next Paint do 200 milisekund, mierzone na 75. percentylu wizyt. Scena 3D potrafi popsuć oba wskaźniki, dlatego nie ładuję jej razem z resztą strony: najpierw idzie lekki obraz zastępczy, a model wczytuje się po wejściu sekcji w pole widzenia.

Nie każda przeglądarka uruchomi WebGL 2.0, a sama obsługa nie mówi jeszcze, czy słabszy telefon policzy scenę płynnie. Dlatego do sceny przygotowuję wersję zapasową: obrót 360 stopni z gotowych klatek, krótkie wideo albo zwykły render. Strona ma działać także wtedy, gdy 3D nie wystartuje.

• Sterowanie z klawiaturyObrót, przybliżenie i wybór wariantu muszą dać się obsłużyć tabulatorem i strzałkami. Kanwa WebGL tego nie zapewnia, trzeba dołożyć obsługę zdarzeń i widoczny fokus.
• Ograniczony ruchAutomatyczny obrót i przejścia wyłączam, gdy system zgłasza ustawienie prefers-reduced-motion, obsługiwane przez główne przeglądarki od 2020 roku. Wytyczne WCAG przypominają, że u osób z zaburzeniami błędnika animacja może wywołać zawroty głowy i nudności.
• Najpierw zdjęcie, potem modelOdbiorca od razu widzi zdjęcie produktu, a model wczytuje się w tle z paskiem postępu. Jeśli pobieranie się nie uda, zdjęcie zostaje na stronie.

Własność modeli i plików wynikowych

Po rozliczeniu projektu przenoszę na Twoją firmę autorskie prawa majątkowe do modeli, renderów i kodu, razem ze zgodą na ich zmienianie, także u innego wykonawcy. Zapisujemy to w umowie przed startem, bo prawo autorskie stawia tu trzy konkretne warunki.

Umowa o przeniesienie autorskich praw majątkowych wymaga formy pisemnej pod rygorem nieważności (art. 53 ustawy o prawie autorskim) i obejmuje tylko pola eksploatacji wyraźnie w niej wymienione (art. 41 ust. 2), więc wypisujemy je wprost: strona internetowa, sklep i marketplace’y, druk, reklama. Zgodę na opracowania, czyli prawo zależne, też trzeba zapisać osobno: bez niej twórca zachowuje wyłączne prawo zezwalania na przeróbki nawet po przeniesieniu całości praw (art. 46). Ustalamy też, czy mogę pokazać projekt w portfolio i czy dostajesz pliki źródłowe, czy tylko wynikowe.

Standardowo przekazuję rendery w pełnej rozdzielczości, źródła sceny, model w glTF 2.0 lub GLB, wersję USDZ, jeśli projekt obejmuje AR, oraz kod sceny, jeśli powstał konfigurator. Dokładam krótki opis struktury pliku, bo model bez nazwanych warstw i materiałów jest dla kolejnej osoby prawie bezużyteczny.

Narzędzia nie ograniczają tego, co zrobisz z wynikiem. Blender jest na licencji GNU GPL, a jego twórcy piszą wprost, że to, co w nim stworzysz, jest wyłącznie Twoje; Three.js ma licencję MIT, więc kod sceny rozwijasz bez opłat licencyjnych. Wyjątkiem są elementy kupione lub pobrane, takie jak modele otoczenia, mapy HDRI, tekstury, fonty i muzyka do animacji: każdy ma własną licencję, czasem zabraniającą odsprzedaży. Ich listę przekazuję razem z plikami.