Czym jest WebGL? Jak symulacje 3D działają w Twojej przeglądarce

Krótka odpowiedź

Twój GPU — układ graficzny — to masowo równoległy komputer, do którego przeglądarka ma bezpośredni dostęp poprzez znormalizowane API o nazwie WebGL. Symulacje na tej stronie oddają obliczenia fizyczne i rysowanie pikseli GPU, który jest setki razy szybszy w tego typu pracy niż CPU wykonujący Twój JavaScript.

Nie zauważasz tego przejścia. Otwierasz kartę, symulacja startuje. Ale za kulisami Twoja przeglądarka skompilowała małe programy nazywane shaderami, wysłała tysiące liczb do dedykowanej pamięci GPU i weszła w pętlę odpalającą się 60 razy na sekundę.

CPU vs GPU — jaka jest różnica?

CPU (główny procesor) jest zoptymalizowany do szybkich, sekwencyjnych zadań — wykonywania jednej złożonej instrukcji po drugiej. Nowoczesny CPU ma 8–24 rdzenie.

GPU jest zoptymalizowany do wykonywania wielu prostych zadań równolegle. Typowy GPU laptopa ma 1000–4000 rdzeni. Każdy rdzeń jest wolniejszy niż rdzeń CPU, ale gdy trzeba wykonać to samo obliczenie dla tysięcy cząstek jednocześnie — zaktualizować ich pozycje, sprawdzić kolizje, obliczyć kolory — GPU wygrywa z ogromnym marginesem.

Potok WebGL

Każda klatka symulacji 3D przechodzi przez tę samą sekwencję kroków. Oto, co dzieje się między „JavaScript aktualizuje fizykę" a „fotony opuszczają Twój ekran":

1. 1
   JavaScript wysyła dane
   Pozycje, kolory i rozmiary cząstek są pakowane w typowane tablice (Float32Array) i wysyłane do pamięci GPU (VRAM) za pomocą wywołań buforów WebGL.
2. 2
   Vertex shader — raz na punkt
   Mały program (kod GLSL) działa na każdej cząstce jednocześnie. Przekształca 3D współrzędne świata na 2D współrzędne ekranu przy użyciu algebry macierzy.
3. 3
   Rasteryzacja — z 3D na piksele
   GPU ustala, które piksele ekranu pokrywa każdy trójkąt lub punkt. Ten krok jest w pełni automatyczny i zachodzi w dedykowanym sprzęcie o stałej funkcji.
4. 4
   Fragment shader — raz na piksel
   Kolejny program GLSL decyduje o ostatecznym kolorze każdego piksela — oświetlenie, tekstura, przezroczystość, efekty poświaty. Wszystko zachodzi jednocześnie na tysiącach pikseli.
5. 5
   Klatka zamieniona na ekranie
   Ukończona klatka jest wyświetlana. requestAnimationFrame wywołuje pętlę ponownie — idealnie 60 razy na sekundę, zsynchronizowane z częstotliwością odświeżania monitora.

Czym jest shader?

Shader to mały program napisany w GLSL (Graphics Library Shading Language), który działa bezpośrednio na GPU. Shadery nie mają console.log, pętli po tablicach ani sposobu komunikacji między równoległymi instancjami — każda z nich przetwarza swój własny punkt danych w całkowitej izolacji.

To ograniczenie sprawia, że są szybkie. GPU może uruchomić 4000 instancji fragment shadera jednocześnie, bo nie dzielą one między sobą żadnego stanu.

Three.js — WebGL bez złożoności

Surowy WebGL wymaga ręcznego napisania całego potoku. Większość symulacji na tej stronie korzysta z Three.js, biblioteki JavaScript, która obsługuje szablonowy kod — kamerę, graf sceny, pomocnicze funkcje geometrii, wbudowane materiały — jednocześnie pozwalając pisać własne shadery, gdy są potrzebne.

Prostsze symulacje 2D (automaty komórkowe, dyfuzja, niektóre symulacje fal) używają zamiast tego Canvas 2D API — wolniejszego, ale prostszego API do rysowania dla przypadków, które nie potrzebują pełnego potoku GPU.

Wypróbuj: symulacje pokazujące GPU w akcji

• Galaktyka — 80 000 gwiazd renderowanych przy pomocy InstancedMesh: jedno wywołanie rysowania
• Reakcja-dyfuzja — bufory ramek ping-pong; GPU oblicza następny stan siatki miliona pikseli
• Ray marching — każdy piksel obliczany całkowicie w fragment shaderze, bez jakiejkolwiek geometrii
• Boids — 5000 agentów-ptaków, hasz przestrzenny na CPU, renderowanie instancjonowane na GPU