Do swojego zestawu narzędzi dodałem 3D w przeglądarce. Pierwszym efektem jest Studio 3D: produkt, który klient obraca palcem, przebiera w kolory i stawia u siebie w pokoju. Całość działa na WebGL, czyli na technologii, którą przeglądarki znają od lat. Przy okazji sprawdziłem, co daje jej następca, WebGPU. Poniżej działa na żywo demo, w którym karta graficzna w każdej klatce przesuwa ćwierć miliona drobinek kawy.

Przesuń kursorem przez strumień. Przyciskami w lewym górnym rogu zmienisz liczbę drobinek, aż do miliona. Otwórz demo na pełnym ekranie albo zobacz ten sam kod w trybie zapasowym WebGL 2.

Najpierw WebGL, czyli skąd 3D w przeglądarce

WebGL to sposób, w jaki strona od lat rysuje grafikę 3D kartą graficzną. Opiera się na OpenGL ES, standardzie projektowanym jeszcze z myślą o telefonach sprzed kilkunastu lat, i nikt nie planuje już jego kolejnych wersji[1]. Za to działa praktycznie wszędzie: WebGL 2 obsługuje dziś około 96% przeglądarek na świecie[3]. Na nim stoi większość stron z efektami 3D, także moje studio produktu i scena kawy.

WebGL ma jedno zasadnicze ograniczenie: karta graficzna w nim przede wszystkim rysuje. Jeśli coś trzeba policzyć, na przykład gdzie w następnej klatce znajdzie się każda z tysięcy cząstek, zwykle robi to procesor, w JavaScripcie, a potem przesyła wynik do karty. Da się to obejść sztuczkami, w których dane udają obrazek i karta "rysuje" wyniki obliczeń, ale to obejście, nie narzędzie stworzone do tej pracy.

Czym jest WebGPU

WebGPU to następca WebGL, nowy standard dostępu strony do karty graficznej, opisany przez W3C[8]. Zamiast starego OpenGL korzysta z tego, na czym dziś pracują same systemy: Direct3D 12 w Windowsie, Metal u Apple i Vulkan[1]. Ma własny język programów dla karty, WGSL, zaprojektowany tak, żeby był bezpieczny w przeglądarce[5].

Najważniejsza różnica jest jednak inna. WebGPU ma pełnoprawne obliczenia na karcie graficznej, tak zwane shadery obliczeniowe (compute shaders)[1]. Apple w ogłoszeniu dla Safari pisze wprost, że pozwalają na ogólne obliczenia na GPU, czego wcześniej w WebGL nie dało się zrobić[5]. Karta przestaje być tylko "rysownikiem". Może też liczyć: fizykę, symulacje, przetwarzanie danych, a nawet modele sztucznej inteligencji uruchamiane w przeglądarce.

Jedna uwaga praktyczna: WebGPU działa wyłącznie na stronach z HTTPS[1]. W 2026 roku każda porządna strona i tak powinna je mieć.

Rysowanie a liczenie: co widać w demie

W strumieniu kawy na górze jest domyślnie 250 000 drobinek. Każda ma swoje położenie i prędkość, na każdą działają wiry w strumieniu, przyciąganie do jego środka i kursor, który rozpycha je na boki. Przy 60 klatkach na sekundę daje to 15 milionów przeliczeń ruchu w każdej sekundzie.

W klasycznym podejściu wszystkie te obliczenia robiłby procesor, w pętli, drobinka po drobince, a potem wysyłał nowe położenia do karty. W WebGPU położenia i prędkości w ogóle nie opuszczają pamięci karty graficznej. Procesor w każdej klatce wysyła tylko jedno polecenie: "policz następny krok". Karta liczy go dla wszystkich drobinek naraz, równolegle, i od razu je rysuje. Właśnie dlatego da się tam przełączyć na milion drobinek.

Gdzie WebGPU już działa

  • Chrome i Edge: od wersji 113 z 2023 roku, najpierw na Windowsie, macOS i ChromeOS, później na Androidzie[4].
  • Safari: od wersji 26 z września 2025 roku, na komputerach Mac, iPhone'ach i iPadach[5].
  • Firefox: od wersji 141 z lipca 2025 roku na Windowsie. Mozilla zapowiada kolejno macOS, Linuksa i Androida[6].

Razem to około 87% przeglądarek na świecie[2]. Brzmi dobrze, ale oznacza też, że mniej więcej co ósma osoba WebGPU jeszcze nie ma. Strona musi to przewidzieć.

Tryb zapasowy: jak nie zgubić reszty odwiedzających

Swoje sceny piszę w three.js, najpopularniejszej bibliotece do 3D w przeglądarce. Jej renderer WebGPU sam sprawdza, czy przeglądarka ma WebGPU, a jeśli nie, przełącza się na WebGL 2[7]. Programy dla karty piszę w nim w TSL, języku three.js, który biblioteka sama tłumaczy na WGSL dla WebGPU albo na GLSL dla WebGL 2[7]. Jeden kod działa więc w obu światach.

W demie widać to uczciwie: w lewym górnym rogu jest napisane, czy strumień liczy WebGPU, czy tryb zapasowy. W trybie zapasowym pokazuję 100 tysięcy drobinek zamiast ćwierć miliona, bo starsza droga jest wolniejsza. Nikt nie dostaje pustego ekranu.

Dlaczego studio produktu nadal działa na WebGL

Skoro WebGPU jest nowsze, to czemu nie wszystko na nim? Bo przejście nie polega na przestawieniu jednego przełącznika. W studiu i w scenie kawy dopisałem własne efekty do materiałów three.js: kontur i rant szkła, rozmycie tła widzianego przez szklankę, parę nad kawą, cień pod nogami mebla. Renderer WebGPU nie obsługuje takich dopisków do materiałów, trzeba je przepisać na TSL[7].

Przy scenie z kilkoma obiektami, jak szklanka na stole albo sofa w studiu, WebGPU nie da różnicy, którą ktoś zobaczy. Zyski pojawiają się tam, gdzie karta ma dużo do policzenia, więc produkt 3D zostaje na sprawdzonym WebGL, który działa u 96% odwiedzających, a WebGPU pokazuję tam, gdzie naprawdę robi różnicę.

Kiedy WebGPU ma sens na stronie

  • Efekty z tysiącami ruchomych elementów: cząstki, dym, płyny, tłum obiektów, które reagują na kursor.
  • Symulacje: tkanina, woda, fizyka, które mają działać płynnie na żywo, a nie jako nagrany film.
  • Duże dane na mapie albo wykresie: setki tysięcy punktów, które da się przybliżać i filtrować bez przycinania.
  • Sztuczna inteligencja w przeglądarce: modele, które działają u odwiedzającego, bez wysyłania jego danych na serwer.

Do zwykłej karty produktu 3D, z obracaniem, zmianą koloru i AR, dziś w zupełności wystarczy WebGL. Tak zbudowane jest Studio 3D. Możesz tam przeciągnąć własny model .glb i zobaczyć go od razu w tym samym świetle.

Wszystkie moje eksperymenty z 3D, płynami i fizyką, także ten strumień, zebrałem w laboratorium. Możesz tam pomieszać kawę łyżeczką, pobawić się falami na wodzie albo nalać kawę do szklanki.

Chcesz produkt 3D albo animację na swojej stronie? Napisz. Powiem wprost, czy wystarczy WebGL, czy warto sięgnąć po WebGPU, i zrobię to tak, żeby zadziałało u każdego odwiedzającego.

Źródła

  1. MDN Web Docs, "WebGPU API"
  2. Can I use, "WebGPU"
  3. Can I use, "WebGL 2.0"
  4. Chrome for Developers, "Chrome ships WebGPU"
  5. WebKit, "WebKit Features in Safari 26.0"
  6. Mozilla Gfx Team Blog, "Shipping WebGPU on Windows in Firefox 141"
  7. three.js, "WebGPURenderer"
  8. W3C, "WebGPU" - specyfikacja