2026'da Web Oyunları Teknoloji Yığını
Web oyunlarını güçlendiren üç teknoloji var: WebGL, WebGPU ve WebAssembly. 2026'da yüksek performanslı bir tarayıcı oyunu için en iyi modern yığın, hem WebGL2 hem de WebGPU yapabilen bir render motoru (Three.js veya Babylon.js), fizik için Wasm (Rapier) ve statik barındırmadan oluşur; bunu destekleyen tarayıcıların yaklaşık %87'sinde WebGPU açık, geri kalanında ise WebGL2 devrede olur. Her teknoloji farklı sorunları çözer ve farklı ödünleşimlerle gelir. Bu rehber, en çok hype yapılan şeye değil, gerçekte ne inşa ettiğinize göre seçim yapmanıza yardımcı olur; tarayıcı desteği Eylül 2026 itibarıyla kontrol edilmiştir.
Hızlı Cevap
WebGL 2.0 her yerde çalışır ve çoğu oyunu gayet iyi idare eder. Geniş uyumluluğa ihtiyaç duyduğunuzda, özellikle mobilde, bunu kullanın. WebGPU size compute shader'lar ve daha iyi performans sunar, ama eski tarayıcılarda ve cihazlarda kullanıcı kaybedersiniz. WebAssembly, CPU kodunuzu daha hızlı hale getirir; bu yüzden fizik ve yol bulma (pathfinding) için kullanışlıdır, ama darboğazınız GPU ise size yardımcı olmaz.
2026'da çoğu oyun, destekleyen tarayıcılarda isteğe bağlı WebGPU ile birlikte WebGL gönderiyor. Wasm ise oyunun tamamında değil, sadece kritik (hot) kod yollarında seçici olarak kullanılıyor.
WebGL 2.0: İşe Yarayan Sıkıcı Seçim
WebGL 2.0, 2017'den beri kararlı durumda. Her modern tarayıcı bunu destekliyor. Oyununuz Chrome, Firefox, Safari ve Edge'in 5+ yıl öncesine giden sürümlerinde çalışır. iOS Safari 15+, Android için Chrome ve Samsung Internet'te çalışır. Hatta Xbox Edge ve PlayStation'ın tarayıcısı gibi konsol tarayıcılarında bile çalışır.
İşte temel bir WebGL 2 kurulumu şöyle görünür:
const canvas = document.getElementById('game');
const gl = canvas.getContext('webgl2');
if (!gl) {
// Fallback to WebGL 1 or show error
const gl1 = canvas.getContext('webgl');
if (!gl1) {
showError('Your browser does not support WebGL.');
return;
}
}
// Now you have a GL context
gl.clearColor(0.1, 0.1, 0.1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);Neler Elde Edersiniz
WebGL 2 size örneklendirilmiş (instanced) render sağlar, böylece binlerce nesneyi tek bir draw call ile çizebilirsiniz. GPU tarafında parçacık sistemleri ve simülasyonlar için transform feedback içerir. Deferred render ve G-buffer'lar için çoklu render hedefleri, hacimsel efektler için 3D dokular ve hassas veri depolama için tam sayı dokuları (integer texture) elde edersiniz.
gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, instanceCount);Neler Elde Edemezsiniz
Genel amaçlı GPU hesaplaması için compute shader'lar çalıştıramazsınız. Bindless doku desteği yoktur, bu yüzden doku birimi (texture unit) sayısıyla sınırlısınız. Kalıcı bellek eşleme veya açık bellek kontrolü yoktur. Mesh shader'lar veya modern geometri işlem hattı yoktur.
Çoğu 2D oyun ve birçok 3D oyun için bu sınırlamalar önemli değildir. WebGL 2, bugüne kadar yapılmış en başarılı web oyunlarından bazılarını hayata geçirdi.
WebGPU: Daha Fazlasına İhtiyacınız Olduğunda
WebGPU, modern GPU'ların gerçekte nasıl çalıştığı düşünülerek tasarlandı. Chrome, Mayıs 2023'te bunu kullanıma sundu ve 2025'in sonlarına doğru tüm büyük tarayıcılar desteği sağladı. Chrome 113+, Safari 26+ ve Edge 113+ hepsi çalışıyor ve Firefox, Windows'ta 141+ sürümünde (Temmuz 2025'ten beri) ve Apple Silicon macOS için 145'te bunu etkinleştirdi; Linux ve Android desteği ise hâlâ yayılıyor. Chrome Android, yakın zamanlı cihazlarda bunu destekliyor ve iOS Safari 26+ de destekliyor.
İşte Eylül 2026 itibarıyla gpuweb uygulama durumu sayfası ve her tarayıcının sürüm notlarından alınan destek tablosu.
| Tarayıcı | Varsayılan olarak sunulanlar | Henüz değil |
|---|---|---|
| Chrome / Edge | Windows, macOS ve ChromeOS'ta 113+. Linux'ta 144'ten itibaren (Intel Gen12+) ve 147'den itibaren (Wayland üzerinde NVIDIA). Android 12+ üzerinde Chrome for Android 121+ | Windows on ARM (bir bayrağın arkasında) |
| Safari | macOS Tahoe, iOS, iPadOS ve visionOS'ta 26 (Eylül 2025, WebKit kaynağına göre) | Daha eski macOS sürümleri |
| Firefox | Windows'ta 141 (Temmuz 2025), macOS 26 çalıştıran Apple Silicon Mac'lerde 145, Apple Silicon'lu tüm macOS sürümlerinde 147 (Ocak 2026) | Linux ve Android (yalnızca Nightly, Linux için 2026 hedefleniyor) |
| Samsung Internet | 24+ |
Bu, caniuse'nin sayımına göre küresel sayfa görüntülemelerinin yaklaşık %87'sine denk geliyor ve motorların bu yöne kaymasının nedeni de bu. Unity 6.6 (Ağustos 2026), otomatik WebGL2 geri düşüşüyle birlikte WebGPU'yu tam desteklenen bir web grafik API'si haline getirdi; Three.js r185 ve Babylon.js 9.25, kendi kendine geri düşen WebGPU render motorlarını çalıştırıyor, PlayCanvas 2.22 olgun bir WebGPU yoluna sahip ve Godot 4.7 ile Phaser 4, tarayıcıda hâlâ yalnızca WebGL2 kullanıyor. Render ödünleşimleri için oyunlar için WebGPU ve WebGL karşılaştırması rehberimize bakın ve belirli bir cihazın ne rapor ettiğini görmek için WebGL ve WebGPU kontrol aracını çalıştırın.
Buradaki incelik şu: geri kalan cihazlarda ve tarayıcılarda bu destek yok, dolayısıyla bir geri düşüş (fallback) stratejisine ihtiyacınız var.
Neler Elde Edersiniz
Compute shader'lar; fizik, parçacıklar, yapay zekâ ve görüntü işleme için genel amaçlı GPU hesaplaması çalıştırmanızı sağlar.
// A compute shader that processes data in parallel
const computeShaderCode = `
@group(0) @binding(0) var<storage, read_write> data: array<f32>;
@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3<u32>) {
data[id.x] = data[id.x] * 2.0;
}
`;Ayrıca daha az performans sürprizi anlamına gelen açık kaynak yönetimi, tekrar kullanılan draw call'ları önceden kaydeden render bundle'ları ve C benzeri bir hack yerine GPU'lar için tasarlanmış modern bir shader dili olan WGSL'i elde edersiniz.
Pratik WebGPU Kurulumu
WebGL geri düşüşüyle WebGPU'nun nasıl başlatılacağı burada:
async function initGraphics(canvas) {
// Try WebGPU first
if (navigator.gpu) {
const adapter = await navigator.gpu.requestAdapter();
if (adapter) {
const device = await adapter.requestDevice();
const context = canvas.getContext('webgpu');
context.configure({
device,
format: navigator.gpu.getPreferredCanvasFormat(),
});
return { type: 'webgpu', device, context };
}
}
// Fall back to WebGL 2
const gl = canvas.getContext('webgl2');
if (gl) {
return { type: 'webgl2', gl };
}
// Last resort: WebGL 1
const gl1 = canvas.getContext('webgl');
if (gl1) {
return { type: 'webgl', gl: gl1 };
}
throw new Error('No graphics API available');
}Ne Zaman Gerçekten Yardımcı Olur
WebGPU; milyonlarca parçacığı CPU'ya gidip gelmeden güncellemek için compute shader'lara ihtiyaç duyduğunuzda, GPU hızlandırmalı çarpışma tespiti ve kumaş simülasyonunda, arazi, doku veya mesh'lerin prosedürel üretiminde, SSAO, bloom ve derinlik alanı (depth of field) gibi karmaşık son işleme (post-processing) efektlerinde veya NPC davranışı ya da görüntü efektleri için eğitilmiş modelleri çalıştırmak istediğinizde parlar.
Bulmaca oyunu veya görsel roman yapıyorsanız, WebGPU size yardımcı olmaz. Parçacık yoğun bir aksiyon oyunu veya karmaşık bir 3D dünya yapıyorsanız, uyumluluk ödünleşimine değebilir.
WebAssembly: Hızlı CPU Kodu
WebAssembly, derlenmiş kodu neredeyse yerel (native) hızda çalıştırır. Bu grafiklerle ilgili değil. Bu, CPU kodunuzu daha hızlı hale getirmekle ilgili.
Ne Zaman Yardımcı Olur
Wasm; fizik motorları (Box2D, Bullet ve Rapier'in hepsinin Wasm derlemeleri var), büyük ızgaralarda yol bulma, varlık (asset) sıkıştırma çözme, eski oyun konsollarını emüle etme ve mevcut C++ veya Rust kod tabanlarını web'e taşıma konularında iyi çalışır.
Ne Zaman Yardımcı Olmaz
GPU'nuz, draw call'ların JavaScript'ten mi yoksa Wasm'dan mı geldiğini umursamaz, bu yüzden render işlemi daha hızlı olmaz. Varlıkları getirme veya ağ istekleri gibi G/Ç'ye (I/O) bağlı kod da bundan faydalanmaz. Ve JavaScript'iniz zaten bir milisaniyenin altında çalışıyorsa, Wasm sizi kurtarmaz.
Pratik Bir Wasm Örneği
İşte fizik için Wasm'a derlenmiş minimal bir Rust fonksiyonu:
// src/lib.rs
#[no_mangle]
pub extern "C" fn step_physics(dt: f32) {
// Your physics code here
}Şununla derleyin:
wasm-pack build --target webJavaScript içinde kullanın:
import init, { step_physics } from './physics_bg.wasm';
await init();
function gameLoop(dt) {
step_physics(dt); // Runs at near-native speed
render();
requestAnimationFrame(gameLoop);
}İş Parçacığı Kullanımı Karmaşıklaşıyor
Wasm, paralel işleme için iş parçacıkları (thread) kullanabilir, ancak bu SharedArrayBuffer gerektirir; yani sunucunuzda cross-origin isolation başlıklarına ihtiyacınız olur:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corpBu başlıklar bazı şeyleri bozar. CORP başlığı olmayan üçüncü taraf iframe'ler çalışmayı durdurur, bazı analitik betikleri bozulur ve OAuth pop-up'ları başarısız olabilir. Zararı azaltmak için require-corp yerine credentialless kullanabilirsiniz, ama yine de işler karışık kalır. Bu başlıkları paylaşımlı bir hosting üzerinde ya da itch.io'da ayarlayamıyorsanız, Wasm thread'lerini kullanamazsınız. Tek thread'li Wasm yine de sorunsuz çalışır.
Gerçek Oyunlar İçin Gerçek Kararlar
2D bir platform oyunu yapıyorsanız, Phaser veya PixiJS gibi bir şey aracılığıyla WebGL 2 kullanın. WebGPU'yu atlayın çünkü gereğinden fazlası, Wasm'ı da atlayın çünkü JavaScript 2D fizik için zaten yeterince hızlı. Geniş uyumluluk, en son özelliklerden daha önemlidir ve darboğazınız teknoloji değil, içeriktir.
3D açık dünya bir oyun yapıyorsanız, WebGL 2 ile başlayın ama bir WebGPU yükseltme yolu için tasarlayın. Fizik için Rapier veya Bullet kullanarak Wasm'ı düşünün. Şimdi en geniş erişimi istiyorsunuz ama compute shader'lar ilerleyen zamanda bitki örtüsü, parçacıklar ve LOD için işinize yarayacak. Fiziği Wasm'da tutmak CPU bütçesini düşük tutar.
Bir C++ motorunu port ediyorsanız, Emscripten aracılığıyla Wasm kullanın. Grafik varsayılan olarak WebGL 2 olacaktır, motorunuz destekliyorsa WebGPU da olabilir. Zaten kodunuz var ve Emscripten çeviriyi hallediyor.
Bir bulmaca oyunu yapıyorsanız, Canvas 2D veya Phaser aracılığıyla WebGL 2 kullanın. Geri kalan her şeyi atlayın. Basit oyunlar basit kalmalı.
Kesinlikle maksimum performansa ihtiyacınız varsa ve eski tarayıcılardaki bazı kullanıcıları kaybetmeye razıysanız, WebGPU artı Wasm'a gidin. Sadece bunu uygulamaya koymadan önce hedef kitleniz üzerindeki gerçek etkiyi ölçün.
Oyunları Gerçekten Hızlı Yapan Nedir
İşte web oyununuzun iyi çalışıp çalışmadığını önem sırasına göre belirleyen faktörler.
Varlık (asset) boyutu, algılanan performansın yaklaşık yarısını oluşturur. 1 saniyede yüklenen 2MB'lık bir oyun, daha yüksek FPS'ye sahip 50MB'lık bir oyundan daha hızlı hissettirir. Her şeyi sıkıştırın, 3D modeller için bir glTF optimizer Meshopt geçişini ve doku boyutlandırmasını tek seferde halleder. Yapabildiğiniz her şeyi tembel yükleme (lazy-load) ile ele alın.
Draw call'lar 3D oyunlar için oldukça önemlidir, performans bütçenizin belki de %30'unu oluşturur. Geometrinizi toplu (batch) hale getirin. Doku atlasları (texture atlas) kullanın. Tekrarlanan nesneleri instance'layın. Bu, WebGL'e karşı WebGPU'dan çok daha önemlidir.
JavaScript performansı belki %15'lik bir dilim. Sık çalışan döngülerde (hot loop) bellek ayırmaktan kaçının. Typed array'ler kullanın. Optimize etmeden önce profil çıkarın.
Grafik API seçimi mi? Dürüst olmak gerekirse, belki %5. Çoğu oyun için API, onu nasıl kullandığınızdan daha az önemlidir.
Oyununuz yavaşsa, önce baştan çok fazla şey yükleyip yüklemediğinizi kontrol edin. Sonra çok fazla draw call yapıp yapmadığınızı kontrol edin. Ardından JavaScript'inizin oyun döngüsünde aptalca bir şey yapıp yapmadığına bakın. Ancak tüm bunlardan sonra farklı bir grafik API'sinin yardımcı olup olmayacağını sorgulamalısınız.
Gerçekte Ne Kullanırdım
Bugün başlayan yeni bir web oyunu için, WebGL ve WebGPU'yu soyutladıkları için render için Three.js (r185, Temmuz 2026) veya Babylon.js (9.x) kullanırdım. Fizik için, 3D fiziğe ihtiyacım varsa Rapier (Rust'tan Wasm'a derlenmiş), daha basit oyunlar içinse motorun yerleşik 2D fiziğini kullanırdım. Ses için Howler.js veya doğrudan Web Audio API. Geliştirme sürecinde hızlı olduğu ve iyi production build'ler ürettiği için Vite ile derleme. Ve Netlify, Vercel, GitHub Pages veya itch.io üzerinde statik hosting.
Bu yığın (stack), cihazların %98'inden fazlasında çalışan ve WebGPU varsayılan hale geldiğinde ona hazır olan oyunlar üretir.
Karar Vermeden Önce Test Edin
Bir teknoloji yığınına karar vermeden önce küçük bir prototip oluşturun ve gerçekten test edin. Chrome DevTools kısıtlaması (throttling) kullanarak 3G'de yükleme süresini kontrol edin. Oyununuz yavaş bir bağlantıda 5 saniyeden kısa sürede oynanabilir olmalı. Düşük seviyeli bir Android telefonda performansı test edin, ya birini ödünç alın ya da BrowserStack kullanın. Orada çalışıyorsa, her yerde çalışır. Özellikle Safari'de test edin çünkü sürpriz yaratacak kadar farklıdır. Ve oyununuz Newgrounds veya Kongregate'te yayınlanacaksa, bir iframe içinde test edin.
Bu testler, WebGL'e karşı WebGPU tartışmasından çok daha fazla gerçek sorun yakalar.
Sık Sorulan Sorular
Yüksek performanslı bir tarayıcı oyunu için en iyi modern teknoloji yığını nedir?
Her iki API ile de konuşabilen bir renderer, CPU'nun darboğaz olduğu yerlerde Wasm ve küçük bir build. Somut olarak: Three.js veya Babylon.js (otomatik WebGL2 yedeklemeli WebGPU), 3D fizik için Wasm'a derlenmiş Rapier, ses için Howler.js veya doğrudan Web Audio, build için Vite, varlıklar için KTX2 dokuları ve Meshopt ile sıkıştırılmış glTF, ve bir CDN arkasında statik hosting. Tam bir motordan başlamayı tercih ediyorsanız, PlayCanvas ve Unity 6.6'nın ikisi de yedeklemeli WebGPU sunar, Godot ise küçük bir WebGL2 build'i sağlar. Web oyun motorları karşılaştırması bunların hepsini build boyutu ve yükleme süresine göre sıralar.
WebGL 2026'da hâlâ kullanmaya değer mi?
Evet, ve hâlâ taban çizgisi (baseline). WebGL 2.0, oyuncularınızın sahip olduğu her tarayıcı ve cihazda çalışır; bu Linux ve Android'deki Firefox derlemelerini ve WebGPU'su henüz olmayan eski telefonları da kapsar. WebGPU'nun piyasaya sürülmesi, WebGL build'lerinin çalışmayı bırakmasına neden olmaz ve 2D oyunlar ile çoğu 3D oyun için WebGL2 zaten hiçbir zaman darboğaz olmadı. WebGL2 yayınlayın, renderer'ınız bunu size ücretsiz sunuyorsa bir yükseltme olarak WebGPU ekleyin ve çabanızı varlık boyutuna ve draw call'lara harcayın.
Basit oyunları WebGPU ile yapabilir miyim?
Yapabilirsiniz, ama nadiren buna ihtiyacınız olur. Bir bulmaca oyunu, bir platform oyunu veya bir kart oyunu, WebGPU'da WebGL2'ye göre daha iyi çalışmayacaktır ve tarayıcısında henüz WebGPU olmayan oyuncuları kaybedersiniz. WebGPU'nun basit bir oyunda kendini kanıtladığı yer, tek bir efektin compute'a ihtiyaç duyduğu durumlardır: binlerce parçacık, bir sıvı veya kumaş oyuncağı, GPU tarafından yönetilen bir kalabalık. Bu durumda ham WebGPU yazmak yerine otomatik olarak yedeğe düşen bir kütüphane kullanın (Three.js veya Babylon.js), ya da oyunu tarif edin ve Cinevva'nın sizin için WebGPU üzerinde inşa etmesine izin verin. WebGPU başlangıç eğitimimiz ham API'yi isterseniz kapsıyor.
Daha Fazla Okuma
Web Oyun Motorları Karşılaştırması, sıfırdan inşa etmek istemiyorsanız tam motorları ele alır. Tarayıcıda Three.js + USDC, USD varlıklarını Three.js'de nasıl yükleyeceğinizi gösterir. itch.io'da Nasıl Yayınlanır, bir şey inşa ettikten sonra yayınlama sürecini ele alır.
Her API'ye daha derinlemesine giren uygulamalı eğitimler için:
- Oyun geliştiriciler için WebGL temelleri: shader'lar, buffer'lar, dokular ve render döngüsü
- WebGPU başlangıç: cihaz kurulumu, pipeline'lar ve WGSL shader'ları
- Oyun mantığı için Web Worker'lar: işi arka plan thread'lerine aktarma
- COOP/COEP ve SharedArrayBuffer: Wasm thread'leme için gereken başlıklar
- Oyun fiziği kütüphaneleri: Rapier, Cannon-es, Ammo.js, Matter.js ve daha fazlası
Doğru teknoloji yığını, oyununuzu yayınlamanızı sağlayandır. Bildiğinizi seçin, erken test edin ve optimizasyonu sonraya bırakın.
WebGL, fizik ve varlık pipeline'ı hallediliyor. Siz sadece oyunu tarif edin.