Proč bych používal Three.js a Pixi.js

Stránka prohlížeče je dokument: nadpisy, tlačítka, formuláře, odkazy, které může prohledávač číst. CSS, GSAP a Framer Motion přesunout tento dokument. To je ten správný nástroj pro téměř každý marketingový web, který dodávám. Three.js a Pixi.js existují pro druhou práci: scénu, kterou GPU maluje, ne strom divů. Týmy po nich sahají, když DOM vypadává snímky, když je objekt 3D SKU, nebo když dva tisíce coinů musí zůstat na obrazovce při 60 fps.

Už jsem psal, kdy si GSAP a Framer Motion vydělávají na Figma-to-code handoff. Tohle není ten článek. To je, když bych opustil DOM, k čemu každá knihovna vlastně je, a účet, který zaplatíte v Core Web Vitals, SEO, a dostupnost, pokud na firemní URL umístíte WebGL plátno.

1. DOM je dokument. Plátno je kreslicí plocha

Každý uzel DOM nese rozložení, styl, testování přístupů a místo ve stromu přístupnosti. Tato cena je smyslem webu: vybírá text, karta formuláře, Google indexuje nadpis. To je také důvod, proč se na telefonu střední třídy zapojí tisíc absolutně umístěných divů. Plátno je bitmapa. Řeknete GPU, co má tento rámeček nakreslit. Pro skřítka není žádné rozvržení. Neexistuje také žádný nadpis pro prohledávač a žádný název pro čtečku obrazovky, pokud jej nepostavíte vedle plátna.

Raw WebGL (a nyní WebGPU) jsou kamery, vyrovnávací paměti, shadery a volání kreslení. Můžete to napsat. Většina produktových týmů by neměla. Three.js a Pixi.js obalují tento povrch do grafu scény, nakladačů a fondu náborů. Platíte hmotností balíčku a černým rámečkem uprostřed stránky. Otázka nikdy nezní „je GPU vykreslování cool“. Otázkou je, zda produkt skutečně potřebuje scénu.

2. Three.js: 3D svět v záložce

Three.js je 3D engine pro prohlížeč. Získáte scénu, kameru, světla, sítě, materiály a textury. Knihovna mluví s WebGL; pro novější GPU existuje vykreslovací modul WebGPU. Lidé to používají, protože GLTF model pohovky, kuchyně nebo turbíny je levnější točit v záložce než natáčet každý úhel, a protože kamera, kterou můžete obíhat, je lepší prodejní nástroj než kolotoč PNG.

Typickou práci, kterou vidím: produktové konfigurátory (barva, látka, doplňky), návody k architektuře, vědecká nebo finanční data ve vesmíru, stánky WebXR, hrdinské scény na stránkách značky, které musí působit jako film, na který se stále můžete dotknout. Babylon.js je skutečnou alternativou se silnějším editorem. Three.js zvítězil v příkladech, odpovídá Stack Overflow a React Three Fiber – což je způsob, jakým bych scénu zapojil do Next.js aplikace, která již myslí na komponenty.

• Použijte Three.js, když má objekt hloubku: obíhat, explodovat část, vyměnit materiál, projít místnost.
• Udržujte GLTF štíhlý. 40 MB pohovka zabíjí mobil. LOD, komprimované textury a obrázek plakátu před spuštěním scény.
• Neuvádějte na plátno cenu, CTA ani pokladnu. HTML vedle něj. Scéna prodává předmět; dokument uzavírá obchod.

3. Pixi.js: 2D při 60 fps, ne herní engine

Pixi.js je 2D renderer. Skřítci, seznam displeje, filtry, částicové systémy, kostra ve stylu páteře. Hromadně kreslí výzvy na GPU, takže hrací kotouč, dětská výuková deska nebo mapa s několika tisíci špendlíky neroztaví hlavní vlákno tak, jako by to udělal seznam DOM. Lidé to používají, protože Canvas 2D je v tomto počtu příliš pomalý a protože již mají webovou aplikaci – nechtějí si osvojit kompletní herní rámec jen proto, aby malovali rychle.

Phaser je herní rámec: scény, fyzika, vstup, zvuk. Pixi je vrstva pod ní, pokud již vlastníte React, směrování a ověření. Interaktivní reklamy, značkové minihry, řídicí panely, které vykreslují více bodů, než by mělo SVG, a uživatelská rozhraní ve stylu kasina jsou obvyklou stručností. Pokud je produkt skutečnou hrou s úrovněmi a fyzikálním světem, začněte s herním enginem. Pokud je produktem aplikace Next.js, která potřebuje horkou 2D scénu v jedné trase, Pixi je knihovna, po které bych sáhl.

• Použijte Pixi, když je problémem počet a hladkost ve 2D: částice, listy sprite, filtry, scéna, která překreslí každý snímek.
• Atlas skřítků. Deset tisíc uvolněných PNG zastaví zátěž, i když bude GPU později šťastný.
• Pozastavte ukazatel, když je karta skrytá. Stupeň Pixi, který stále tiká na pozadí, je stížnost na baterii, která čeká na to, až se stane.

4. Jak vybírám: CSS, GSAP, Pixi, Three

Drahou chybou je použití 3D enginu k vyblednutí tlačítka. Již jsem napsal, že prémiové vyprávění posouvání patří do GSAP a ScrollTrigger a že React stav uživatelského rozhraní patří do Framer Motion. Tyto knihovny animují uzly, které zůstávají v dokumentu. Three a Pixi vytvářejí svět, který není dokumentem. Jejich smíchání je v pořádku. Nahrazením nesprávné vrstvy je způsob, jakým vstupní stránka doručuje 800 kB WebGL hrdinu, o jehož oběžné dráze nikdo nepožádal.

• Umístění kurzoru, akordeon, přechod stránky, zpětná vazba formuláře: CSS nebo Framer Motion. Zůstaňte v DOM.
• Připnuté sekce, vyčištěná časová osa, filmové posouvání: GSAP. Stále dokument, jen choreografie.
• Tisíce 2D objektů, částic, jeviště, které musí pojmout 60 fps: Pixi.js.
• Hloubka, kamera, světla, model, kolem kterého obíháte: Three.js. Nejedná se o 2D hrací automat.

5. Účet: vitální údaje, SEO, a11y, levné telefony

Plátno WebGL je pro prohledávač neviditelné. Cokoli si uživatel musí přečíst – název produktu, cena, právní předpisy, často kladené otázky – žije v HTML na scéně, nikoli namalováno do textury. Jak se Core Web Vitals pohybují příjmy, jsem již psal. Dychtivý 3D hrdina na domovské stránce je klasickým vlastním cílem LCP a INP: GLTF bojuje s prvním nátěrem, poté vykreslovací smyčka ukradne vstup. Líně načíst scénu poté, co je dokument užitečný. Nejprve ukažte statický plakát. Zničte vykreslovací modul při odpojení, jinak dojde k úniku GPU přes navigace na straně klienta.

Přístupnost je paralelní uživatelské rozhraní, nikoli atribut plátna. Keyboard orbit, textová alternativa pro model, redukovaný pohyb, který zastaví smyčku. Levný Android tepelně utlumí zaneprázdněný fragment shader. Uzavřete poměr pixelů, nabídněte záložní „2D fotografie“ a neudělejte z jediné cesty ke SKU WebGL kontext, který se nepodařilo inicializovat.

6. Next.js: klientský ostrov, nikoli serverová komponenta

Na serveru není WebGL. Scéna je klientská komponenta, nabitá next/dynamic a ssr: false, za plakátem nebo kostrou. React Three Fiber, pokud je rest aplikace React. @pixi/react, pokud scéna musí mluvit se stejným stavovým stromem. Nedělal bych SSR plátno „za SEO“: crawler stále vidí prázdnou bitmapu. Vložte kopii do HTML vykresleného serverem. Nechte ostrov spustit, když je uživatel připraven hrát si s objektem.

Závěr: vyberte povrch, který odpovídá objektu

Týmy používají Three.js, protože 3D SKU se prodává lépe, když ji zákazník může obíhat. Používají Pixi.js, protože dva tisíce sprajtů při 60 fps jako divs nepřežijí. Žádná z knihoven není náhradou za CSS, GSAP nebo rychlý dokument. Pokud je zadání „aby to bylo prémiové“, začnu pohybem v DOM. Pokud je zadání „točte tuto kuchyni“ nebo „nechte mince na obrazovce“, záměrně opustím DOM, izoluji plátno a kopii, kterou Google a čtečka obrazovky potřebují, ponechávám v HTML. Dělám to jako starší webový inženýr: Next.js ostrovy, líné WebGL, GSAP kde je stránka stále stránkou. Do formuláře napište počet objektů, zda se jedná o 2D nebo 3D a zda musí být hodnocena stejná URL. Nezačneme tím, že na domovskou stránku pustíme plátno, abychom vypadali moderně.