Three.js ile yapılan bir tarayıcı oyununu orta seviye telefonlarda akıcı tutmak için çizim çağrıları, gölgeler, dokular ve piksel oranı üzerine pratik notlar.
Masaüstünde akan bir tarayıcı oyunu, orta seviye bir telefonda bir anda slayt gösterisine dönebilir. Üstelik oyuncu bunu “oyun kasıyor” diye değil, “telefonum ısındı, kapattım” diye yaşar. İyi haber şu: sorunların çoğu birkaç tanıdık yerden çıkar.
Önce ölç, sonra düzelt
Tahminle optimizasyon yapmak, karanlıkta anahtar aramaya benzer. Three.js’te ilk bakılacak yer renderer.info:
setInterval(() => {
const { calls, triangles } = renderer.info.render;
console.log({ calls, triangles });
}, 2000);Çizim çağrısı (draw call) sayısı yüzlerle ifade ediliyorsa, darboğaz büyük ihtimalle GPU değil, CPU’nun GPU’ya iş gönderme maliyetidir.
1. Aynı nesneyi tekrar tekrar çizmeyin
Tarladaki her ekin, her çit, her ağaç ayrı bir Mesh ise, her biri ayrı bir çizim çağrısıdır. Aynı geometriyi paylaşan nesneler için InstancedMesh, yüzlerce çağrıyı tek çağrıya indirir. Hareket etmeyen dekorlar için geometrileri birleştirmek (merge) de aynı işi görür.
2. Gölgeler en pahalı süsünüz
Gerçek zamanlı gölge, sahneyi ışığın gözünden bir kez daha çizmek demektir. Pratik kurallar:
- Gölgeyi yalnızca tek bir yönlü ışıkta açın.
- Gölge haritasını küçük tutun (mobilde 1024 genellikle yeter).
- Zeminle temas hissi için sahte bir “blob” gölge dokusu, çoğu zaman gerçeğinden iyi görünür.
3. Piksel oranını sınırlayın
Yeni telefonların ekran piksel oranı 3’e çıkabilir; bu, çizilecek piksel sayısının 9 katına çıkması demektir. Gözün farkı pek görmediği bir yerde bütün pili yakarsınız.
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));4. Dokular: küçük, sıkıştırılmış, paylaşılmış
Dokular hem indirme süresini hem ekran kartı belleğini doldurur. Düşük poligonlu bir dünyada çoğu nesne tek bir renk paletinden (atlas) boyanabilir; bu hem dosya sayısını hem malzeme sayısını azaltır.
5. Her karede yeni nesne üretmeyin
Oyun döngüsünde her karede new THREE.Vector3() yazmak, çöp toplayıcının ara ara oyunu dondurmasına yol açar. Geçici vektörleri bir kez oluşturup yeniden kullanın.
6. Görünmeyeni çizmeyin, beklemeyeni hesaplamayın
Sekme arka plandayken döngüyü durdurun, ekranda olmayan bölgelerin animasyonunu dondurun. Oyuncu bakmıyorsa, telefonun da çalışmasına gerek yok.
Kısa özet
| Sorun | İlk bakılacak yer |
|---|---|
| Çok sayıda çizim çağrısı | Instancing, geometri birleştirme |
| Mobilde ısınma | Piksel oranı, gölgeler |
| Uzun yükleme | Doku boyutu ve sıkıştırma |
| Ara ara donma | Döngüde nesne üretimi |
Bu listenin hepsi, Farmie gibi düşük poligonlu tarayıcı oyunlarının ilk günden düşünmesi gereken şeyler. Sahnenin temelini merak ediyorsanız Three.js ile tarayıcıda ilk tarla yazısından başlayabilirsiniz.