WebGL

WebGL: grafika 3D i interaktywne animacje bez instalowania aplikacji

WebGL (Web Graphics Library) to otwarty standard grafiki dla przeglądarek, rozwijany przez konsorcjum Khronos Group, w którego grupie roboczej są m.in. Apple, Google, Microsoft i Mozilla. Pozwala rysować w elemencie canvas sceny 3D i efekty 2D liczone przez kartę graficzną (GPU), bez wtyczek i bez instalowania aplikacji. WebGL na stronie działa w Chrome, Edge, Firefoksie i Safari, na komputerach i telefonach – o ile urządzenie ma odpowiednią obsługę sprzętową. Obecna wersja, WebGL 2.0, odpowiada możliwościom OpenGL ES 3.0.

Korzystamy z niego także u siebie: nagłówek strony głównej G2 TEAM to slajder napisany w bibliotece three.js na WebGL. Zdjęcia są w nim teksturami, a płynne przejście między nimi liczy shader – mały program wykonywany na karcie graficznej – na podstawie mapy przemieszczeń (displacement map).

WebGL, WebGPU i biblioteki w 2026 roku

Następcą WebGL jest WebGPU – nowszy interfejs programistyczny, który korzysta z Direct3D 12, Metal i Vulkan, daje dostęp do obliczeń na GPU (compute shaders) i mniej obciąża procesor przy scenach z wieloma obiektami. Według MDN dla OpenGL, a więc i dla WebGL, nie planuje się już nowych funkcji. WebGPU działa domyślnie w Chrome i Edge na Windows i macOS od wersji 113, w Chrome na wielu telefonach z Androidem 12 i nowszym, w Safari 26 (macOS, iOS, iPadOS, visionOS) oraz w Firefoksie na Windows i na Macach z procesorami Apple. Według stanu z października 2026 r. Firefox na Linuksie i Androidzie oraz część urządzeń z Androidem i Linuksem wciąż czekają na pełną obsługę, a MDN oznacza WebGPU jako funkcję o ograniczonej dostępności. Dlatego w projektach dla szerokiej publiczności podstawą pozostaje WebGL 2, a WebGPU traktujemy jako rozszerzenie z automatycznym powrotem do WebGL.

Rzadko piszemy kod bezpośrednio w WebGL – zwykle korzystamy z bibliotek:

• three.js (licencja MIT) – biblioteka do scen 3D i efektów. Nowy WebGPURenderer używa WebGPU, a gdy przeglądarka go nie obsługuje, przełącza się na WebGL 2. Materiały pisze się w nim w języku TSL, z którego powstają shadery WGSL lub GLSL. Własne shadery GLSL trzeba przy migracji przepisać na TSL, a dotychczasowy WebGLRenderer jest nadal utrzymywany i zalecany dla aplikacji opartych wyłącznie na WebGL 2.
• Babylon.js (licencja Apache 2.0, rozwijany w Microsoft) – silnik 3D z fizyką i edytorami wizualnymi. Wersja 9.0 z marca 2026 r. obsługuje WebGPU i WebGL 2 oraz sceny Gaussian splatting, czyli przestrzenie odtworzone ze zdjęć jako zbiór półprzezroczystych, rozmytych elips.
• PlayCanvas (licencja MIT) – silnik z obsługą WebGL 2 i WebGPU, z wczytywaniem modeli glTF i scen Gaussian splatting.
• React Three Fiber – pozwala budować sceny three.js jako komponenty React, co upraszcza osadzanie ich w aplikacjach na React i Next.js.
• MapLibre GL JS – biblioteka map wektorowych renderowanych w WebGL, np. do mapy inwestycji i jej okolicy.

Modele przekazujemy przeglądarce w formacie glTF 2.0 – otwartym standardzie Khronos Group, zatwierdzonym jako norma ISO/IEC 12113:2022. Geometrię kompresujemy (Draco lub meshopt), a tekstury zapisujemy w formacie KTX 2.0 z kompresją Basis Universal, który przeglądarka zamienia na formaty skompresowane obsługiwane przez kartę graficzną – zajmują one mniej pamięci niż zwykłe obrazy.

Gdzie WebGL ma sens w biznesie

• Konfiguratory produktów – meble, okna, maszyny czy pojazdy: klient obraca model, zmienia warianty i kolory, a wybrana konfiguracja trafia do zapytania ofertowego i CRM-u.
• Wybór mieszkania w budynku 3D – kupujący wskazuje piętro i lokal na modelu inwestycji, a status (wolne, zarezerwowane, sprzedane) pochodzi z bazy lub CRM-u. Łączymy to z wizualizacjami 3D i stronami internetowymi dla deweloperów.
• Prezentacje techniczne – przekroje urządzeń, animacje działania, rozkładanie produktu na części.
• Nagłówki i efekty wizualne – przejścia między zdjęciami, cząsteczki, reakcje na ruch kursora, jak w naszym slajderze.
• Mapy i wizualizacje danych – mapy wektorowe i wykresy z dużą liczbą punktów, które przeciążyłyby zwykłą grafikę SVG.
• Wirtualne spacery – panoramy 360° oraz wnętrza odtworzone ze zdjęć w technice Gaussian splatting.

WebGL w projektach G2 TEAM

Sceny 3D osadzamy w stronach na Next.js, Astro i WordPressie jako osobny moduł, który nie blokuje wczytywania reszty strony. Typowy zestaw to three.js (w projektach React przez React Three Fiber), modele glTF przygotowane z plików 3D lub z naszych wizualizacji, dane z API albo CMS-a oraz interfejs wokół sceny zaprojektowany w Figmie. Z modeli tworzonych do renderingu zdjęć usuwamy zbędne detale, upraszczamy geometrię i „wypalamy” oświetlenie w tekstury (baking), żeby scena działała płynnie także na telefonie.

Wydajność, dostępność i SEO sceny 3D

Scena WebGL obciąża urządzenie, dlatego planujemy ją z budżetem: rozmiar modeli i tekstur, liczba wywołań rysowania (draw calls), maksymalna rozdzielczość renderowania na ekranach o dużej gęstości pikseli. Scenę wczytujemy dopiero wtedy, gdy jest potrzebna, wstrzymujemy renderowanie, gdy zniknie z ekranu, i obsługujemy utratę kontekstu WebGL, po której scenę trzeba odtworzyć.

Zawartość elementu canvas to piksele, a nie tekst – nie odczyta jej czytnik ekranu ani robot wyszukiwarki. Nazwy, ceny, opisy i przyciski zostają więc w HTML obok sceny, sterowanie działa z klawiatury, a osoby z włączonym w systemie ograniczeniem animacji (prefers-reduced-motion) dostają wersję bez ruchu. Na urządzeniach bez WebGL wyświetlamy zdjęcie lub wideo.

WebGL a inne sposoby pokazania produktu

Od pomysłu do sceny 3D – nasz proces

1. Scenariusz i urządzenia – ustalamy, co użytkownik ma zrobić (wybrać lokal, skonfigurować produkt, obejrzeć detal), na jakich urządzeniach i z jakim budżetem wydajności.
2. Prototyp – szybka wersja sceny testowana na prawdziwych telefonach, równolegle projekt interfejsu w Figmie.
3. Przygotowanie modeli – optymalizacja geometrii, wypalanie oświetlenia, eksport do glTF (np. z Blendera, który ma ten eksport wbudowany), kompresja Draco lub meshopt i tekstury KTX 2.0.
4. Programowanie – scena w three.js lub Babylon.js, shadery, połączenie z danymi (API, CMS, CRM) i wersja zastępcza bez WebGL.
5. Testy i wdrożenie – Android, iOS, Safari i Firefox, pomiar liczby klatek na sekundę i zużycia pamięci, wpływ na Core Web Vitals, a po starcie monitoring błędów.

WebGL – pytania i odpowiedzi

Czy WebGL działa na telefonach?

Tak. WebGL obsługują wszystkie współczesne przeglądarki mobilne, ale płynność zależy od karty graficznej telefonu. Dlatego testujemy scenę także na starszych i tańszych modelach, a na słabszych urządzeniach zmniejszamy rozdzielczość renderowania lub liczbę efektów.

Czy nowy projekt warto od razu pisać w WebGPU?

W projekcie na three.js warto to rozważyć, bo WebGPURenderer sam przełączy się na WebGL 2 tam, gdzie WebGPU nie ma. Trzeba jednak pamiętać, że twórcy three.js wciąż określają ten renderer jako eksperymentalny, a w niektórych scenach starszy WebGLRenderer działa wydajniej. Istniejące projekty migrujemy wtedy, gdy potrzebne są funkcje dostępne tylko w nowym rendererze.

Czy scena 3D spowolni stronę?

Może, jeśli ładuje się od razu i w pełnej jakości. Dlatego najpierw wyświetlamy treść HTML i obraz zastępczy, a scenę i modele dociągamy później, w wersjach dopasowanych do urządzenia. Wpływ na Core Web Vitals sprawdzamy przed publikacją.

Czy możemy wykorzystać istniejące modele i wizualizacje?

Tak, choć zwykle wymagają przygotowania. Modele tworzone do renderingu zdjęć mają zbyt szczegółową geometrię i ciężkie materiały, więc je upraszczamy i eksportujemy do glTF. Gotowe rendery mogą posłużyć jako tła, panoramy lub obrazy zastępcze dla urządzeń bez WebGL.

Wycena sceny 3D

Do wyceny potrzebujemy trzech informacji: co ma zobaczyć i zrobić użytkownik, na jakich urządzeniach oraz jakie materiały już masz – modele, rysunki, wizualizacje. Wpisz je w formularzu „Zapytaj o ofertę” poniżej. Jeśli okaże się, że cel lepiej spełni dobrze przygotowane wideo niż interaktywna scena, też to powiemy.