Web tarayıcıları üzerinde akıcı, hızlı ve kesintisiz bir oyun deneyimi sunmak, WebGL projelerinde geliştiricilerin karşılaştığı en büyük zorluklardan biridir. Pixel Neon olarak, React tabanlı web projelerimizle Unity WebGL çıktılarını en verimli şekilde bir araya getiren özel bir çift yönlü iletişim köprüsü kurduk. Bu köprü sayesinde tarayıcı belleği (DOM) ile Unity'nin WebAssembly (Wasm) bellek alanı arasındaki veri alışverişini sıfır gecikmeye yakın bir seviyeye indirdik. JSON serileştirme yükünü tamamen ortadan kaldırarak düz string veya doğrudan byte array formatında veri transferi yapan bu yeni protokol, oyun esnasındaki arayüz senkronizasyonunu kusursuz hale getirdi.
Brotli sıkıştırma algoritmaları ve WebAssembly modüllerinin asenkron olarak arka planda yüklenmesi sayesinde, başlangıç yükleme boyutlarımızı %45 oranında düşürmeyi başardık. Geleneksel gzip sıkıştırmasına kıyasla çok daha yüksek dekompresyon hızları sunan Brotli protokolü, özellikle mobil tarayıcılarda oyunun ilk açılış süresini saniyeler seviyesine indirdi. Ayrıca tarayıcı önbellekleme (browser caching) mekanizmalarını optimize ederek, oyuncuların oyuna ikinci kez girdiklerinde neredeyse anında yükleme yapabilmelerini sağladık. Sunucu tarafında (Nginx) yapılandırdığımız özel Brotli başlıkları sayesinde, tarayıcının verileri indirirken eşzamanlı olarak açmasını (streaming decompression) sağladık.
Bellek sızıntılarını (memory leaks) önlemek adına Unity'nin çöp toplama (Garbage Collection) döngülerini tarayıcının boşta olduğu (requestIdleCallback) zaman dilimleriyle senkronize ettik. Bu sayede, tarayıcı tabanlı oyunlarda sıkça karşılaşılan anlık takılmaların ve FPS düşüşlerinin önüne geçtik. Ses dosyalarını ve ağır kaplamaları (textures) dinamik olarak oyun esnasında sunucudan asenkron talep eden (AssetBundle) bir mimariye geçerek ana paket boyutunu minimumda tuttuk. Bu sayede oyunun ilk yükleme süresini düşürürken, oyuncunun sadece girdiği haritaya ait verileri indirmesini sağlayarak internet tasarrufu sağladık. Tarayıcının çöp toplama motorunun (V8 engine) oyun kodlarıyla çakışmasını engellemek amacıyla bellek tahsisatlarını (memory allocation) en aza indiren veri yapılarına geçiş yaptık.
WebAssembly'nin tek parça halinde belleğe yüklenmesinin mobil tarayıcılarda yarattığı 'out of memory' çökmelerini önlemek için, bellek alanını dinamik büyüyen (resizable Wasm memory) bir konfigürasyonla sınırlandırdık. Oyun içindeki tüm shader kodlarını WebGL 2.0 standartlarına göre optimize ederek, ekran kartı üzerindeki çizim çağrılarını (draw calls) yarı yarıya azalttık. Bu optimizasyonlar, özellikle entegre grafik kartına sahip dizüstü bilgisayarlarda pil ömrünü uzatırken, fan gürültüsünü ve ısınma problemlerini de ortadan kaldırdı.
Oyuncularımız uzun bekleme ekranları olmadan, tarayıcıları üzerinden doğrudan cyberpunk evrenimize adım atabiliyorlar. Bu teknik detaylar, webpack konfigürasyonlarını, tarayıcı bellek yönetimi profillerini ve açık kaynak kodlu entegrasyon şablonlarımızı barındıran detaylı kılavuzumuzu GitHub hesabımız üzerinden inceleyebilir ve kendi projelerinizde ücretsiz olarak kullanabilirsiniz. Gelecek web projelerimizde, çok oyunculu (multiplayer) WebGL oyunları için WebSockets yerine çok daha düşük gecikme sunan modern WebTransport protokolünü entegre etmeyi planlıyoruz.