Oyun geliştiriciler için WebGPU'ya başlangıç

WebGPU, WebGL'nin halefidir. Daha düşük seviyeli, daha açık ve modern GPU'lar için tasarlanmış bir API'dir. 2026'da yeni bir 3D projeye başlıyorsanız WebGPU'yu öğrenmeye değer.

WebGPU Eğitimi: Kurulumdan aydınlatmalı ve animasyonlu 3D işlemeye kadar uzanan 10 proje

1) Tarayıcı desteğini kontrol edin

if (!navigator.gpu) {
  console.error('WebGPU not supported')
}

2026 itibarıyla WebGPU; Chrome, Edge, Firefox ve Safari'de kullanılabilir.

2) Bir cihaz edinin

const adapter = await navigator.gpu.requestAdapter()
const device = await adapter.requestDevice()

Bağdaştırıcı, fiziksel GPU'yu temsil eder. Cihaz ise onunla iletişim kurmanızı sağlayan arayüzdür.

Her iki çağrı da başarısız olabilir. Sistemde kullanılabilir bir GPU olmadığında requestAdapter() değeri null döndürür ve requestDevice() çağrısı reddedilebilir; bu nedenle devam etmeden önce bunlara karşı önlem alın:

const adapter = await navigator.gpu.requestAdapter()
if (!adapter) throw new Error('No suitable GPU adapter found')
const device = await adapter.requestDevice()

Bir bağdaştırıcıdan cihaz oluşturduğunuzda bağdaştırıcı da tüketilir; bu nedenle başka bir cihaza ihtiyacınız varsa yeni bir bağdaştırıcı isteyin.

3) Tuvali yapılandırın

const canvas = document.getElementById('game')
const context = canvas.getContext('webgpu')
const format = navigator.gpu.getPreferredCanvasFormat()

context.configure({
  device,
  format,
  alphaMode: 'premultiplied',
})

4) Gölgelendiricileri WGSL ile yazın

WebGPU, GLSL yerine WGSL'yi (WebGPU Gölgelendirme Dili) kullanır.

@vertex
fn vs_main(@builtin(vertex_index) idx: u32) -> @builtin(position) vec4f {
  var pos = array<vec2f, 3>(
    vec2f( 0.0,  0.5),
    vec2f(-0.5, -0.5),
    vec2f( 0.5, -0.5),
  );
  return vec4f(pos[idx], 0.0, 1.0);
}

@fragment
fn fs_main() -> @location(0) vec4f {
  return vec4f(1.0, 0.5, 0.2, 1.0); // orange
}

5) Bir gölgelendirici modülü oluşturun

const shaderModule = device.createShaderModule({
  code: wgslSource,
})

6) Bir işleme işlem hattı oluşturun

const pipeline = device.createRenderPipeline({
  layout: 'auto',
  vertex: {
    module: shaderModule,
    entryPoint: 'vs_main',
  },
  fragment: {
    module: shaderModule,
    entryPoint: 'fs_main',
    targets: [{ format }],
  },
})

7) Bir kare işleyin

function render() {
  const commandEncoder = device.createCommandEncoder()
  const textureView = context.getCurrentTexture().createView()

  const renderPass = commandEncoder.beginRenderPass({
    colorAttachments: [{
      view: textureView,
      clearValue: { r: 0, g: 0, b: 0, a: 1 },
      loadOp: 'clear',
      storeOp: 'store',
    }],
  })

  renderPass.setPipeline(pipeline)
  renderPass.draw(3)
  renderPass.end()

  device.queue.submit([commandEncoder.finish()])
  requestAnimationFrame(render)
}
render()

8) WebGPU'da tamponlar

const vertices = new Float32Array([
  -0.5, -0.5,
   0.5, -0.5,
   0.0,  0.5,
])

const vertexBuffer = device.createBuffer({
  size: vertices.byteLength,
  usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
})

device.queue.writeBuffer(vertexBuffer, 0, vertices)

9) Tekbiçimli değişkenler için bağlama grupları

const uniformBuffer = device.createBuffer({
  size: 64,
  usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
})

const bindGroup = device.createBindGroup({
  layout: pipeline.getBindGroupLayout(0),
  entries: [{
    binding: 0,
    resource: { buffer: uniformBuffer },
  }],
})

10) WebGPU ve WebGL karşılaştırması

Özellik	WebGL	WebGPU
API tarzı	OpenGL benzeri, durum bilgili	Modern, açık
Gölgelendiriciler	GLSL	WGSL
Hesaplama	Sınırlı (uzantılar)	Birinci sınıf destek
Çoklu iş parçacığı	Zor	Bunun için tasarlandı
Tarayıcı desteği	Evrensel	Tüm büyük tarayıcılar (Chrome, Edge, Safari 26, Firefox)

WebGPU ne zaman kullanılmalı?

• Modern tarayıcıları hedefleyen yeni projelerde
• Yoğun hesaplama gerektiren iş yüklerinde (fizik, yapay zekâ, prosedürel üretim)
• GPU kaynakları üzerinde ayrıntılı denetime ihtiyaç duyduğunuzda

İlgili içerikler

• WebGL'nin temelleri
• Oyun mantığı için Web Workers
• Hızlı yüklenen bir web oyunu yayınlayın
• 2026'da Web Oyunları Teknoloji Yığını — WebGL, WebGPU ve Wasm arasında seçim yapmak için karar çerçevesi
• COOP/COEP ve SharedArrayBuffer — WebGPU hesaplamayla Wasm iş parçacığı kullanımı için gerekli üst bilgiler

Harici Kaynaklar

• WebGPU belirtimi — W3C belirtimi
• WGSL belirtimi — WebGPU Gölgelendirme Dili belirtimi
• WebGPU'nun Temelleri — ayrıntılı eğitim serisi
• İlk WebGPU uygulamanız — adım adım Google Codelab rehberi