Dlaczego miałbym używać Three.js i Pixi.js

Strona przeglądarki to dokument: nagłówki, przyciski, formularze i linki, które robot może odczytać. CSS, GSAP i Framer Motion przenoszą ten dokument. To właściwe narzędzie dla prawie każdej witryny marketingowej, którą dostarczam. Three.js i Pixi.js istnieją do innego zadania: sceny, którą maluje GPU, a nie drzewa elementów div. Zespoły sięgają po nie, gdy DOM traci klatki, gdy obiekt jest jednostką SKU 3D lub gdy dwa tysiące monet muszą pozostać na ekranie przy 60 fps.

Pisałem już, kiedy GSAP i Framer Motion zarabiają na utrzymanie po przekazaniu Figma-to-code. To nie ten artykuł. To wtedy opuściłbym DOM, do czego właściwie służy każda biblioteka, i rachunek, który płacisz w Core Web Vitals, SEO, oraz dostępność, jeśli umieścisz płótno WebGL na firmowym adresie URL.

1. DOM jest dokumentem. Płótno to powierzchnia do rysowania

Każdy węzeł DOM zawiera układ, styl, testowanie trafień i miejsce w drzewie dostępności. Istotą sieci jest ten koszt: wybór tekstu, zakładka formularzy, Google indeksuje nagłówek. Jest to również powód, dla którego tysiąc elementów div z absolutnie ustawionymi pozycjami zaczepi się o telefon średniej klasy. Płótno to bitmapa. Mówisz GPU, co narysować tę ramkę. Nie ma układu duszka. Nie ma również nagłówka dla robota ani nazwy czytnika ekranu, chyba że zbudujesz go obok płótna.

Surowe WebGL (a teraz WebGPU) to kamery, bufory, moduły cieniujące i wywołania rysujące. Możesz to napisać. Większość zespołów produktowych nie powinna. Three.js i Pixi.js otaczają tę powierzchnię wykresem sceny, modułami ładującymi i pulą rekrutacyjną. Płacisz wagą paczki i czarną skrzynką na środku strony. Pytanie nigdy nie brzmi: „czy GPU renderuje się dobrze”. Pytanie brzmi, czy produkt rzeczywiście potrzebuje sceny.

2. Three.js: świat 3D w zakładce

Three.js to silnik 3D dla przeglądarki. Otrzymujesz scenę, kamerę, światła, siatki, materiały i tekstury. Biblioteka rozmawia z WebGL; istnieje renderer WebGPU dla nowszych procesorów graficznych. Ludzie go używają, ponieważ model sofy, kuchni lub turbiny w formacie GLTF jest tańszy w kręceniu w zakładce niż filmowaniu pod każdym kątem, a także dlatego, że kamera, którą można orbitować, jest lepszym narzędziem sprzedaży niż karuzela PNG.

Typowa praca, którą widzę: konfiguratory produktów (kolor, tkanina, dodatki), przewodniki po architekturze, dane naukowe lub finansowe w kosmosie, kabiny WebXR, sceny bohaterów na stronie marki, które muszą przypominać film, którego wciąż można dotknąć. Babylon.js to realna alternatywa z silniejszym edytorem. Three.js wygrało przykłady, odpowiedzi na Stack Overflow i React Three Fibre – w ten sposób połączyłbym scenę z aplikacją Next.js, która już myśli komponentowo.

• Użyj Three.js, gdy obiekt ma głębokość: orbituj, rozbij część, zamień materiał, przejdź się po pokoju.
• Utrzymuj GLTF chudy. Sofa o pojemności 40 MB zabija komórkę. LOD, skompresowane tekstury i obraz plakatu przed uruchomieniem sceny.
• Nie umieszczaj ceny, wezwania do działania ani kasy w obszarze roboczym. HTML obok. Scena sprzedaje obiekt; dokument zamyka transakcję.

3. Pixi.js: 2D przy 60 fps, a nie silnik gry

Pixi.js to renderer 2D. Sprite'y, lista wyświetlania, filtry, systemy cząstek, animacja szkieletu w stylu kręgosłupa. Wsadowo pobiera wywołania z GPU, więc automat do gry, tablica edukacyjna dla dzieci lub mapa z kilkoma tysiącami pinezek nie roztapiają głównego wątku tak, jak zrobiłaby to lista DOM. Ludzie go używają, ponieważ Canvas 2D jest pod tym względem zbyt wolny i ponieważ mają już aplikację internetową - nie chcą przyjmować pełnego środowiska gry tylko po to, aby szybko malować.

Phaser to framework do gry: sceny, fizyka, wejście, dźwięk. Pixi to warstwa pod spodem, jeśli masz już React, routing i autoryzację. Interaktywne reklamy, markowe minigry, pulpity nawigacyjne wyświetlające więcej punktów, niż powinno SVG, oraz interfejsy użytkownika w stylu kasyna to typowe skróty. Jeśli produkt jest prawdziwą grą z poziomami i światem fizyki, zacznij od silnika gry. Jeśli produktem jest aplikacja Next.js, która potrzebuje gorącej sceny 2D w jednej trasie, Pixi jest biblioteką, po którą sięgnę.

• Użyj Pixi, gdy problemem jest liczba i płynność w 2D: cząstki, arkusze ikonek, filtry, scena, która przerysowuje każdą klatkę.
• Atlas duszków. Dziesięć tysięcy luźnych plików PNG zatrzyma ładunek, nawet jeśli GPU będzie później zadowolony.
• Wstrzymaj ticker, gdy karta jest ukryta. Etap Pixi, który tyka w tle, to czekająca na reklamację dotyczącą baterii.

4. Jak wybieram: CSS, GSAP, Pixi, Three

Kosztownym błędem jest użycie silnika 3D do ściemnienia przycisku. Pisałem już, że opowiadanie historii premium scroll należy do GSAP i ScrollTrigger, a stan UI React należy do Framer Motion. Biblioteki te animują węzły pozostające w dokumencie. Three i Pixi tworzą świat, który nie jest dokumentem. Mieszanie ich jest w porządku. Zastąpienie niewłaściwej warstwy oznacza, że ​​strona docelowa wysyła na orbitę bohatera o rozmiarze 800 KB WebGL, którego nikt nie prosił.

• Najechanie kursorem, akordeon, przejście strony, informacja zwrotna z formularza: CSS lub Framer Motion. Pozostań w DOM.
• Przypięte sekcje, wyszorowana oś czasu, przewijanie filmu: GSAP. To wciąż dokument, tylko choreografia.
• Tysiące obiektów 2D, cząstek, scena, która musi utrzymać 60 kl./s: Pixi.js.
• Głębokość, kamera, światła, model, na którym orbitujesz: Three.js. To nie jest automat 2D.

5. Rachunek: życiowe, SEO, 11-letnie, tanie telefony

Kanwa WebGL jest niewidoczna dla robota. Wszystko, co użytkownik musi przeczytać – nazwa produktu, cena, informacje prawne, często zadawane pytania – żyje w formacie HTML na scenie, a nie jest namalowany na teksturze. Napisałem już, jak Podstawowe wskaźniki internetowe wpływają na przychody. Niecierpliwy bohater 3D na stronie głównej to klasyczny cel samobójczy LCP i INP: GLTF walczy z pierwszą farbą, a następnie pętla renderowania kradnie dane wejściowe. Leniwie ładuj scenę, gdy dokument będzie przydatny. Najpierw pokaż nieruchomy plakat. Zniszcz moduł renderujący przy odmontowaniu, w przeciwnym razie wycieknie GPU w nawigacji po stronie klienta.

Dostępność to równoległy interfejs użytkownika, a nie atrybut obszaru roboczego. Orbita klawiatury, tekstowa alternatywa dla modelu, zredukowany ruch, który zatrzymuje pętlę. Tani Android będzie ograniczał termicznie zajęty moduł cieniujący fragmenty. Ogranicz współczynnik pikseli, oferuj rezerwę „zdjęć 2D” i nie twórz jedynej ścieżki do jednostki SKU w kontekście WebGL, który nie został zainicjowany.

6. Next.js: wyspa klienta, a nie komponent serwera

Na serwerze nie ma WebGL. Scena jest komponentem klienta, załadowanym next/dynamic i ssr: false, za plakatem lub szkieletem. React Three Fibre, jeśli rest aplikacji to React. @pixi/react, jeśli scena musi komunikować się z tym samym drzewem stanu. Nie wysyłałbym płótna „za SEO”: robot nadal widzi pustą bitmapę. Umieść kopię w renderowanym przez serwer kodzie HTML. Pozwól wyspie uruchomić się, gdy użytkownik będzie gotowy do zabawy z obiektem.

Wniosek: wybierz powierzchnię pasującą do obiektu

Zespoły używają Three.js, ponieważ jednostka SKU 3D sprzedaje się lepiej, gdy klient może ją orbitować. Używają Pixi.js, ponieważ dwa tysiące sprite'ów przy 60 fps nie przetrwają jako div. Żadna biblioteka nie zastępuje CSS, GSAP ani szybkiego dokumentu. Jeśli założenie brzmi: „spraw, aby było to coś premium”, zaczynam od ruchu w DOM. Jeśli założenie brzmi: „zakręć kuchnią” lub „trzymaj monety na ekranie”, celowo opuszczam DOM, izoluję płótno i przechowuję kopię potrzebną Google i czytnikowi ekranu w formacie HTML. Robię to jako starszy inżynier sieciowy: Next.js wyspy, leniwe WebGL, GSAP, gdzie strona jest nadal stroną. Wpisz przez formularz liczbę obiektów, czy jest to 2D czy 3D i czy ten sam adres URL ma mieć rangę. Nie zaczniemy od upuszczenia płótna na stronę główną „aby wyglądać nowocześnie”.