Animacja 3D produktu: rodzaje, formaty do sklepu, reklam i social media, osadzenie na stronie i proces
Animacja 3D produktu, nazywana też filmem 3D produktu, to krótki film policzony klatka po klatce z cyfrowego modelu, który pokazuje produkt w ruchu: obrót o 360 stopni, rozłożenie na części, działanie mechanizmu, rozpakowanie albo zapętlone ujęcie do nagłówka strony. Opłaca się tam, gdzie ruch tłumaczy coś, czego nie pokaże zdjęcie, a ten sam model ma pracować w sklepie, w reklamach i w social mediach. Każdy kanał wymaga osobnego kadru i pliku: Reels i TikTok pionu 9:16, reklama w kanale Facebooka formatu 4:5, YouTube poziomu 16:9, a strona internetowa lekkiej pętli bez dźwięku z plakatem.
- Meta w specyfikacji reklam wideo na Instagram Reels zaleca proporcje 9:16 i rozdzielczość 1440 × 2560 px, a dla reklam w kanale Facebooka proporcje 4:5 i rozdzielczość 1440 × 1800 px.
- Według MDN przeglądarki nie blokują automatycznego odtwarzania filmu, który nie ma ścieżki dźwiękowej albo ma ją wyciszoną, a Safari wymaga do takiego odtwarzania atrybutu playsinline.
- Kryterium 2.2.2 WCAG 2.2 wymaga możliwości zatrzymania lub ukrycia ruchomej treści, która startuje sama, trwa dłużej niż pięć sekund i jest pokazywana obok innych treści.
- Dokumentacja Blendera odradza renderowanie animacji od razu do pliku wideo, bo przerwany render zapisywany jako seria obrazów można wznowić od klatki, na której wystąpił problem.
Czym jest animacja 3D produktu i kiedy ma sens?
To film zbudowany z modelu 3D, w którym ruch kamery, światła i samego produktu jest zaprojektowany, a każdą klatkę liczy program. Ma sens wtedy, gdy ruch odpowiada na pytanie kupującego lepiej niż zdjęcie.
Takie pytanie dotyczy zwykle czegoś, co dzieje się w czasie albo w przestrzeni: jak produkt wygląda z każdej strony, jak się rozkłada, co jest w środku, jak działa zawias, pompa albo zatrzask. Film powstaje z tego samego modelu co nieruchome rendery, więc jeśli masz już wizualizacje 3D produktu, animacja jest kolejnym ujęciem z gotowej sceny, a nie nowym projektem od zera. Różnica polega na skali: zamiast jednej klatki program liczy 24 albo 25 klatek na każdą sekundę filmu.
Nie każdy produkt potrzebuje filmu. Jeśli kupujący ocenia tylko kolor i kształt, wystarczą dobre ujęcia z kilku stron albo model 3D na stronie internetowej, który klient sam obraca palcem. Jeśli o zakupie decydują ludzie w kadrze, jedzenie, tkanina w ruchu albo emocja z prawdziwego życia, kamera zwykle zrobi to lepiej i taniej; kiedy który sposób wygrywa, rozpisuję w tekście render 3D czy sesja zdjęciowa.
Animacja różni się od interaktywnego modelu tym, kto steruje. W filmie prowadzę kamerę i mogę opowiedzieć krótką historię: najpierw całość, potem detal, na końcu działanie. W modelu klient ogląda to, co chce, ale nikt go nie prowadzi, więc często najlepiej działa jedno i drugie.
- Ruch tłumaczy funkcjęRozkładanie, montaż, przekrój, przepływ, mechanizm schowany w obudowie. Zdjęcie pokaże stan, film pokaże zmianę.
- Produkt jeszcze nie istniejeModel z plików konstrukcyjnych daje film przed pierwszą sztuką z linii: na premierę, targi albo przedsprzedaż.
- Kiedy odpuścićProsty produkt bez wariantów, który dobrze wygląda na zdjęciu, oraz kampanie oparte na ludziach i emocjach. Tam film z kamery albo zdjęcia dają więcej za mniej.
Jakie są rodzaje animacji produktu?
Najczęściej zamawiane rodzaje to obrót 360°, widok rozstrzelony, animacja funkcji z opisami, rozpakowanie, pętla do nagłówka strony i animacja instruktażowa. Różnią się tym, co pokazują, i tym, ile pracy wymagają poza samym modelem.
Rodzaj animacji wybieram od końca: od pytania, na które film ma odpowiedzieć, i od miejsca, w którym ktoś go zobaczy. Obrót 360° odpowiada na pytanie „jak to wygląda z tyłu”, widok rozstrzelony na „z czego to jest zrobione”, animacja funkcji na „co to umie”, a instrukcja na „jak to złożyć”. Jeden film może łączyć kilka rodzajów, ale każde dodatkowe ujęcie to osobna praca kamery, światła i renderu.
- Najprostszy startObrót 360° jest najlżejszy w produkcji, bo kamera i światło stoją, a ruch to jeden obrót wokół osi. Przy ograniczonym budżecie zacznij od niego i jednej animacji funkcji, a kolejne ujęcia dołóż później z tej samej sceny.
- Najwięcej pracySceny z symulacją: płynem, tkaniną, folią albo dymem. Program musi policzyć ich zachowanie, a wynik rzadko wychodzi dobrze za pierwszym razem.
| Rodzaj | Co pokazuje | Gdzie działa najlepiej | Co dokłada pracy |
|---|---|---|---|
| Obrót 360° (turntable) | Produkt obracający się wokół osi przy stałym świetle i kamerze | Karta produktu, galeria, pętla w social mediach | Niewiele poza modelem; tył i spód muszą być wymodelowane równie starannie jak przód |
| Widok rozstrzelony (exploded view) | Części rozsuwające się i wracające na miejsce | Produkty techniczne, B2B, targi, materiały dla dystrybutorów | Model z kompletnymi, osobnymi częściami, najlepiej z plików CAD; tor ruchu i kolejność każdej części |
| Animacja funkcji z opisami | Działanie mechanizmu i krótkie podpisy przy detalach | Reklamy, strona produktu, YouTube | Scenariusz, grafiki 2D, napisy i wersje językowe |
| Rozpakowanie (unboxing) | Opakowanie, które się otwiera, i zawartość zestawu | Social media, premiera, sklep | Model opakowania z nadrukiem, karton i folia w ruchu, często symulacja |
| Pętla do nagłówka strony | Kilka sekund spokojnego ruchu, który zapętla się bez szwu | Pierwszy ekran strony lub karty produktu | Domknięcie pętli, mały plik, plakat i wersja dla osób z ograniczonym ruchem |
| Przekrój i działanie | Wnętrze urządzenia, przepływ cieczy lub powietrza | Produkty techniczne i przemysłowe | Model wnętrza, przezroczystości, czasem symulacja płynu |
| Animacja instruktażowa | Montaż, obsługa lub konserwacja krok po kroku | Strona pomocy, karta produktu, materiały serwisowe | Wiele ujęć, zgodność z instrukcją producenta, często lektor lub napisy |
Jaki format filmu 3D produktu na YouTube, Instagram, TikTok i LinkedIn?
Na Reels i TikToka pion 9:16, do reklamy w kanale Facebooka i na LinkedIn pion 4:5, na YouTube poziom 16:9, a plik wszędzie MP4 z obrazem H.264. Limity długości i wagi pliku z oficjalnych specyfikacji zebrałem poniżej.
Z tabeli wynikają trzy praktyczne wnioski. Po pierwsze, pion 9:16 i pion 4:5 to dwa różne kadry, a nie jeden film przycięty dwa razy: w 4:5 produkt ma więcej miejsca na boki, w 9:16 więcej nad sobą i pod sobą. Meta przy Reels radzi dodatkowo zostawić wolne od tekstu i logo co najmniej 14 procent kadru u góry, 35 procent u dołu i po 6 procent z boków, bo tam pojawiają się ikona profilu i przycisk wezwania do działania. Dlatego każdy format kadruję osobno w scenie 3D, zamiast przycinać jeden gotowy film, i produkt nie ucieka pod przyciski.
Po drugie, kodowanie jest wszędzie podobne: plik MP4 z obrazem H.264 spełnia wymagania wszystkich kanałów z tabeli. YouTube zaleca dodatkowo zamkniętą grupę GOP równą połowie liczby klatek na sekundę i przestrzeń kolorów BT.709. Liczbę klatek zostawiam taką, z jaką film był renderowany. YouTube wymienia typowe 24, 25, 30, 48, 50 i 60 klatek na sekundę, a LinkedIn w pomocy dla reklam wideo podaje mniej niż 30 klatek na sekundę, więc 24 lub 25 klatek mieści się w obu.
Po trzecie, odtwarzacze platform zachowują się inaczej niż strona. LinkedIn zapętla reklamy krótsze niż 30 sekund, aż odtworzą się łącznie przez co najmniej 30 sekund, więc film dziesięciosekundowy ktoś zobaczy trzy razy z rzędu; pętla bez szwu przestaje być ozdobą, a staje się wymaganiem. LinkedIn przyjmuje też wyłącznie plik wgrany bezpośrednio, nie link do YouTube czy Vimeo. Na YouTube film pionowy lub kwadratowy do 3 minut trafia do Shorts; zwykły film potrzebuje szerszego formatu, na przykład 16:9.
| Kanał | Proporcje i rozdzielczość | Długość | Plik i kodowanie |
|---|---|---|---|
| YouTube, film poziomy | 16:9 to standard odtwarzacza na komputerze; dla 1080p przy 24, 25 lub 30 kl./s zalecane 8 Mb/s | Zalecenia kodowania jej nie określają | MP4, H.264 w profilu wysokim, 4:2:0, indeks pliku (atom moov) na początku |
| YouTube Shorts | Pion lub kwadrat | Do 3 minut (filmy przesłane po 15 października 2024 r.) | Jak wyżej |
| Instagram Reels, reklama | 9:16, zalecane 1440 × 2560 px | Od 0 s do 15 minut | MP4 lub MOV, H.264, do 4 GB |
| Facebook, reklama w kanale | 4:5, zalecane 1440 × 1800 px | Od 1 s do 241 minut | MP4, MOV lub GIF, H.264, do 4 GB |
| TikTok, reklama In-Feed | 9:16 zalecane, co najmniej 540 × 960 px; także 16:9 i 1:1 | Do 10 minut | MP4, MOV, MPEG, 3GP lub AVI, do 500 MB, co najmniej 516 kb/s |
| LinkedIn, reklama wideo | 4:5 zalecane, np. 720 × 900 px; także 9:16, 16:9 i 1:1 | Od 3 s do 30 minut, zalecane 15–30 s | MP4, H.264 lub VP8, od 75 KB do 500 MB |
Czy film 3D produktu wstawię do sklepu internetowego i na Allegro?
Do własnego sklepu tak, a na Allegro tylko pośrednio: wideo w galerii oferty dodaje samo Allegro i pochodzi ono wyłącznie od producentów. Shopify przyjmuje jako media produktu zarówno pliki wideo, jak i linki do YouTube lub Vimeo.
Shopify pozwala dodać wideo do produktu na dwa sposoby: wgrać plik albo osadzić link z YouTube lub Vimeo. Wgrany plik może trwać do 10 minut, ważyć do 1 GB i mieć rozdzielczość do 4K (4096 × 2160 px), w formacie MP4, MOV albo WebM, a w przeglądarkach obsługujących streaming sklep wyświetla go w 480p, 720p lub 1080p zależnie od łącza klienta. Warunkiem jest motyw, który obsługuje wideo; według pomocy Shopify obsługują je wszystkie motywy Online Store 2.0 przygotowane przez Shopify i motywy z rodziny Horizon.
Allegro pokazuje wideo w galerii zdjęć oferty, na drugiej pozycji. Gdy kupujący do niej przejdzie, film odtwarza się automatycznie bez dźwięku, a dźwięk i pełny ekran włącza sam kupujący, w przeglądarce na komputerze i telefonie oraz w aplikacji. Wideo do ofert dodaje jednak Allegro, a wszystkie materiały pochodzą wyłącznie od producentów. Producent powinien więc mieć gotowy, cichy film; sprzedawca, który nie jest producentem, wykorzysta animację na własnej stronie, w reklamach i w social mediach.
We własnym sklepie film osadzasz jako zwykły element video i sam decydujesz, jak się ładuje i kiedy rusza; jak to ustawić, opisuję w następnej części. Kiedy w sklepie lepiej sprawdza się film, a kiedy model 3D albo konfigurator, porównuję w przewodniku o wizualizacjach 3D dla sklepu internetowego.
- Działa bez dźwiękuAllegro odtwarza film wyciszony, a przeglądarki zwykle blokują autostart z dźwiękiem. To, co ważne, musi być widać, a nie słychać.
- Produkt od pierwszej klatkiPierwsza klatka bywa plakatem i miniaturą. Nie zaczynaj od czarnego ekranu ani od logo, tylko od produktu w czytelnym kadrze.
- Zgodność z towaremFilm pokazuje kolor, skalę i wyposażenie, które klient dostanie. Render może upiększyć światło i tło, ale nie sam produkt.
Jak osadzić animację produktu na stronie, żeby nie spowolniła strony?
Pętla produktu na stronie powinna być cichym plikiem wideo z lekkim plakatem, pobieranym dopiero wtedy, gdy jest potrzebny. Przeglądarki pozwalają same uruchomić film tylko bez dźwięku, a ciężki plik na pierwszym ekranie potrafi zepsuć wskaźnik LCP.
Zasady autoodtwarzania są dziś proste. Według MDN blokada autoodtwarzania nie dotyczy elementu video, który nie ma ścieżki dźwiękowej albo ma ją wyciszoną, a Chrome w opisie swojej polityki pisze wprost, że wyciszone autoodtwarzanie jest zawsze dozwolone. Safari wymaga do autoodtwarzania atrybutu playsinline. Pętla produktu dostaje więc atrybuty muted, loop i playsinline, a w samym pliku nie ma ścieżki audio wcale: nie ma czego wyciszać ani czego pobierać.
Drugi temat to szybkość. Google mierzy ją między innymi wskaźnikiem Largest Contentful Paint, czyli czasem wyświetlenia największego elementu w widocznej części strony; dobry wynik to 2,5 sekundy lub mniej na 75. percentylu wizyt. Element video też może być tym największym elementem, a liczy się wtedy czas wczytania plakatu albo pokazania pierwszej klatki, zależnie od tego, co nastąpi wcześniej. Plakat na pierwszym ekranie musi więc być lekkim obrazem; web.dev radzi wczytać go z wyprzedzeniem z wysokim priorytetem, bo samemu atrybutowi poster nie da się tego priorytetu nadać.
Film niżej na stronie nie powinien się pobierać, zanim ktoś do niego dojdzie. Atrybut preload z wartością none mówi przeglądarce, żeby nie pobierała danych wideo z góry, a atrybut loading z wartością lazy, który według web.dev przeglądarki zaczęły obsługiwać także dla elementu video, odkłada pobranie filmu i plakatu do chwili, gdy element zbliży się do ekranu. Przeglądarki, które go nie znają, po prostu go pomijają, dlatego start pętli i tak wiążę z obserwatorem przewijania w JavaScripcie. Filmu, który jest największym elementem pierwszego ekranu, nie ładuję leniwie.
Kodek dobieram z myślą o zasięgu. MDN w przewodniku po kodekach poleca dla zwykłych stron dwie wersje: WebM z obrazem AV1 jako pierwszą i MP4 z H.264 jako zapasową, którą odtwarzają wszystkie główne przeglądarki. AV1 daje mniejsze pliki, ale Safari obsługuje go tylko na urządzeniach ze sprzętowym dekoderem: MacBookach z M3 i nowszych, iPhonie 15 Pro oraz iPhonie 16 i nowszych. Przy kilkusekundowej pętli często wystarcza sam MP4 z H.264.
Dwóch rzeczy unikam: animowanego GIF-a, bo jak zauważa web.dev, GIF-y potrafią ważyć kilka megabajtów, a wideo o podobnej jakości jest zwykle znacznie mniejsze, oraz odtwarzacza YouTube jako ozdobnego tła. YouTube jest dobry dla filmu, który ktoś świadomie włącza z dźwiękiem, a nie dla pętli w nagłówku.
// <video class="petla" muted loop playsinline preload="none"
// width="1080" height="1350" poster="obrot-plakat.webp">
// <source src="obrot.mp4" type="video/mp4">
// </video>
const video = document.querySelector<HTMLVideoElement>('video.petla');
const ograniczonyRuch = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (video && !ograniczonyRuch) {
video.controls = true; // przycisk pauzy: pętla rusza sama, więc wymaga go WCAG 2.2.2
const obserwator = new IntersectionObserver((wpisy) => {
if (!wpisy.some((wpis) => wpis.isIntersecting)) return;
obserwator.disconnect();
video.play().catch(() => {
// np. NotAllowedError: zostaje plakat, a odbiorca włącza film sam
});
});
obserwator.observe(video);
} else if (video) {
video.controls = true; // ograniczony ruch: bez autostartu, z przyciskiem odtwarzania
}Czy animacja na stronie musi mieć pauzę? Dostępność i ograniczony ruch
Tak, jeśli rusza sama, trwa dłużej niż pięć sekund i jest wyświetlana obok innych treści. Tak stanowi kryterium 2.2.2 WCAG 2.2, a systemowe ustawienie ograniczonego ruchu warto uszanować niezależnie od tego, czy przepisy Cię obejmują.
Kryterium 2.2.2 „Pauza, zatrzymanie, ukrycie” wymaga mechanizmu, którym użytkownik zatrzyma lub ukryje ruchomą treść spełniającą trzy warunki naraz: startuje automatycznie, trwa dłużej niż pięć sekund i jest pokazywana równolegle z inną treścią. Zapętlony obrót produktu w nagłówku karty produktu spełnia wszystkie trzy, więc potrzebuje widocznego przycisku pauzy. W3C uzasadnia próg tym, że pięć sekund wystarcza, żeby przyciągnąć uwagę, a nie jest na tyle długie, żeby nie dało się przeczekać rozproszenia.
Drugie ustawienie to prefers-reduced-motion, czyli sygnał z systemu, że użytkownik woli ograniczony ruch. MDN opisuje je jako szeroko dostępne w przeglądarkach od stycznia 2020 roku i wskazuje, gdzie się je włącza, między innymi w iOS w ustawieniach dostępności w sekcji Ruch, w Androidzie 9 i nowszym opcją usunięcia animacji, a w Windows 11 w efektach wizualnych. Dla osób z zaburzeniami błędnika skalowanie i przesuwanie dużych obiektów może wywołać dolegliwości, więc to nie kwestia gustu. Tak samo działają dwie sceny 3D w pokazie na stronie wizualizacji 3D: przy ograniczonym ruchu albo włączonym oszczędzaniu danych zostaje nieruchomy kadr, a scenę uruchamia się ręcznie.
W reklamach dochodzą napisy. Meta przy Reels i reklamach w kanale Facebooka określa je jako opcjonalne, ale zalecane, a LinkedIn przyjmuje napisy jako plik SRT bez własnego formatowania. Film z lektorem bez napisów traci każdego, kto ogląda bez dźwięku, a więc każdego, u kogo film wystartował sam. Czy i w jakim zakresie dotyczą Cię przepisy o dostępności, opisuję w tekście o dostępności sklepu internetowego.
- Przycisk pauzyWidoczny, osiągalny klawiaturą, z czytelną etykietą. Pauza zatrzymuje film, a nie tylko zasłania go innym elementem.
- Ograniczony ruchPrzy ustawieniu prefers-reduced-motion zostaje plakat i przycisk odtwarzania, bez automatycznego startu.
- Tekst obok filmuNazwa produktu, najważniejsze cechy i opis tego, co pokazuje film, stoją w zwykłym tekście strony. Wyszukiwarka i czytnik ekranu nie zobaczą tego, co jest tylko w obrazie.
- Bez błyskówSzybkie migotanie światła i stroboskopowe przejścia zostawiam poza filmem; WCAG ma dla błysków osobne wytyczne w grupie 2.3.
Jak powstaje taki film krok po kroku?
Pracuję w tej kolejności: cel i kanały, model z materiałami, animatik, czyli szary podgląd ruchu do akceptacji, render klatek i kodowanie wersji na każdy kanał. Najważniejszy punkt to akceptacja animatiku, bo po nim każda zmiana ruchu oznacza ponowne liczenie klatek.
Ta kolejność ma uzasadnienie w dokumentacji Blendera, w którym pracuję. Dokumentacja odradza renderowanie animacji od razu do pliku wideo: gdy w trakcie coś pójdzie nie tak, plik może być nie do odtworzenia i wszystkie klatki trzeba liczyć od nowa. Seria obrazów PNG albo OpenEXR pozwala wznowić render od klatki, na której wystąpił problem, i sprawdzać różne ustawienia kodowania w kilka sekund, bo kodowanie trwa zwykle dużo krócej niż renderowanie sceny. Ta sama dokumentacja przestrzega przed obróbką pliku skompresowanego stratnie, więc wersje dla kanałów zawsze koduję z klatek źródłowych, a nie z gotowego MP4.
- Cel, kanały i długośćUstalamy, na jakie pytanie kupującego film odpowiada i gdzie będzie wyświetlany. Z listy kanałów wynika liczba kadrów: pion, kwadrat, poziom.
- Model i materiałyBuduję model z plików CAD, rysunków albo wymiarów i dokładam materiały. Przy animacji modeluję też to, czego w nieruchomym kadrze nie widać: tył, spód i wnętrze rozkładanych części.
- AnimatikRuch kamery i produktu w szybkim, szarym podglądzie. Ocenia się tempo, kolejność ujęć i to, czy produkt nie ucieka z kadru.
- Akceptacja animatikuTwoja decyzja: od tej chwili ruch i kadry są zamknięte. Obejrzyj podgląd także na telefonie, bo tam ruch bywa za szybki, żeby zobaczyć detal.
- Klatki wzorcoweKilka klatek w pełnej jakości do akceptacji koloru, światła i materiałów, zanim program policzy całą resztę.
- Render klatekProgram liczy każdą klatkę jako osobny obraz. Gdy coś przerwie pracę, wznawiam od ostatniej gotowej klatki, a nie od początku.
- Kodowanie i wersjeZ klatek źródłowych koduję wersje na stronę, do reklam i do social mediów, z plakatem i, jeśli trzeba, z napisami.
- 01 · StartBrief: cel, kanały i terminOpis produktu, pliki CAD lub wymiary, lista kanałów z proporcjami i data publikacji.
- 02 · AutomatModel, materiały i animatikBuduję scenę i szary podgląd ruchu w każdym potrzebnym kadrze.Blender
- 03 · CzłowiekAkceptacja animatikuDecydujesz o tempie, kolejności ujęć i kadrach. Po akceptacji ruch jest zamknięty.
- 04 · AutomatRender klatekProgram liczy klatki jako obrazy; przerwany render wznawiam od ostatniej gotowej klatki.Blender, Cycles
- 05 · CzłowiekPrzegląd gotowych wersjiOglądasz film na telefonie i komputerze, w docelowych proporcjach, przed publikacją.
- 06 · EfektPliki na stronę, do reklam i socialMP4 z H.264 w każdym kadrze, plakat, wersja bez dźwięku i klatki źródłowe do kolejnych wersji.ffmpeg
Odzyskany czasCzas, który poszedłby na organizację planu zdjęciowego i montaż, idzie na dwie decyzje: ruch na podglądzie i gotowe pliki przed publikacją.
Od czego zależą koszt i czas animacji?
Koszt i czas zależą od długości filmu, liczby kadrów i wersji, złożoności modelu i materiałów oraz od tego, czy w scenie jest symulacja. Długość mnoży się przez liczbę klatek na sekundę, a każda klatka to osobny render.
Rachunek zaczyna się od mnożenia. Sekunda filmu przy 24 klatkach na sekundę to 24 obrazy do policzenia, 15 sekund to 360 klatek, a 30 sekund przy 25 klatkach na sekundę to 750 klatek. Czas jednej klatki zależy od sceny, dlatego zanim podam termin, renderuję kilka klatek próbnych na docelowych ustawieniach i mnożę ich czas przez liczbę klatek. Gdyby klatka liczyła się na przykład 4 minuty, 360 klatek oznaczałoby 24 godziny pracy komputera dla jednego kadru, a trzy kadry, czyli pion, kwadrat i poziom, trzy takie serie.
Publiczne cenniki polskich studiów, także za animację produktu, i to, co podnosi cenę samego modelu, zebrałem w przewodniku ile kosztuje wizualizacja 3D produktu. Tutaj jedna rada: porównuj oferty na tym samym zakresie, czyli długości, liczbie kadrów, liczbie tur poprawek i formatach plików. Stawka za sekundę bez tych informacji niewiele mówi, a najdłużej w projekcie zwykle czeka się nie na render, tylko na materiały i decyzje.
- Długość i liczba kadrówKażdy dodatkowy format to osobna seria klatek, jeśli kadruję go w scenie, a nie przycinam. Przycięcie jest tańsze, ale produkt częściej wpada pod napisy i przyciski.
- Materiały i światłoSzkło, płyny i polerowany metal wymagają wielu odbić i załamań światła, więc zwykle liczą się dłużej niż matowe tworzywo. Widać to od razu na klatkach próbnych.
- Rozdzielczość i próbkiW Cycles większa liczba próbek na piksel daje czystszy obraz kosztem dłuższego renderu, a większa rozdzielczość to więcej pikseli do policzenia.
- Symulacje i ruch częściPłyn, tkanina, folia przy rozpakowaniu albo sprężyna w mechanizmie to osobne obliczenia i osobne poprawki. Często da się je zastąpić prostszym ruchem bez straty dla przekazu.
- Dźwięk, lektor i napisyMuzyka z licencją, lektor i wersje językowe napisów to osobne pozycje. Pętla na stronę nie potrzebuje żadnej z nich.
- Zmiany po akceptacjiZmiana ruchu po animatiku oznacza ponowne liczenie klatek, często wszystkich. To najdroższy rodzaj poprawki.
Jak renderuję obrót 360° produktu w Blenderze?
Obrót 360° renderuję skryptem w Blenderze, w silniku Cycles: scena, produkt, światło i kamera są opisane w kodzie, więc ten sam film da się powtórzyć w innym kolorze, kadrze albo długości bez ręcznego ustawiania sceny od nowa.
W galerii wizualizacji 3D pokazuję trzy produkty wyrenderowane w ten sposób: słuchawki, flakon perfum i głośnik. Marki są wymyślone, a modele, materiały i światło powstały w całości w kodzie, bez gotowych modeli, tekstur, map HDRI i zdjęć; to pokaz warsztatu, nie realizacje dla klientów. Ten sam skrypt ma tryb obrotu, który zamienia nieruchome ujęcie w pętlę.
Obrót działa tak: produkt dostaje dwa klucze animacji, na pierwszej klatce i na klatce następnej po ostatniej, z różnicą pełnych 360 stopni i liniowym przebiegiem, bez zwalniania na końcach. Renderuję klatki od pierwszej do ostatniej, więc klatka, która domknęłaby obrót, jest identyczna z pierwszą i do filmu nie trafia; pętla nie ma szwu ani zatrzymania. Domyślnie to 96 klatek, czyli 4 sekundy przy 24 klatkach na sekundę. Kadry 4:5 na telefon, 3:2 na komputer i 1:1 do pętli i kart są komponowane osobno, a nie wycinane z jednego obrazu.
Przed renderem skrypt zapisuje raport kontrolny: czy siatki są zamknięte, czy części nie przenikają się tam, gdzie nie powinny, i czy rzut produktu mieści się w każdym kadrze z bezpiecznym marginesem. Render idzie w Cycles z próbkowaniem adaptacyjnym i odszumianiem OpenImageDenoise, które dokumentacja Blendera opisuje jako odszumiacz oparty na AI, zwykle dający najwyższą jakość. Klatki zapisuję jako 16-bitowe PNG, a potem składam je programem ffmpeg w MP4 z obrazem H.264: bez ścieżki dźwiękowej, z indeksem na początku pliku i plakatem z pierwszej klatki. Przy jakości obowiązuje zasada opisana w dokumentacji Blendera: mniejszy współczynnik CRF to lepszy obraz i większy plik, a dla H.264 zakres wynosi od 0 do 51.
Skrypt nie zastępuje oka. Kadr, światło i tempo obrotu oceniam na podglądzie, a klatki wzorcowe pokazuję do akceptacji tak samo jak przy scenie ustawianej ręcznie. Zaleta jest inna: gdy po miesiącu potrzebujesz tego samego obrotu w nowym kolorze albo w pionie do Reels, zmieniam parametr i liczę klatki ponownie, zamiast odtwarzać scenę z pamięci.
# Szybki podgląd kadru: 32 próbki, 25 procent rozdzielczości
blender -b --python product-viz.py -- headphones --format square --samples 32 --scale 25
# Obrót o 360 stopni w 96 klatkach, kadr 1:1, silnik Cycles, bez okna programu
blender -b --python product-viz.py -- headphones --turntable --frames 96 --format square
# Klatki PNG -> MP4 (H.264), 24 kl./s, bez dźwięku, indeks na początku pliku
ffmpeg -framerate 24 -i frame-%04d.png -an \
-c:v libx264 -preset slow -crf 18 -pix_fmt yuv420p \
-movflags +faststart obrot.mp4Co przygotować przed zamówieniem animacji?
Najwięcej czasu oszczędza lista kanałów z proporcjami, pliki CAD albo dokładne wymiary, kody kolorów i jedno zdanie o tym, co film ma pokazać. Resztę ustalamy na animatiku.
Jak przygotować pliki konstrukcyjne, żeby model powstał szybko i bez zgadywania, opisuję w tekście o wizualizacji 3D z plików CAD. Brak części materiałów nie blokuje startu: zaczynam od tego, co jest, a założenia, które muszę przyjąć, pokazuję na animatiku do potwierdzenia.
Jeśli masz produkt, który trudno pokazać na zdjęciu, napisz mi, co to za produkt, co film ma pokazać, w jakich kanałach się pojawi i jakie pliki już masz. Odpowiadam w ciągu jednego dnia roboczego, z propozycją rodzaju animacji, liczby kadrów i tego, co da się zrobić z gotowego modelu. Pracuję z Mikołowa, zdalnie z firmami z całej Polski; pliki i podglądy wymieniamy online.
- Jedno zdanie celuNa przykład: „klient ma zobaczyć, że blat rozkłada się jednym ruchem”. Z takiego zdania wynika rodzaj animacji i jej długość.
- Lista kanałów i proporcjiStrona, sklep, Reels, TikTok, YouTube, LinkedIn, ekran na targach. Każdy kanał to kadr, który trzeba zaplanować w scenie.
- Pliki konstrukcyjneSTEP, IGES albo natywny plik CAD, a gdy ich nie ma, wymiary i zdjęcia z kilku stron. Przy widoku rozstrzelonym każda część musi być osobnym, kompletnym elementem.
- Materiały i markaKody RAL, Pantone lub NCS, logo w wektorach, fonty i zasady marki. Kolor opisany jako „ciepły szary” trzeba zgadywać.
- Dźwięk i tekstCzy film ma lektora, muzykę i napisy, w jakich językach i kto dostarcza licencję na muzykę.
- Termin publikacjiData premiery albo startu kampanii. Liczę od niej wstecz czas na animatik, render i poprawki.
Pytania i odpowiedzi
Jak długa powinna być animacja 3D produktu?
Tak krótka, jak pozwala to, co ma pokazać: pętla obrotu na stronę trwa w moim skrypcie domyślnie 4 sekundy, a film o działaniu mechanizmu potrzebuje więcej czasu. LinkedIn zaleca w reklamach wideo długość od 15 do 30 sekund, a YouTube traktuje filmy pionowe i kwadratowe do 3 minut jako Shorts. Długość mnoży pracę, bo każda sekunda to 24 lub 25 klatek do policzenia.
Czy animacja 3D produktu odtworzy się sama na telefonie?
Odtworzy się sama, jeśli film nie ma dźwięku albo jest wyciszony i ma atrybut playsinline. Według MDN blokada autoodtwarzania w przeglądarkach nie dotyczy wideo bez dźwięku, a Safari wymaga do autoodtwarzania właśnie playsinline. Film z dźwiękiem przeglądarka zwykle zablokuje do pierwszej interakcji użytkownika, dlatego pętla produktu na stronie powinna działać bez dźwięku.
Jaki format filmu 3D na stronę: MP4, WebM czy GIF?
Na stronę najbezpieczniej wybrać MP4 z obrazem H.264, który według MDN odtwarzają wszystkie główne przeglądarki. WebM z kodekiem AV1 daje mniejsze pliki, ale Safari obsługuje AV1 tylko na nowszych urządzeniach ze sprzętowym dekoderem, więc warto podawać go jako pierwszą wersję, z MP4 w zapasie. Animowanego GIF-a nie polecam, bo jak zauważa web.dev, GIF-y potrafią ważyć kilka megabajtów, a wideo o podobnej jakości jest zwykle znacznie mniejsze.
Czy mogę dodać film 3D produktu do oferty na Allegro?
Wideo w galerii oferty Allegro dodaje samo Allegro, a materiały pochodzą wyłącznie od producentów; film stoi na drugiej pozycji galerii i odtwarza się automatycznie bez dźwięku. Producent powinien więc mieć gotowy film, który działa bez dźwięku od pierwszej sekundy. Sprzedawca, który nie jest producentem, wykorzysta animację na własnej stronie, w reklamach i w social mediach.
Ile kosztuje animacja 3D produktu?
Cena zależy od długości, liczby kadrów i wersji, złożoności modelu i materiałów, symulacji oraz od dźwięku i napisów. Najtańszy jest obrót 360° z gotowego modelu, a najdroższe są sceny z płynem, tkaniną albo wieloma ujęciami oraz zmiany ruchu po akceptacji podglądu. Publiczne cenniki polskich studiów i to, co podnosi cenę modelu, zebrałem w osobnym przewodniku o kosztach wizualizacji 3D produktu.
Czy z jednej animacji zrobię wersje 9:16, 4:5 i 16:9?
Z jednej sceny 3D tak, z jednego gotowego filmu tylko kosztem kadru. Przycięcie filmu poziomego do pionu 9:16 zostawia mało miejsca na produkt, a przy reklamach w Reels Meta radzi trzymać tekst i logo z dala od co najmniej 14 procent kadru u góry, 35 procent u dołu i 6 procent z boków. Dlatego każdy format kadruję osobno w scenie i renderuję jako osobną serię klatek.
Czy do animacji produktu potrzebny jest plik CAD?
Plik CAD nie jest konieczny do animacji produktu, ale bardzo pomaga, zwłaszcza przy widoku rozstrzelonym i animacji mechanizmu, gdzie każda część musi mieć prawdziwy kształt i miejsce. Bez CAD-u model buduję z rysunków, wymiarów i zdjęć z kilku stron, co trwa dłużej i wymaga więcej poprawek na podglądzie. Najlepiej sprawdzają się neutralne formaty STEP lub IGES albo natywny plik z programu konstrukcyjnego.
Czym animacja 3D produktu różni się od filmu nagranego kamerą?
Animacja powstaje z modelu, więc nie potrzebuje gotowego egzemplarza, studia ani ekipy, a kamera może wejść do środka urządzenia albo rozłożyć je na części. Film z kamery lepiej pokazuje ludzi, emocje, jedzenie, tkaniny w ruchu i produkt w prawdziwym otoczeniu. Często najlepszy efekt daje połączenie obu.
Źródła
Liczby i terminy w tym przewodniku sprawdziłem w oficjalnych źródłach. Ceny i przepisy się zmieniają, więc przy decyzji warto zajrzeć do nich ponownie.
- YouTube Pomoc: zalecane ustawienia przy kodowaniu przesyłania
- YouTube Pomoc: informacje o 3-minutowych filmach Short
- Meta Ads Guide: specyfikacja reklam wideo na Instagram Reels
- Meta Ads Guide: specyfikacja reklam wideo w kanale Facebooka
- TikTok Ads Manager: TikTok Auction In-Feed Ads, specyfikacja wideo
- LinkedIn Marketing Solutions Help: specyfikacja reklam wideo
- Allegro: dodajemy wideo do galerii zdjęć w kolejnych ofertach
- Shopify Help Center: rodzaje mediów produktu (wideo, modele 3D)
- MDN: autoodtwarzanie mediów i Web Audio API
- Chrome for Developers: polityka autoodtwarzania w Chrome
- MDN: element video, atrybuty poster, preload, playsinline i muted
- web.dev: leniwe ładowanie wideo
- web.dev: Largest Contentful Paint (LCP)
- MDN: przewodnik po kodekach wideo w przeglądarkach
- MDN: prefers-reduced-motion
- W3C: Understanding WCAG 2.2, kryterium 2.2.2 Pause, Stop, Hide
- Blender 5.2 LTS Manual: Output, kodowanie wideo i wskazówki do renderu animacji
- Blender 5.2 LTS Manual: Cycles, próbkowanie i odszumianie
Masz pytanie do swojego projektu?
Opisz, co chcesz osiągnąć. Odpowiem konkretnie, także wtedy, gdy najlepszą odpowiedzią jest „nie rób tego”.
Jonasz Jankowski · Bezpośrednia współpraca · Mikołów (Śląsk), zdalnie w całej Polsce
- Odpowiadam osobiście w ciągu jednego dnia roboczego.
- Krótka rozmowa o celu, funkcjach, materiałach i integracjach.
- Dostajesz zakres z etapami i konkretną kwotę, zanim cokolwiek zaczniemy.