[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fZJ7iKyR4rlOw04E7MJ7ZflORN-Q1OVfPHDYqOORx7a4":3},{"blog":4,"related":32},{"_id":5,"slug":6,"title":7,"excerpt":10,"content":13,"coverImage":15,"images":16,"category":20,"tags":21,"author":22,"status":23,"readingTime":24,"publishedAt":25,"order":26,"aiGenerated":27,"aiImagePrompt":28,"ayahRef":29,"createdAt":30,"updatedAt":31,"__v":26},"69ebe93343bbfb0f61d749b4","web-tabanli-oyunlarda-motor-secimi-ve-performans-dengeleme",{"tr":8,"en":9},"Web Tabanlı Oyunlarda Motor Seçimi ve Performans Dengeleme","Engine Selection and Performance Balancing for Web Native Games",{"tr":11,"en":12},"Web tabanlı oyun geliştirirken motor kararını mimari sınırlara, render pipeline yapısına ve kullanıcı cihaz kapasitesine göre dengelemek gerekir. Three.js optimizasyonu, WebGPU geçişi ve PWA paketleme akışı hakkında pratik rehber.","Choosing the right engine for web games requires balancing architectural limits, render pipeline structure, and device capabilities. This guide covers Three.js optimization, WebGPU migration, and PWA packaging workflows.",{"tr":14},"\u003Ch2>Motor Seçimi ve Render Mimarisı\u003C\u002Fh2>\u003Cp>Web tabanlı oyun geliştirirken ilk adım motor kararını proje ölçeğine göre yapılandırmaktır. Steam 2025 raporlarına göre web-native oyunların büyüme oranı yüzde otuz dokuz seviyesine ulaşmıştır. Bu büyüme motor bağımlılığını değil, mimari netliği gerektirir. Three.js, Babylon.js, PlayCanvas ve Phaser gibi araçlar farklı çalışma felsefelerine sahiptir. Three.js doküman tabanlı bir yapı sunar ve modüler eklemelerle çalışır. Babylon.js fizik motoru ve UI sistemini dahili barındırır. PlayCanvas tarayıcı içi editör odaklıdır. Phaser ise 2D odaklı ve TypeScript destekli bir altyapıdır. Motor seçerken paket boyutu, ağaç dalı temizliği ve TypeScript uyumu öncelik olmalıdır. WebAssembly desteği olmayan motorlar mobil tarayıcılarda gecikme yaratır. Render pipeline tercihi ise cihazın GPU sürümüne göre değişir. WebGL2 tarayıcı uyumluluğunu korurken WebGPU daha düşük CPU yükü ve daha yüksek framerate sağlar. Chrome 113 sürümü WebGPU'yu varsayılan olarak açmıştır. Firefox ve Safari ise aşamalı geçiş planı yayınlamıştır. Motor seçimi yaparken proje süresi, ekip büyüklüğü ve dağıtım hedeflerini net bir tabloya oturtmak gerekir. Tek bir motor her ihtiyacı karşılamaz. Hibrit yapı kurmak veya render motorunu değiştirilebilir hale getirmek uzun vadeli stabiliteyi korur.\u003C\u002Fp>\u003Ch2>Three.js ve WebGL2 Dengeleme\u003C\u002Fh2>\u003Cp>Three.js ile çalışırken performans dengesini korumak için geometri ve materyal yönetimi kritik bir rol oynar. Her sahne nesnesi için ayrı draw call oluşturmak tarayıcı belleğini hızla tüketir. InstancedMesh yapısını kullanarak binlerce nesneyi tek draw call ile render edebilirsiniz. Texture boyutlarını KTX2 veya Basis formatına sıkıştırmak bellek kullanımını yüzde otuz beş azaltır. LOD sistemi oyuncu mesafesine göre detay seviyesini otomatik düşürür. Frustum culling özelliğini açık tutarak ekran dışı nesnelerin render edilmesini engellersiniz. Animation driver yerine requestAnimationFrame döngüsü içinde delta time hesaplamak frame zamanlamasını stabil tutar. Shader kodlarını GLSL versiyon 300 es'e göre yazmak mobil GPU uyumluluğunu artırır. Materyal seçiminde MeshStandardMaterial yerine MeshPhysicalMaterial kullanmak ışık hesaplamasını daha doğru yapar ancak CPU yükünü artırır. Performans testi yaparken Chrome DevTools Performance panelini açın. Heap allocation, layout thrashing ve paint time değerlerini sıfıra yaklaştırın. Bellek sızıntı tespiti için heap snapshot almayı düzenli yapın. Three.js versiyon 0.160 sürümü ile material caching mekanizması geliştirilmiştir. Bu sayede aynı materyal tekrar oluşturulmaz. Asset pipeline'ı oluştururken glTF 2.0 formatını kullanın. Draco sıkıştırma ve Meshopt quantization ile dosya boyutunu yarıya indirin. Build sürecinde Vite veya Webpack modül ayrıştırma yaparken treeshaking'i aktif tutun. Kullanılmayan fonksiyonlar paket dışı kalır. Bu adımlar web tabanlı oyunun başlangıç yükünü ve çalışma süresini dengeler.\u003C\u002Fp>\u003Ch2>WebGPU ve Modern Render Pipelines\u003C\u002Fh2>\u003Cp>WebGPU geçişi sadece API değişimi değil render mantığının yeniden düşünülmesidir. Compute shader'lar physics ve AI hesaplamalarını CPU'dan GPU'ya taşır. Render pass yapısı frame başlatma, depth buffer temizleme ve fragment shader çalışmasını tek seferde yönetir. Bind group sistemi uniform ve texture verilerini tek pakette gönderir. Bu sayede driver çağrısı azalır. Three.js 0.160 sürümü WebGPU renderere geçiş yapmıştır. Migration guide dokümanını takip ederek material mapping ve texture format dönüşümlerini otomatize edebilirsiniz. WebGPU ile pipeline state nesnesini açıkça tanımlamanız gerekir. Depth test, blend mode ve rasterization state değerlerini kod içinde belirtmek performans beklenmedik düşüşlerini önler. Shader compile süresi WebGPU'da daha uzundur ancak runtime'da sıfıra iner. Bu durum geliştirme sürecinde beklenti yönetimi gerektirir. Render pass içinde multiple render targets destekleyerek SSAO ve bloom efektlerini paralel hesaplayabilirsiniz. Memory management için GPU buffer ve texture allocation'ı açıkça yönetin. Dispose fonksiyonlarını çağırarak bellek sızıntısını engellersiniz. WebGPU API'si Chrome 113, Firefox 117 ve Safari 16.4 sürümlerinde stabil çalışır. Eski tarayıcılar için fallback WebGL2 pipeline oluşturmak zorunludur. Runtime'da navigator.gpu özelliğini kontrol ederek pipeline seçimi yapın. Bu yaklaşım hem performans hem de uyumluluk dengesini korur.\u003C\u002Fp>\u003Ch2>PWA Paketleme ve Dağıtım Akışı\u003C\u002Fh2>\u003Cp>Web tabanlı oyunu native deneyime yaklaştırmak için Progressive Web App yapısını doğru kurmak gerekir. manifest.json dosyası ikon boyutlarını, tema renklerini ve yönlendirme davranışını tanımlar. Service worker dosyası network isteğini önbelleğe alır ve offline fallback sağlar. Cache-first strateji oyun assetleri için, network-first strateji ise skor veya kullanıcı verisi için kullanılmalıdır. HTTP\u002F2 multiplexing ve Brotli sıkıştırma ile transfer süresi kısalır. HTTPS zorunludur. Certificate hatası tarayıcıda PWA kurulumunu engeller. Build pipeline'ı Node.js 20 LTS ve npm 10 sürümünde kurulmalıdır. Vite production flag ile minification ve code splitting otomatik çalışır. Rollup plugin'leri ile CSS injection ve asset hashing yapılır. Deploy sürecinde Vercel, Netlify veya Cloudflare Pages tercih edilebilir. CDN edge caching ile global erişim süresi düşer. Service worker cache versioning yaparak güncelleme çakışmalarını önlersiniz. Kullanıcı tarayıcı ayarlarında Install as app seçeneğini görür. First screen load time hedefi üç saniyenin altında olmalıdır. Lighthouse audit raporunu düzenli çalıştırın. Performance, Accessibility, Best Practices ve SEO puanlarını kontrol edin. Bu akış oyunu web üzerinden native uygulama kalitesine taşır.\u003C\u002Fp>\u003Ch2>Kaçınılması Gereken Hatalar\u003C\u002Fh2>\u003Cp>Web tabanlı oyun geliştirirken en sık karşılaşılan hata motor bağımlılığını aşırı büyütmek ve tarayıcı sınırlarını göz ardı etmektir. Çok büyük texture dosyalarını sıkıştırma olmadan yüklemek bellek çökmesine neden olur. WebAssembly modüllerini tek seferde import etmek ana thread'i bloklar ve UI donmasına yol açar. Service worker cache stratejisini karışık kurmak güncelleme çakışması yaratır. Eski tarayıcılar için fallback pipeline tanımlamamak kullanıcı kayıplarına neden olur. Performans testi yapmadan production'a çıkmak cihaz uyumluluğunu riske atar. Ayrıca kumar mekaniklerini, loot box sistemlerini veya dark pattern tasarımını oyun içi ilerlemeye dayalı olarak uygulamak kullanıcı güvenini zedeler. Bu tür mekanikler kısa vadeli kazanç vaat eder ancak uzun vadeli sadakat ve etik sürdürülebilirliği yok eder. Oyun geliştirirken her asset, her draw call ve her kullanıcı etkileşimi için net bir neden belirlemek gerekir. Gereksiz özellik ekleme yerine mevcut motor sınırlarına saygı duymak ve kullanıcı cihazının kapasitesine göre optimizasyon yapmak daha sağlıklı bir proje akışı sağlar.\u003C\u002Fp>\u003Ch2>Yayın Sonrası ve Takım Kültürü\u003C\u002Fh2>\u003Cp>Oyun yayımlandıktan sonra post-mortem dokümanı oluşturmak ekip öğrenmesini pekiştirir. Hangi draw call optimizasyonu işe yaradı, hangi asset pipeline'ı gecikme yarattı, hangi kullanıcı geri bildirimi beklenmedik bir akış değişimi getirdi, tüm bunlar net bir tabloya oturtulmalıdır. Telemetry verisi toplanırken privacy-first yaklaşım benimsenmelidir. Kullanıcı izni olmadan cihaz bilgisi veya davranış analitiği toplamak güveni zedeler. Analytics için privacy-compliant araçlar tercih edilmelidir. Takım içinde code review kültürü kurmak, PR açıklama formatını standartlaştırmak ve sprint sonunda teknik borç tablosunu güncellemek sürdürülebilirliği artırır. Web tabanlı oyun geliştirirken sabır ve itidal gereklidir. Performans hedeflerini gerçekçi tutmak, kullanıcı cihazının sınırlarına saygı duymak ve gereksiz özellik ekleme eğilimini kontrol etmek kanaat ilkesine uygundur. Her optimizasyon adımı kullanıcı deneyimini iyileştirirken her yeni özellik eklemesi proje karmaşıklığını artırır. Dengeyi korumak için release cycle boyunca sadece kritik bug ve performans iyileştirmesine odaklanın. Topluluk geri bildirimlerini dinleyin, ancak trend mekaniklere körü körüne uymayın. Oyununuzun kalbi mekanik netliğinde ve kullanıcı saygısında saklıdır.\u003C\u002Fp>","\u002Fblog-img\u002F2026-05-22\u002Fimg-1.webp",[17,18,19],"\u002Fblog-img\u002F2026-05-22\u002Fimg-2.webp","\u002Fblog-img\u002F2026-05-22\u002Fimg-3.webp","\u002Fblog-img\u002F2026-05-22\u002Fimg-4.webp","indie-gelistirme",[],"Shadowium Ekibi","published",6,"2026-02-02T08:00:00.000Z",0,true,"code editor screen with WebGL context drawing geometric shapes on a clean wooden table","","2026-04-24T22:05:39.959Z","2026-04-25T08:20:58.990Z",[33,63,83],{"_id":34,"slug":35,"title":36,"excerpt":39,"coverImage":42,"images":43,"category":20,"tags":47,"author":22,"status":23,"readingTime":58,"publishedAt":59,"order":26,"aiGenerated":27,"aiImagePrompt":60,"ayahRef":29,"createdAt":61,"updatedAt":62,"__v":26},"69ec02d043bbfb0f61d749cf","indie-takimlar-icin-post-mortem-dokumantasyon-ve-geri-bildirim-dongusu",{"tr":37,"en":38},"Indie Takımlar İçin Post Mortem Dokümantasyon ve Geri Bildirim Döngüsü","Post Mortem Documentation Framework and Feedback Loop Tracking for Indie Teams",{"tr":40,"en":41},"Proje sonu analizleri, hata sınıflandırma, motor karşılaştırması ve şeffaf gelir etiği. Steam 2025 metrikleri, Godot 4.4 ve Unity 6.0 ile uygulanabilir indie geliştirme şablonu.","Post project analysis, bug triage, engine comparison and transparent monetization ethics. Steam 2025 metrics, Godot 4.4 and Unity 6.0 actionable indie development template.","\u002Fblog-img\u002F2026-06-30\u002Fimg-1.webp",[44,45,46],"\u002Fblog-img\u002F2026-06-30\u002Fimg-2.webp","\u002Fblog-img\u002F2026-06-30\u002Fimg-3.webp","\u002Fblog-img\u002F2026-06-30\u002Fimg-4.webp",[48,49,50,51,52,53,54,55,56,57],"post-mortem","indie-dev","steam-2025","bug-triage","feedback-loop","monetization-ethics","accessibility","engine-comparison","asset-pipeline","team-memory",5,"2026-03-13T08:00:00.000Z","A structured project timeline on a corkboard with pinned cards, connecting lines of cause and effect, and a calm reflective atmosphere","2026-04-24T23:54:56.994Z","2026-04-25T08:21:39.540Z",{"_id":64,"slug":65,"title":66,"excerpt":69,"coverImage":72,"images":73,"category":20,"tags":77,"author":22,"status":23,"readingTime":78,"publishedAt":79,"order":26,"aiGenerated":27,"aiImagePrompt":80,"ayahRef":29,"createdAt":81,"updatedAt":82,"__v":26},"69ebf03343bbfb0f61d749c2","web-oyunlarinda-asiri-genisleme-onleme-ve-adim-adim-varlik-akisi",{"tr":67,"en":68},"Web Oyunlarında Aşırı Genişleme Önleme ve Adım Adım Varlık Akışı","Preventing Bloated Builds and Stepwise Asset Streaming in Web Games",{"tr":70,"en":71},"WebAssembly derleme, hafıza bütçeleme ve öncelikli varlık akışı ile indie projeleri optimize edin. Teknik disiplin ve tasarım etiği rehberi.","Optimize indie web projects through WebAssembly compilation, memory budgeting, and priority asset streaming. Technical discipline and design ethics guide.","\u002Fblog-img\u002F2026-06-05\u002Fimg-1.webp",[74,75,76],"\u002Fblog-img\u002F2026-06-05\u002Fimg-2.webp","\u002Fblog-img\u002F2026-06-05\u002Fimg-3.webp","\u002Fblog-img\u002F2026-06-05\u002Fimg-4.webp",[],4,"2026-02-16T08:00:00.000Z","isometric web game dashboard showing memory usage graphs and asset loading bars on a clean desk","2026-04-24T22:35:31.319Z","2026-04-25T08:21:12.407Z",{"_id":84,"slug":85,"title":86,"excerpt":89,"coverImage":92,"images":93,"category":20,"tags":97,"author":22,"status":23,"readingTime":78,"publishedAt":102,"order":26,"aiGenerated":27,"aiImagePrompt":103,"ayahRef":29,"createdAt":104,"updatedAt":105,"__v":26},"69ebee5643bbfb0f61d749bf","acik-kaynak-varlik-akisi-ve-tutarli-sanat-yonetimi-pipelinei",{"tr":87,"en":88},"Açık Kaynak Varlık Akışı ve Tutarlı Sanat Yönetimi Pipelineı","Open Source Asset Flow and Consistent Art Management Pipeline Process",{"tr":90,"en":91},"Indie ekipler için açık kaynak depo yapısı, materyal standardizasyonu ve döngü kontrolü adımları. Tutarlı sanat yönetimi ve erişilebilir üretim rehberi.","Open source repository structure, material standardization, and loop control steps for indie teams. Consistent art management and accessibility production guide.","\u002Fblog-img\u002F2026-06-01\u002Fimg-1.webp",[94,95,96],"\u002Fblog-img\u002F2026-06-01\u002Fimg-2.webp","\u002Fblog-img\u002F2026-06-01\u002Fimg-3.webp","\u002Fblog-img\u002F2026-06-01\u002Fimg-4.webp",[49,98,99,100,101],"open-source","art-pipeline","game-production","asset-management","2026-02-12T08:00:00.000Z","organized digital asset library with neatly arranged folders showing 3d models and pixel textures under natural window light","2026-04-24T22:27:34.642Z","2026-04-25T08:21:11.443Z"]