Loading…
3D & motion — interactieve webervaringen
Deze projecten onderzoeken hoe interactieve 3D en WebGL een product- of merkverhaal tastbaar kunnen maken in de browser. Elke ervaring verbindt beweging en visuele effecten aan een specifieke gebruikersreis.
- Rol
- Interactieve web- en WebGL-ontwikkeling — concept, opbouw van 3D-scènes, shaderwerk en GSAP-/scrollchoreografie van begin tot eind voor elk project.
- Stack
- Three.jsReact Three FiberGSAP (ScrollTrigger)GLSL ShadersBlenderLenis
Overzicht
Een camera die een zoeker naar iemands herinneringen wordt, een toetsenbord waarvan elke toets een verspreid hulpmiddel is dat op eenheid wacht, en deeltjes die vervormen omdat het product zelf over transformatie gaat. Dit is een verzameling van dat werk — volledige landingspagina's rond één 3D-idee en kleinere zelfstandige studies die telkens één techniek verkennen.
Statische screenshots doen dit werk geen recht — elke pagina verdient zijn 3D door die rechtstreeks te verbinden met het verhaal dat ze vertelt.
Interface
Vijf verhalen, vijf technieken
Everline — autoverhuurpresentatie
Een filmische reis van ontsteking naar showroom — stap in een cockpit en zie daarna een wagenpark verschijnen onder studiobelichting.
Interface
Vijf verhalen, vijf technieken
Everline — autoverhuurpresentatie
Een filmische reis van ontsteking naar showroom — stap in een cockpit en zie daarna een wagenpark verschijnen onder studiobelichting.
Lab-elementen
Niet elk idee heeft een volledige pagina nodig
Zelfstandige studies — één techniek geïsoleerd en verder uitgewerkt dan een enkele landingspagina zou vragen.
Lab-elementen
Niet elk idee heeft een volledige pagina nodig
Zelfstandige studies — één techniek geïsoleerd en verder uitgewerkt dan een enkele landingspagina zou vragen.
Chromatische glazen steen
Een wolk van deeltjes gevangen in nagebootst chromatisch glas — tweemaal gebroken en afzonderlijk gebloomd, zodat de gloed binnen het silhouet blijft in plaats van naar buiten te lekken.
Deeltjesconfigurator
Tienduizenden GPU-punten, weergegeven als damp of verlichte bollen, die met live bediening veranderen tussen vormen, posities, beweging en uiterlijk.
Geribbeld shaderveld
Een abstract geanimeerd oppervlak dat volledig uit materiaaleigenschappen is opgebouwd — reflecties en verlooplichten bewegen over een shader om een rimpelend, geribbeld veld na te bootsen.
Technische aanpak
Vijf gewoonten die voorkomen dat deze ervaringen een pagina langzaam laten laden of een telefoon heet maken — opgebouwd over meerdere projecten en sindsdien toegepast in elke werkcategorie.
Elke keer zwaarder worden, elke keer lichter worden
01
Modeloptimalisatie begint in Blender, niet in code01Modeloptimalisatie begint in Blender, niet in code
Het aantal polygonen en de textuurgrootte verlagen voordat een model de browser bereikt — de goedkoopste prestatiewinst ontstaat voordat er één regel Three.js is geschreven.
02
Niets wordt geladen voordat het nodig is02Niets wordt geladen voordat het nodig is
Zware scènes en modellen worden dynamisch en uitgesteld geladen tot ze echt nodig zijn — de eerste paginalading betaalt niet voor een 3D-scène waar de gebruiker nog niet naartoe heeft gescrold.
03
Animaties pauzeren buiten de viewport03Animaties pauzeren buiten de viewport
Een scène die niet zichtbaar is, hoeft niet te blijven renderen. Animaties en renderlussen stoppen wanneer een sectie uit beeld scrollt, en scènes worden volledig afgebroken als het tabblad de focus verliest.
04
GSAP-triggers blijven dicht bij wat ze animeren04GSAP-triggers blijven dicht bij wat ze animeren
ScrollTrigger-instanties zijn beperkt tot de sectie waartoe ze behoren en worden pas actief wanneer die sectie dichterbij komt — geen grote tijdlijn die in één keer de hele pagina probeert te beheersen.
05
Mobiel krijgt een andere scène, geen kleinere05Mobiel krijgt een andere scène, geen kleinere
Zware WebGL-scènes worden op mobiel vervangen door lichtere versies of statische afbeeldingen, in plaats van dezelfde scène op lagere kwaliteit te forceren — een beslissing per project, geen algemene fallback.
Resultaten
Geen verhaal over metrics — maar over vakmanschap
Vijf verschillende 3D-/motionverhalen opgeleverd, elk rond een andere techniek — metaforische scènes, filmische scrollverhalen, maatwerk-shaderwerk en een blijvend scrollreactief personage
Een consistente set prestatiegewoonten — modeloptimalisatie, uitgesteld laden en viewportbewust pauzeren — toegepast en verfijnd in elk project
Zelfstandige shader- en deeltjesstudies, onafhankelijk van een landingspagina gebouwd als doelgerichte oefening in techniek
Hetzelfde gevoel voor structuur uit dashboard- en SaaS-architectuur toegepast op de manier waarop deze scènes worden georganiseerd en geladen