Friedrich Siever

23. Dezember 2023

Grid To Fullscreen Motion mit WebGL

  • gsap
  • WebGL
  • OGL
  • Serverless
  • astro.io
title screenshot

Projektbeschreibung

In meinem fortlaufenden und noch andauernden Projekt erforsche ich die vielfältigen Anwendungsmöglichkeiten von WebGL-Shadern im Browser. Besonderes Augenmerk liegt dabei auf dem möglichen Einsatz auf kommerziellen Websites, die noch ausreichend Performance für das Ranking bei umkämpften Keywords bieten, unter Berücksichtigung von WebVitals.

Im ersten Schritt geht es also nicht darum einen Webaward zu gewinnen. Aber wer weiß, vielleicht baue ich das hier aus ;-).

Herausforderungen

Mein Fokus liegt zunächst auf der Umsetzung von ausgefallenen Bildeffekten, wie sie auf zahlreichen Seiten bei Awwwards zu finden sind. Dabei stehen die Beobachtung der Bundle Sizes und der Core Web Vitals im Vordergrund. Das Projekt beinhaltet auch die Erkundung von Shadern für komplexe, organisch wirkende Effekte, die mit dem herkömmlichen CSS Box Model schwer umsetzbar sind und Websites aus der Masse herausstrahlen lassen. Um eine optimale Balance zwischen geringen Dateigrößen, schneller Entwicklungsgeschwindigkeit und der Möglichkeit zur Erweiterung in echte 3D-Welten zu finden, habe ich mich gegen Three.js und Pixi.js entschieden und setze stattdessen auf OGL.

Rollen

  • Chef meiner eigenen Design-Studie

Zur Live Page