2026'da Web Oyunları Teknoloji Yığını
Web oyunlarına üç teknoloji güç veriyor: WebGL, WebGPU ve WebAssembly. Her biri farklı sorunları çözüyor ve farklı ödünler gerektiriyor. Bu rehber, en çok konuşulan teknolojiye göre değil, gerçekten geliştirdiğiniz oyuna göre seçim yapmanıza yardımcı olur.
Kısa Yanıt
WebGL 2.0 her yerde çalışır ve çoğu oyunun ihtiyaçlarını rahatlıkla karşılar. Özellikle mobilde geniş uyumluluğa ihtiyacınız varsa kullanın. WebGPU, compute shader'ları ve daha iyi performans sunar ancak eski tarayıcı ve cihazlardaki kullanıcıları kaybedersiniz. WebAssembly, CPU kodunuzu hızlandırır; dolayısıyla fizik ve yol bulma için kullanışlıdır ancak darboğazınız GPU ise yardımcı olmaz.
2026'da çoğu oyun, uyumlu tarayıcılar için isteğe bağlı WebGPU desteğiyle birlikte WebGL kullanıyor. Wasm ise oyunun tamamında değil, yoğun işlem gerektiren belirli kod yollarında kullanılıyor.
WebGL 2.0: İşe Yarayan Sıkıcı Seçim
WebGL 2.0, 2017'den beri kararlı durumda. Tüm modern tarayıcılar tarafından destekleniyor. Oyununuz Chrome, Firefox, Safari ve Edge'in 5 yıldan eski sürümlerinde bile çalışır. iOS Safari 15+, Android için Chrome ve Samsung Internet üzerinde çalışır. Hatta Xbox Edge ve PlayStation tarayıcısı gibi konsol tarayıcılarında bile çalışır.
Temel bir WebGL 2 kurulumu şöyle görünür:
const canvas = document.getElementById('game');
const gl = canvas.getContext('webgl2');
if (!gl) {
// WebGL 1'e geri dön veya hata göster
const gl1 = canvas.getContext('webgl');
if (!gl1) {
showError('Tarayıcınız WebGL desteklemiyor.');
return;
}
}
// Artık bir GL bağlamınız var
gl.clearColor(0.1, 0.1, 0.1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);Neler Sunuyor?
WebGL 2, örneklemeli çizim sayesinde binlerce nesneyi tek bir çizim çağrısıyla oluşturmanıza olanak tanır. GPU taraflı parçacık sistemleri ve simülasyonlar için transform feedback özelliğine sahiptir. Ertelenmiş oluşturma ve G-buffer'lar için birden fazla oluşturma hedefi, hacimsel efektler için 3B dokular ve hassas veri depolama için tamsayı dokular sunar.
gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, instanceCount);Neler Sunmuyor?
Genel amaçlı GPU hesaplamaları için compute shader çalıştıramazsınız. Bindless texture desteği olmadığı için doku birimi sayısıyla sınırlı kalırsınız. Kalıcı eşleme veya açık bellek kontrolü yoktur. Mesh shader'lar veya modern geometri işlem hattı da bulunmaz.
Çoğu 2B ve birçok 3B oyun için bu sınırlamalar önemli değildir. Şimdiye kadarki en başarılı web oyunlarından bazıları WebGL 2 ile yayımlandı.
WebGPU: Daha Fazlasına İhtiyacınız Olduğunda
WebGPU, modern GPU'ların gerçekte nasıl çalıştığı temel alınarak tasarlandı. Chrome bu desteği Mayıs 2023'te sundu ve 2025'in sonlarına gelindiğinde tüm büyük tarayıcılar desteklemeye başladı. Chrome 113+, Safari 26+ ve Edge 113+ sürümlerinin tümü çalışıyor. Firefox ise Windows'ta 141+ sürümünde (Temmuz 2025'ten beri), Apple Silicon macOS için de 145 sürümünde bu özelliği etkinleştirdi; Linux ve Android desteğinin dağıtımıysa hâlâ sürüyor. Android için Chrome, güncel cihazlarda destek sunarken iOS Safari 26+ da WebGPU'yu destekliyor.
Dezavantajı, eski cihaz ve tarayıcıların bunu desteklememesi; dolayısıyla bir geri dönüş stratejisine ihtiyacınız var.
Neler Sunuyor?
Compute shader'lar; fizik, parçacıklar, yapay zekâ ve görüntü işleme için genel amaçlı GPU hesaplamaları çalıştırmanıza olanak tanır.
// Verileri paralel olarak işleyen bir compute shader
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 beklenmedik performans sorunuyla karşılaşmanızı sağlayan açık kaynak yönetimine, tekrar kullanılacak çizim çağrılarını önceden kaydetmek için render bundle'lara ve C benzeri bir geçici çözüm yerine GPU'lar için tasarlanmış modern bir shader dili olan WGSL'ye sahip olursunuz.
Pratik WebGPU Kurulumu
WebGL geri dönüşüyle WebGPU'yu şu şekilde başlatabilirsiniz:
async function initGraphics(canvas) {
// Önce WebGPU'yu dene
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 };
}
}
// WebGL 2'ye geri dön
const gl = canvas.getContext('webgl2');
if (gl) {
return { type: 'webgl2', gl };
}
// Son çare: WebGL 1
const gl1 = canvas.getContext('webgl');
if (gl1) {
return { type: 'webgl', gl: gl1 };
}
throw new Error('Kullanılabilir grafik API\'si yok');
}Gerçekte Ne Zaman Fayda Sağlar?
WebGPU; CPU ile veri alışverişi yapmadan milyonlarca parçacığı güncellemek, GPU hızlandırmalı çarpışma algılama ve kumaş simülasyonu yapmak, arazi, doku veya mesh'leri prosedürel olarak üretmek, SSAO, bloom ve alan derinliği gibi karmaşık son işleme efektleri uygulamak ya da NPC davranışları veya görüntü efektleri için eğitilmiş modeller çalıştırmak istediğinizde öne çıkar.
Bir bulmaca oyunu veya görsel roman yapıyorsanız WebGPU size yardımcı olmaz. Parçacık ağırlıklı bir aksiyon oyunu veya karmaşık bir 3B dünya geliştiriyorsanız uyumluluktan ödün vermeye değebilir.
WebAssembly: Hızlı CPU Kodu
WebAssembly, derlenmiş kodu yerel hıza yakın bir performansla çalıştırır. Grafiklerle ilgili değildir. CPU kodunuzu hızlandırmakla ilgilidir.
Ne Zaman Fayda Sağlar?
Wasm; fizik motorları (Box2D, Bullet ve Rapier'in tümünün Wasm derlemeleri vardır), büyük ızgaralarda yol bulma, varlıkları sıkıştırılmış hâlden çıkarma, eski oyun konsollarını emüle etme ve mevcut C++ veya Rust kod tabanlarını web'e taşıma konusunda iyi çalışır.
Ne Zaman Fayda Sağlamaz?
GPU'nuz çizim çağrılarının JavaScript'ten mi yoksa Wasm'dan mı geldiğini önemsemez; dolayısıyla oluşturma işlemi hızlanmaz. Varlıkları getirme veya ağ istekleri gibi G/Ç sınırlı kodlar da bundan fayda sağlamaz. JavaScript kodunuz zaten bir milisaniyeden kısa sürede çalışıyorsa Wasm sizi kurtarmaz.
Pratik Bir Wasm Örneği
Fizik işlemleri için Wasm'a derlenmiş minimal bir Rust işlevi şöyle görünür:
// src/lib.rs
#[no_mangle]
pub extern "C" fn step_physics(dt: f32) {
// Fizik kodunuz buraya
}Şununla derleyin:
wasm-pack build --target webJavaScript'te kullanın:
import init, { step_physics } from './physics_bg.wasm';
await init();
function gameLoop(dt) {
step_physics(dt); // Yerel hıza yakın performansla çalışır
render();
requestAnimationFrame(gameLoop);
}İş Parçacıkları İşleri Karmaşıklaştırıyor
Wasm paralel işlemler için iş parçacıkları kullanabilir ancak bunun için SharedArrayBuffer gerekir; bu da sunucunuzda çapraz kaynak izolasyon başlıklarını ayarlamanız gerektiği anlamına gelir:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corpBu başlıklar bazı şeyleri bozar. CORP başlıkları bulunmayan üçüncü taraf iframe'ler çalışmayı durdurur, bazı analiz betikleri bozulur ve OAuth açılır pencereleri başarısız olabilir. Zararı azaltmak için require-corp yerine credentialless kullanabilirsiniz ancak süreç yine de karmaşıktır.
Paylaşımlı barındırma veya itch.io kullandığınız için bu başlıkları ayarlayamıyorsanız Wasm iş parçacıklarını kullanamazsınız. Ancak tek iş parçacıklı Wasm yine de sorunsuz çalışır.
Gerçek Oyunlar İçin Gerçek Kararlar
Bir 2B platform oyunu yapıyorsanız Phaser veya PixiJS gibi bir araç üzerinden WebGL 2 kullanın. Gereğinden fazla olduğu için WebGPU'yu, JavaScript 2B fizik için yeterince hızlı olduğu için de Wasm'ı atlayın. Geniş uyumluluk, en yeni özelliklerden daha önemlidir ve darboğazınız teknoloji değil içeriktir.
Bir 3B açık dünya yapıyorsanız WebGL 2 ile başlayın ancak WebGPU'ya yükseltme yolunu göz önünde bulundurarak tasarlayın. Rapier veya Bullet kullanarak fizik işlemleri için Wasm'ı değerlendirin. Şimdilik mümkün olan en geniş kitleye ulaşmak istersiniz ancak compute shader'lar ileride bitki örtüsü, parçacıklar ve LOD konusunda yardımcı olur. Wasm'da çalışan fizik, CPU bütçesini düşük tutar.
Bir C++ motorunu aktarıyorsanız Emscripten üzerinden Wasm kullanın. Grafikler varsayılan olarak WebGL 2 veya motorunuz destekliyorsa WebGPU kullanır. Kod zaten elinizde ve çeviri işlemini Emscripten gerçekleştirir.
Bir bulmaca oyunu yapıyorsanız Phaser üzerinden Canvas 2D veya WebGL 2 kullanın. Diğer her şeyi atlayın. Basit oyunlar basit kalmalıdır.
Mutlak anlamda en yüksek performansa ihtiyacınız varsa ve eski tarayıcılardaki bazı kullanıcıları kaybetmeyi göze alıyorsanız WebGPU ile Wasm'ı birlikte kullanın. Ancak karar vermeden önce kitleniz üzerindeki gerçek etkisini ölçün.
Oyunları Gerçekte Hızlandıran Şeyler
Önem sırasına göre web oyununuzun iyi çalışıp çalışmayacağını belirleyen etkenler şunlardır.
Varlık boyutu, algılanan performansın yaklaşık yarısını oluşturur. 1 saniyede yüklenen 2 MB'lık bir oyun, daha iyi FPS değerine sahip 50 MB'lık bir oyundan daha hızlı hissettirir. Her şeyi sıkıştırın. Mümkün olanları tembel yükleyin.
Çizim çağrıları 3B oyunlar için çok önemlidir ve performans bütçenizin belki de %30'unu oluşturur. Geometrilerinizi toplu işleyin. Doku atlasları kullanın. Tekrarlanan nesneleri örnekleyin. Bunlar WebGL ile WebGPU arasındaki seçimden çok daha önemlidir.
JavaScript performansının payı belki %15'tir. Yoğun döngülerde bellek ayırmaktan kaçının. Türlendirilmiş diziler kullanın. Optimizasyon yapmadan önce profil çıkarın.
Grafik API'si seçimi mi? Dürüst olmak gerekirse belki %5. Çoğu oyun için hangi API'yi kullandığınızdan çok, onu nasıl kullandığınız önemlidir.
Oyununuz yavaşsa önce başlangıçta çok fazla şey yükleyip yüklemediğinizi kontrol edin. Ardından çok fazla çizim çağrısı yapıp yapmadığınıza bakın. Sonra JavaScript kodunuzun oyun döngüsünde anlamsız bir işlem yapıp yapmadığını kontrol edin. Ancak bunların hepsinden sonra farklı bir grafik API'sinin yardımcı olup olmayacağını sorgulamalısınız.
Ben Gerçekte Ne Kullanırdım?
Bugün yeni bir web oyununa başlayacak olsaydım WebGL ve WebGPU'yu soyutladıkları için oluşturma işlemlerinde Three.js veya Babylon.js kullanırdım. Fizik için 3B fiziğe ihtiyacım varsa Rapier'ı (Wasm'a derlenmiş Rust), daha basit oyunlar içinse motorun yerleşik 2B fizik sistemini kullanırdım. Ses için Howler.js'i veya doğrudan Web Audio API'sini tercih ederdim. Geliştirme sırasında hızlı olduğu ve iyi üretim derlemeleri oluşturduğu için Vite kullanırdım. Barındırma için de Netlify, Vercel, GitHub Pages veya itch.io üzerinde statik barındırmayı seçerdim.
Bu teknoloji yığını, cihazların %98'inden fazlasında çalışan ve WebGPU varsayılan hâle geldiğinde buna hazır olan oyunlar yayımlamanızı sağlar.
Karar Vermeden Önce Test Edin
Bir teknoloji yığınında karar kılmadan önce küçük bir prototip oluşturun ve gerçekten test edin. Chrome DevTools ağ kısıtlama özelliğini kullanarak 3G'deki yükleme süresini kontrol edin. Oyununuz yavaş bir bağlantıda 5 saniyeden kısa sürede oynanabilir olmalıdır. Düşük donanımlı bir Android telefonda performansı test edin; bir tane ödünç alın veya BrowserStack kullanın. Orada çalışıyorsa her yerde çalışır. Sürprizlere yol açacak kadar farklı olduğu için özellikle Safari'de test edin. Oyununuz Newgrounds veya Kongregate'te yer alacaksa bir iframe içinde de test edin.
Bu testler, WebGL ile WebGPU'yu tartışmaktan çok daha fazla gerçek sorunu ortaya çıkarır.
Daha Fazla Okuma
Web Oyun Motorları Karşılaştırması, sıfırdan geliştirmek istemiyorsanız kapsamlı oyun motorlarını ele alır. Tarayıcıda Three.js + USDC, USD varlıklarının Three.js'e nasıl yükleneceğini gösterir. itch.io'da Nasıl Yayımlanır?, bir şey geliştirdikten sonraki yayımlama sürecini ele alır.
Her API'yi daha ayrıntılı şekilde ele alan uygulamalı eğitimler:
- Oyun geliştiricileri için WebGL temelleri — shader'lar, buffer'lar, dokular ve oluşturma döngüsü
- WebGPU'ya başlangıç — cihaz kurulumu, işlem hatları ve WGSL shader'ları
- Oyun mantığı için Web Worker'lar — işleri arka plan iş parçacıklarına aktarma
- COOP/COEP ve SharedArrayBuffer — Wasm iş parçacıkları için gerekli 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ımlamanızı sağlayan yığındır. Bildiğiniz araçları seçin, erken test edin ve daha sonra optimize edin.
WebGL, fizik ve varlık işlem hattı hazır. Yalnızca oyunu tarif edin.