Zastosowania WASM: przetwarzanie obrazów i obliczenia

Standardowy potok przetwarzania obrazów z użyciem WASM obejmuje pobranie obiektu ImageData z kanwy, konwersję jego danych pikseli do tablicy typowanej (Uint8Array), skopiowanie ich do pamięci liniowej WASM, wywołanie funkcji WASM w celu zastosowania filtra, skopiowanie wyniku z powrotem oraz użycie putImageData() do wyświetlenia przetworzonego obrazu na kanwie.

Porównania benchmarków konsekwentnie pokazują, że implementacje filtrów skali szarości i rozmycia w WASM są 5–10 razy szybsze niż odpowiadające im implementacje w JavaScript. W przypadku obrazu o rozmiarze 4000 × 3000 pikseli filtr skali szarości w JavaScript może działać przez 80 ms, podczas gdy wersja Rust WASM kończy działanie w czasie krótszym niż 10 ms. Różnica ta jest odczuwalna dla użytkowników podczas edycji w czasie rzeczywistym.

Przetwarzanie dźwięku w czasie rzeczywistym wykorzystuje AudioWorklet z Web Audio API, który działa w dedykowanym wątku audio niezależnym od głównego wątku. WASM może działać wewnątrz AudioWorklet i zapewniać efekty dźwiękowe o wydajności zbliżonej do natywnej (pogłos, kompresja, korekcja). Dzięki temu ścieżka audio całkowicie omija React — React obsługuje jedynie elementy interfejsu sterujące parametrami dźwięku.

Papa Parse dobrze radzi sobie z analizowaniem plików CSV w JavaScript w przypadku małych i średnich plików, ale dla plików zawierających miliony wierszy parser CSV napisany w Rust i skompilowany do WASM jest znacznie szybszy. Parser WASM przetwarza surową tablicę bajtów, wykonuje filtrowanie i transformację w Rust, a następnie zwraca do JavaScriptu wyłącznie przetworzony wynik, unikając tworzenia milionów pośrednich obiektów JavaScript.

W przypadku szybkiego wyszukiwania pełnotekstowego w dużych dokumentach (plikach dzienników, bazach kodu, dużych zbiorach danych) silnik wyrażeń regularnych Rust skompilowany do WASM zapewnia wydajność wyszukiwania zbliżoną do natywnej. Biblioteki takie jak pakiet Rust regex, skompilowany do WASM, mogą przeszukiwać miliony wierszy w ciągu milisekund. React renderuje wyniki wyszukiwania, a WASM wykonuje samo wyszukiwanie.

Kryptograficzne funkcje skrótu (SHA-256, SHA-512) oraz szyfrowanie symetryczne (AES) zaimplementowane w Rust WASM zapewniają deterministyczną i szybką wydajność niezależną od optymalizacji silnika JavaScript. W aplikacjach wykonujących szyfrowanie po stronie klienta (komunikatorach z szyfrowaniem end-to-end, wyprowadzaniu kluczy na podstawie haseł za pomocą Argon2) biblioteki kryptograficzne oparte na WASM znacznie przewyższają wydajnością implementacje w czystym JavaScript.

Silnik fizyki Rapier (rapier.rs) jest napisany w Rust i skompilowany do WASM, dzięki czemu może być używany w grach przeglądarkowych i interaktywnych symulacjach. React renderuje interfejs gry i panele stanu, a moduł Rapier WASM uruchamia symulację fizyki w każdej klatce. Ten wzorzec wyraźnie oddziela zagadnienia interfejsu od zagadnień silnika gry.

Z perspektywy React funkcje WASM są czystymi funkcjami obliczeniowymi: przyjmują dane wejściowe i zwracają wyniki. React je wywołuje, otrzymuje wyniki i aktualizuje stan: const result = await runWasm(inputData); setState(result). Następnie React ponownie renderuje interfejs, aby wyświetlić wyniki. To wyraźne rozdzielenie sprawia, że kod komponentów pozostaje prosty niezależnie od złożoności obliczeń.

Synchroniczne wykonywanie obliczeń WASM w głównym wątku React blokuje przeglądarkę: do czasu zakończenia obliczeń nie są aktualizowane elementy interfejsu, obsługiwane zdarzenia ani odtwarzane animacje. Każdą operację WASM trwającą dłużej niż 16 ms (jedna klatka przy 60fps) należy przenieść do Web Workera. React komunikuje się z Workerem za pomocą komunikatów i aktualizuje stan po otrzymaniu wyników.

Podczas przekazywania dużych tablic między JavaScriptem a WASM należy w miarę możliwości unikać kopiowania. Należy uzyskać bezpośredni dostęp do pamięci liniowej WASM za pośrednictwem bufora ArrayBuffer memory.buffer, zapisać dane wejściowe za pomocą widoków tablic typowanych (new Uint8Array(wasmMemory.buffer, offset, length)), wywołać funkcję WASM i odczytać wyniki z tego samego bufora. Ten wzorzec bez kopiowania ma kluczowe znaczenie w przypadku dużych buforów obrazów i dźwięku.

Algorytmy kompresji Brotli i Zstd skompilowane do WASM zapewniają szybką kompresję po stronie klienta. Przykładowe zastosowania w aplikacjach React to kompresowanie dużych ładunków JSON przed przesłaniem w celu oszczędzania przepustowości, dekompresowanie binarnych formatów danych z serwera na potrzeby renderowania oraz tworzenie rozbudowanych aplikacji działających offline, które przechowują skompresowane dane w IndexedDB.

Dlaczego długotrwałe obliczenia WASM należy przenieść do Web Workera?

WASM świetnie sprawdza się przy modyfikowaniu pikseli (filtry obrazów działają 5–10 razy szybciej niż w JS), obsłudze dźwięku w AudioWorklets, parsowaniu dużych plików CSV i tekstu, operacjach kryptograficznych oraz symulacjach fizycznych. Wzorzec React jest prosty: React wywołuje WASM jako czystą funkcję obliczeniową i renderuje wyniki. Obliczenia trwające dłużej niż 16 ms należy zawsze uruchamiać w Web Workerze, aby nie blokować głównego wątku. W przypadku przesyłania dużych ilości danych warto stosować techniki bez kopiowania (shared ArrayBuffer), aby ograniczyć narzut.