Three.js ve Pixi.js’i neden kullanırdım

Tarayıcıdaki sayfa bir belgedir: başlıklar, düğmeler, formlar, crawler’ın okuduğu bağlantılar. CSS, GSAP ve Framer Motion bu belgeyi hareket ettirir. Teslim ettiğim neredeyse her pazarlama sitesi için doğru araç budur. Three.js ve Pixi.js diğer iş içindir: GPU’nun boyadığı bir sahne, div ağacı değil. Ekipler DOM kare düşürdüğünde, nesne 3D bir SKU olduğunda veya iki bin jetonun 60 fps’te ekranda kalması gerektiğinde bunlara uzanır.

Figma’dan koda teslimde GSAP ve Framer Motion’ın ne zaman karşılığını verdiğini zaten yazdım. Bu o yazı değil. Burada: DOM’dan ne zaman çıkacağım, her kütüphane aslında ne işe yarar ve iş URL’sine WebGL canvas koyarsanız Core Web Vitals, SEO ve erişilebilirlikte ödeyeceğiniz fatura.

1. DOM bir belgedir. Canvas bir çizim yüzeyidir

Her DOM düğümü layout, stil, hit-testing ve erişilebilirlik ağacında bir yer taşır. Bu maliyet web’in anlamıdır: metin seçilir, form tab ile gezinir, Google başlığı indeksler. Orta segment bir telefonda bin absolute konumlu div’in takılmasının nedeni de budur. Canvas bir bitmap’tir. Bu karede ne çizileceğini GPU’ya söylersiniz. Sprite’ın layout’u yoktur. Canvas’ın yanına kurmazsanız crawler için başlık ve ekran okuyucu için ad da yoktur.

Ham WebGL (ve şimdi WebGPU) kameralar, buffer’lar, shader’lar ve draw call’lardır. Yazılabilir. Çoğu ürün ekibi yazmamalı. Three.js ve Pixi.js bu yüzeyi sahne grafı, loader ve işe alım havuzuna sarar. Bedeli bundle ağırlığı ve sayfanın ortasında bir kara kutudur. Soru asla «GPU render havalı mı» değildir. Soru ürünün gerçekten bir sahneye ihtiyacı olup olmadığıdır.

2. Three.js: sekmede bir 3D dünya

Three.js tarayıcı için bir 3D motordur. Sahne, kamera, ışıklar, mesh’ler, malzemeler ve dokular alırsınız. Kütüphane WebGL ile konuşur; daha yeni GPU’lar için WebGPU renderer vardır. Kullanılır çünkü bir kanepe, mutfak veya türbinin GLTF modeli her açıyı çekmekten daha ucuza sekmede döndürülür ve yörüngeye alınabilen bir kamera PNG karuselinden daha iyi satar.

Gördüğüm tipik iş: ürün yapılandırıcıları (renk, kumaş, eklentiler), mimari yürüyüşler, uzayda bilimsel veya finansal veri, WebXR stantları, dokunulabilen bir film karesi gibi durması gereken marka sitesi hero sahneleri. Babylon.js gerçek bir alternatif, daha güçlü editörle. Three.js örnekleri, Stack Overflow yanıtlarını ve React Three Fiber’ı kazandı - bileşenlerle düşünen bir Next.js uygulamasına sahneyi böyle bağlardım.

• Nesnenin derinliği varsa Three.js: yörünge, parçayı patlatma, malzeme değiştirme, odada yürüme.
• GLTF’i zayıf tutun. 40 MB’lık kanepe mobil’i öldürür. LOD, sıkıştırılmış dokular ve sahne açılana kadar bir poster görsel.
• Fiyatı, CTA’yı ve ödeme adımını canvas’ın içine koymayın. Yanına HTML. Sahne nesneyi satar; belge anlaşmayı kapatır.

3. Pixi.js: 60 fps’te 2D, bir oyun motoru değil

Pixi.js bir 2D renderer’dır. Sprite’lar, display list, filtreler, parçacık sistemleri, Spine tarzı iskelet animasyonu. Draw call’ları GPU’da toplar; böylece bir slot makarası, çocuk öğrenme tahtası veya birkaç bin pinli harita, bir DOM listesi gibi main thread’i eritmez. Kullanılır çünkü Canvas 2D bu sayıda çok yavaştır ve web uygulaması zaten vardır - sadece hızlı boyamak için tam bir oyun çerçevesi alınmak istenmez.

Phaser bir oyun çerçevesidir: sahneler, fizik, girdi, ses. Pixi, React, routing ve auth zaten sizdeyken altındaki katmandır. Etkileşimli reklamlar, markalı mini oyunlar, SVG’nin taşıması gerekenden daha çok noktalı dashboard’lar ve casino tarzı UI alışılmış brieftir. Ürün seviyeleri ve fizik dünyası olan gerçek bir oyunsa bir oyun motoruyla başlayın. Ürün bir rotada sıcak bir 2D sahne isteyen Next.js uygulamasıysa uzanacağım kütüphane Pixi olur.

• Sorun 2D’de sayı ve akıcılıksa Pixi: parçacıklar, sprite sheet’ler, filtreler, her karede yeniden çizilen bir sahne.
• Sprite’ları atlas’a toplayın. On bin dağınık PNG, GPU sonra mutlu olsa bile yüklemeyi durdurur.
• Sekme gizliyken ticker’ı duraklatın. Arkada tıklamaya devam eden bir Pixi sahnesi henüz yazılmamış bir batarya şikayetidir.

4. Nasıl seçerim: CSS, GSAP, Pixi, Three

Pahalı hata, bir düğmeyi soldurmak için 3D motor kullanmaktır. Zaten yazdım: premium scroll hikâyesi GSAP ve ScrollTrigger’a aittir; React UI state Framer Motion’a. Bu kütüphaneler belgede kalan düğümleri canlandırır. Three ve Pixi belgede olmayan bir dünya yaratır. Karıştırmak olur. Yanlış katmanı değiştirmek, kimsenin yörüngeye almasını istemediği 800 KB’lık bir WebGL hero’nun landing’de yayınlanmasıdır.

• Hover, akordeon, sayfa geçişi, form geri bildirimi: CSS veya Framer Motion. DOM’da kalın.
• Sabitlenmiş bölümler, scrub’lu zaman çizelgesi, sinematik kaydırma: GSAP. Hâlâ belge, sadece koreografisi yapılmış.
• Binlerce 2D nesne, parçacıklar, 60 fps tutması gereken bir sahne: Pixi.js.
• Derinlik, kamera, ışıklar, yörüngeye aldığınız bir model: Three.js. 2D slot makarası değil.

5. Fatura: vitals, SEO, a11y, ucuz telefonlar

Bir WebGL canvas crawler’a görünmez. Kullanıcının okuması gereken her şey - ürün adı, fiyat, yasal metin, SSS - sahnenin çevresindeki HTML’de yaşar, bir dokuya boyanmaz. Core Web Vitals’ın ciroyu nasıl hareket ettirdiğini zaten yazdım. Anasayfada hevesli bir 3D hero, LCP ve INP’de klasik bir kendi kalesine goldür: GLTF ilk boyayla kavga eder, sonra render döngüsü girdiyi çalar. Belge işe yarar olduktan sonra sahneyi lazy-load edin. Önce statik bir poster. Unmount’ta renderer’ı yok edin, yoksa GPU istemci gezintilerinde sızar.

Erişilebilirlik paralel bir UI’dır, bir canvas özniteliği değil. Klavye yörüngesi, model için metin alternatifi, döngüyü durduran reduced-motion. Ucuz bir Android, meşgul bir fragment shader’ı ısıl olarak kısar. Pixel ratio’yu sınırlayın, «2D fotoğraflar» yedek yolu sunun ve başlamayan bir WebGL bağlamını SKU’ya giden tek yol yapmayın.

6. Next.js: istemci adası, Server Component değil

Sunucuda WebGL yoktur. Sahne bir client component’tir; next/dynamic ve ssr: false ile, bir poster veya skeleton’ın arkasında yüklenir. Uygulamanın gerisi React ise React Three Fiber. Sahne aynı state ağacıyla konuşacaksa @pixi/react. Bir canvas’ı «SEO için» SSR etmezdim: crawler yine boş bir bitmap görür. Metni sunucuda render edilen HTML’e koyun. Ada, kullanıcı nesneyle oynamaya hazır olunca açılsın.

Sonuç: nesneye uyan yüzeyi seçin

Ekipler Three.js kullanır çünkü müşteri yörüngeye alabildiğinde 3D bir SKU daha iyi satar. Pixi.js kullanır çünkü 60 fps’te iki bin sprite div olarak hayatta kalmaz. Hiçbir kütüphane CSS, GSAP veya hızlı bir belgenin yerini tutmaz. Brief «premium hissettirin» ise DOM’daki hareketle başlarım. Brief «bu mutfağı döndürün» veya «jetonları ekranda tutun» ise DOM’dan bilerek çıkar, canvas’ı yalıtır ve Google ile ekran okuyucunun ihtiyaç duyduğu metni HTML’de bırakırım. Bunu senior web engineer olarak kapatırım: Next.js adaları, tembel WebGL, sayfa hâlâ sayfayken GSAP. Formdan nesne sayısını, 2D mi 3D mi olduğunu ve aynı URL’nin sıralanıp sıralanmayacağını yazın. «Modern dursun diye» anasayfaya canvas atarak başlamayacağız.