Loading…
3D i motion — interaktywne doświadczenia webowe
Te projekty pokazują, jak interaktywne 3D i WebGL mogą sprawić, że historia produktu lub marki staje się namacalna w przeglądarce. Każde doświadczenie łączy ruch i efekty wizualne z konkretną ścieżką użytkownika.
- Rola
- Interaktywne tworzenie stron webowych i WebGL — od koncepcji, przez przygotowanie scen 3D i shadery, po choreografię GSAP i przewijania w każdym projekcie.
- Technologie
- Three.jsReact Three FiberGSAP (ScrollTrigger)GLSL ShadersBlenderLenis
Przegląd
Aparat, który staje się wizjerem do czyichś wspomnień; klawiatura, w której każdy klawisz jest rozproszonym narzędziem czekającym na połączenie; cząsteczki zmieniające kształt, bo sam produkt opowiada o transformacji. To zbiór takich realizacji — pełnych landing pages zbudowanych wokół jednego pomysłu 3D oraz mniejszych, samodzielnych eksperymentów badających pojedynczą technikę.
Statyczne zrzuty ekranu nie oddają tej pracy sprawiedliwości — każda strona zasługuje na swoje 3D, łącząc je bezpośrednio z opowiadaną historią.
Interfejs
Pięć historii, pięć technik
Everline — prezentacja wypożyczalni samochodów
Kinetyczna podróż od uruchomienia silnika do salonu — wejdź do kokpitu, a następnie zobacz flotę wyłaniającą się w studyjnym oświetleniu.
Interfejs
Pięć historii, pięć technik
Everline — prezentacja wypożyczalni samochodów
Kinetyczna podróż od uruchomienia silnika do salonu — wejdź do kokpitu, a następnie zobacz flotę wyłaniającą się w studyjnym oświetleniu.
Elementy laboratorium
Nie każda idea potrzebuje całej strony wokół siebie
Samodzielne eksperymenty — jedna technika wyodrębniona i rozwinięta dalej, niż wymagałaby tego pojedyncza landing page.
Elementy laboratorium
Nie każda idea potrzebuje całej strony wokół siebie
Samodzielne eksperymenty — jedna technika wyodrębniona i rozwinięta dalej, niż wymagałaby tego pojedyncza landing page.
Chromatyczny szklany kamień
Chmura cząsteczek uwięziona w imitowanym szkle chromatycznym — dwukrotnie załamana i rozświetlona osobno, aby blask pozostał wewnątrz sylwetki zamiast wydostawać się na zewnątrz.
Konfigurator cząsteczek
Dziesiątki tysięcy punktów GPU cieniowanych jako para lub podświetlone kule, zmieniających kształt dzięki kontrolkom do ustawienia, ruchu i wyglądu.
Żebrowane pole shaderowe
Abstrakcyjna animowana powierzchnia zbudowana wyłącznie z właściwości materiału — odbicia i gradientowe światła przesuwają się po shaderze, imitując falujące, żebrowane pole.
Podejście techniczne
Pięć nawyków, dzięki którym te doświadczenia nie stają się powodem wolnego ładowania strony ani nagrzewania telefonu — rozwijanych przez kolejne projekty i stosowanych od tamtej pory w każdej kategorii pracy.
Za każdym razem cięższe, a jednak za każdym razem lżejsze
01
Optymalizacja modeli zaczyna się w Blenderze, nie w kodzie01Optymalizacja modeli zaczyna się w Blenderze, nie w kodzie
Zmniejszanie liczby wielokątów i rozmiaru tekstur, zanim model trafi do przeglądarki — najtańszy zysk wydajności pojawia się przed napisaniem choćby jednej linii Three.js.
02
Nic nie ładuje się, dopóki nie jest potrzebne02Nic nie ładuje się, dopóki nie jest potrzebne
Ciężkie sceny i modele są ładowane dynamicznie i odroczone do momentu, gdy naprawdę są potrzebne — początkowe ładowanie strony nie płaci za scenę 3D, do której użytkownik jeszcze nie przewinął.
03
Animacje zatrzymują się poza obszarem widoku03Animacje zatrzymują się poza obszarem widoku
Niewidoczna scena nie musi być dalej renderowana. Animacje i pętle renderowania zatrzymują się, gdy sekcja znika z widoku, a sceny są całkowicie wyłączane, gdy karta traci fokus.
04
Wyzwalacze GSAP pozostają blisko tego, co animują04Wyzwalacze GSAP pozostają blisko tego, co animują
Instancje ScrollTrigger są ograniczone do sekcji, do której należą, i aktywują się dopiero, gdy ta sekcja się zbliża — zamiast tworzyć jedną wielką oś czasu dla całej strony.
05
Na mobile scena jest inna, a nie tylko mniejsza05Na mobile scena jest inna, a nie tylko mniejsza
Ciężkie sceny WebGL są na urządzeniach mobilnych zastępowane lżejszymi wersjami lub statycznymi obrazami, zamiast uruchamiać tę samą scenę w niższej jakości — decyzja podejmowana dla każdego projektu osobno, a nie uniwersalny fallback.
Rezultaty
Nie chodzi o metryki — chodzi o rzemiosło
Pięć różnych narracji 3D i motion, z których każda opiera się na innej technice — scenach budujących metaforę, filmowej opowieści podczas przewijania, własnych shaderach i postaci reagującej na przewijanie
Spójny zestaw nawyków związanych z wydajnością — optymalizacja modeli, odroczone ładowanie i zatrzymywanie poza obszarem widoku — rozwijany i udoskonalany w każdym projekcie
Samodzielne eksperymenty z shaderami i cząsteczkami budowane niezależnie od landing page, jako świadome ćwiczenie techniki
Ten sam instynkt strukturalny, który pojawia się w architekturze dashboardów i SaaS, zastosowany również do organizacji i ładowania tych scen