WebWorkers Attractors w Three.js
Przypomnienie dawnej aplikacji WebWorkers Attractors. W tym projekcie połączyłam Three.js z Web Workers, aby pokazać, jak można wykonywać kosztowne obliczenia symulacji w tle, bez blokowania interfejsu użytkownika.
W świecie aplikacji 3D w przeglądarce największym wrogiem płynności bardzo często nie jest samo renderowanie, ale logika, która musi zostać wykonana przed każdą klatką. Jeśli scena zawiera dużą liczbę obiektów, a ich ruch zależy od kosztownych obliczeń, łatwo doprowadzić do spadków FPS i "przycinania" interfejsu. Właśnie w takich przypadkach świetnie sprawdza się połączenie Three.js z Web Workers, które pozwala przenieść część pracy poza główny wątek przeglądarki.
WebWorkers Attractors to demonstracja 3D oparta o ideę atraktorów, czyli układów dynamicznych, w których wiele punktów porusza się zgodnie z określonymi równaniami matematycznymi. W tej aplikacji wizualizowane są atraktory Lorenza i Rösslera, które należą do klasycznych przykładów układów chaotycznych i świetnie nadają się do tworzenia efektownych, organicznych trajektorii w przestrzeni 3D.
Rdzeniem aplikacji jest współpraca dwóch środowisk: głównego wątku oraz workera. Główny wątek odpowiada za tworzenie sceny Three.js, kamerę, renderer, obsługę użytkownika i aktualizację widoku, natomiast Web Worker wykonuje kosztowne obliczenia związane z ruchem obiektów, np. wyznaczanie kolejnych punktów trajektorii atraktorów Lorenza i Rösslera.
Mechanizm komunikacji jest prosty: główny wątek wysyła dane do workera metodą postMessage(), worker przetwarza je w tle, a następnie odsyła wynik. Web Workers działają w osobnym kontekście wykonania i nie mają dostępu do DOM, dlatego nie mogą bezpośrednio manipulować interfejsem - zamiast tego wymieniają dane z główną stroną komunikatami.
Praktycznie oznacza to, że:
- scenę i obiekty inicjalizuje Three.js,
- worker liczy kolejne stany symulacji,
- główny wątek aktualizuje geometrię lub transformacje,
- renderer wyświetla wynik na ekranie.