Na stronie projektu Itodi jedna scena 3D prowadzi od taśmy na paczce, przez posty i instrukcję, do komody z konfiguratora, która trafia do kartonu. To nie film ani seria zdjęć, tylko scena, którą przeglądarka rysuje na bieżąco dzięki WebGL. Na tej samej technologii, z biblioteką Three.js, działa album 3D na stronie projektu 20 lat Porta w Rumunii.
WebGL, render i animacja 3D
Render 3D i animacja 3D powstają wcześniej, w programie takim jak Blender, i trafiają na stronę jako gotowy obraz albo film. WebGL rysuje scenę na żywo w przeglądarce, więc użytkownik może nią sterować: obrócić produkt, zmienić wariant, przybliżyć detal. Ten sam model może posłużyć do obu rzeczy, jeśli od początku przygotuje się go także z myślą o sieci.
Kiedy 3D się broni
Wtedy, gdy kształt, materiał albo wariant produktu trudno pokazać zdjęciem: opakowanie, mebel, maszyna, część zamienna. W konfiguratorze produktu klient od razu widzi swój wariant. Przy produkcie technicznym sam obejrzy detal, o który inaczej zapytałby handlowca. Jako ozdoba 3D się nie broni. Model, który kręci się na stronie głównej i niczego nie tłumaczy, tylko spowalnia ładowanie.
Na co uważać
- Waga. Modele i tekstury potrafią ważyć więcej niż cała reszta strony. Siatkę upraszcza się pod sieć, tekstury kompresuje, a scenę ładuje dopiero wtedy, gdy ktoś do niej przewinie. Inaczej cierpią Core Web Vitals.
- Telefony. Ciężka scena na słabszym telefonie tnie się i grzeje urządzenie. Testuje się ją na przeciętnych telefonach. Mocny komputer projektanta niczego tu nie dowodzi.
- Wersja bez 3D. Nie każde urządzenie uruchomi WebGL i nie każdy chce ruchu na ekranie. Na naszych stronach projektów przeglądarka bez WebGL dostaje w miejscu sceny 3D te same kroki ze zwykłymi zdjęciami. Treść ma być dostępna także bez 3D.
