Three.js ve Flutter'ı Köprülemek: WebView İçinde Gerçek Zamanlı WebGL
Fizik tabanlı bir 3D oyunu Flutter WebView içinde performansı boğmadan çalıştırmak. İşte yaklaşımım.
Flutter geliştiricilerinin çoğu karmaşık şeyler için WebView'dan kaçınır. Bir Flutter WebView içinde gerçek zamanlı 3D penaltı oyunu gönderdikten sonra şunu söyleyebilirim: göründüğünden zor — ama kesinlikle yapılabilir.
Temel sorun iletişim. Flutter ve WebGL farklı dünyalarda yaşıyor. Köprü, JavaScript kanalları: Flutter bir JS arayüzü enjekte eder, Three.js kodunuz bunu çağırır. Teoride basit, pratikte zorlayıcı çünkü her şeyi serileştirmeniz gerekiyor.
Oyun olayları için (atış, gol, kaçırma) basit bir string protokolü kullandım: "EVENT:shoot:power=85:angle=12". Flutter tarafında parse ediyorsunuz. Oyun olayları için yeterince hızlı, yüksek frekanslı veriler için berbat.
Fizik katmanı (WASM üzerinden Rapier3D) tamamen WebGL içinde çalışıyor. Flutter bundan habersiz. Bu doğru ayrım — oyun mantığını kendi içinde tutun, yalnızca sonuçları Flutter'a iletin.
Performans asıl zorluktu. Rapier3D WASM'ın soğuk başlatma maliyeti var. WASM modülünü Flutter splash ekranı sırasında önceden yüklüyorum. Kullanıcı oyuna ulaştığında zaten hazır oluyor.
Render bütçesi: Mobilde 60fps yerine 30fps ile sınırlıyorum. Kullanıcılar bu farkı casual bir oyunda fark etmiyor, ama pil ömrü kesinlikle fark ediyor.
ACESFilmic ton eşleme en büyük görsel iyileştirmeydi. Dinamik aralığı sıkıştırarak sahneyi ucuz aydınlatmayla bile sinematik gösteriyor. Tek satır kod, devasa fark.