Mobil cihazlarda karmaşık 3D modellerin performanslı bir şekilde görüntülenmesi, WebGL'in sınırlarını zorlamayı gerektiriyor. Bu yazıda Three.js ile mobil CAD görüntüleyici geliştirirken uyguladığımız optimizasyon stratejilerini paylaşıyorum.
Draw Call Azaltma
Mobil GPU'lar masaüstü muadillerine kıyasla çok daha az draw call işleyebilir. Mesh birleştirme (merge), instanced rendering ve geometri atlası teknikleriyle draw call sayısını 2000'den 150'ye düşürdük. Bu tek başına FPS'i %300 artırdı.
Bellek Yönetimi
WebGL context kaybı mobil tarayıcılarda sık karşılaşılan bir sorun. Texture atlası kullanımı, geometri LOD (Level of Detail) sistemi ve agresif garbage collection stratejisiyle bellek tüketimini %60 azalttık.
Progressive Loading
Büyük CAD dosyalarını chunk'lar halinde yükleyen bir streaming sistemi geliştirdik. Kullanıcı modeli döndürürken arka planda detaylar yükleniyor. İlk anlamlı render 1.2 saniyede tamamlanıyor — tam model yüklemesinin 8 saniye sürdüğü düşünülürse ciddi bir iyileştirme.
Shader Optimizasyonu
Mobil cihazlar için özel yazılmış lightweight shader'lar, standart MeshStandardMaterial'a kıyasla %45 daha hızlı render süresi sunuyor. Precision qualifier'ları ve branching minimizasyonu burada kritik rol oynuyor.