Oyun geliştiricileri için WebGL temelleri

WebGL, tarayıcıda GPU'ya doğrudan erişim sağlar. 3D ve yüksek performanslı 2D web oyunlarının temelini oluşturur. Bu eğitimde temel konuları ele alacağız.

1) WebGL bağlamı oluşturma

const canvas = document.getElementById('game')
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl')

if (!gl) {
  // Fallback or error message
  console.error('WebGL not supported')
}

Kullanılabildiğinde webgl2yi tercih edin; yaygın biçimde desteklenir ve daha gelişmiş özellikler sunar.

2) Render hattı (basitleştirilmiş)

1. Vertex shader, her vertex için bir kez çalışır. Geometrinizi konumlandırır.
2. Fragment shader, her piksel için bir kez çalışır. Çıktıyı renklendirir.
3. Buffer'lar verileri (konumlar, UV'ler, renkler) tutar.
4. Dokular, shader'ların örneklediği görsellerdir.

3) Minimal bir shader çifti

Vertex shader:

#version 300 es
in vec2 a_position;
void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
}

Fragment shader:

#version 300 es
precision mediump float;
out vec4 fragColor;
void main() {
  fragColor = vec4(1.0, 0.5, 0.2, 1.0); // orange
}

4) Shader'ları derleme ve bağlama

function createShader(gl, type, source) {
  const shader = gl.createShader(type)
  gl.shaderSource(shader, source)
  gl.compileShader(shader)
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error(gl.getShaderInfoLog(shader))
    gl.deleteShader(shader)
    return null
  }
  return shader
}

function createProgram(gl, vs, fs) {
  const program = gl.createProgram()
  gl.attachShader(program, vs)
  gl.attachShader(program, fs)
  gl.linkProgram(program)
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error(gl.getProgramInfoLog(program))
    return null
  }
  return program
}

5) Buffer oluşturma

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

const buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)

6) Buffer'ları shader'lara bağlama

const positionLoc = gl.getAttribLocation(program, 'a_position')
gl.enableVertexAttribArray(positionLoc)
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)

7) Oyun döngüsü

function render() {
  gl.viewport(0, 0, canvas.width, canvas.height)
  gl.clearColor(0, 0, 0, 1)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.useProgram(program)
  gl.drawArrays(gl.TRIANGLES, 0, 3)

  requestAnimationFrame(render)
}
render()

8) Doku yükleme

function loadTexture(gl, url) {
  const texture = gl.createTexture()
  gl.bindTexture(gl.TEXTURE_2D, texture)

  // Placeholder pixel until image loads
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
    new Uint8Array([255, 0, 255, 255]))

  const img = new Image()
  img.onload = () => {
    gl.bindTexture(gl.TEXTURE_2D, texture)
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img)
    gl.generateMipmap(gl.TEXTURE_2D)
  }
  img.src = url
  return texture
}

9) Sık karşılaşılan sorunlar

• İkinin kuvveti boyutundaki dokular WebGL 2'de kesinlikle gerekli değildir ancak mipmap'ler bunlarla daha iyi çalışır.
• Bağlam kaybı: webglcontextlost olaylarını yönetin; mobil tarayıcılar bellek baskısı altında bağlamları bellekten çıkarabilir.
• Float dokular için uzantı kontrolleri (EXT_color_buffer_float) gerekir.

10) Ne zaman bir kütüphane kullanılmalı?

Saf WebGL ile kod yazmak çok ayrıntılıdır. Çoğu oyun için şunları değerlendirin:

• Three.js — tam özellikli 3D
• PixiJS — hızlı 2D render
• PlayCanvas — editörlü oyun motoru

Saf WebGL'yi şu durumlarda kullanın:

• maksimum kontrole ihtiyacınız varsa
• özel bir render sistemi geliştiriyorsanız
• sistemin gerçekte nasıl çalıştığını öğrenmek istiyorsanız

2026 için bir not: WebGPU artık tüm büyük tarayıcılarda varsayılan olarak sunuluyor (Chrome ve Edge'de 113. sürümden, Firefox'ta Windows için 141. ve macOS için 145. sürümden itibaren; ayrıca iOS 26, iPadOS 26 ve macOS Tahoe 26'daki Safari'de). Three.js gibi kütüphaneler WebGPU render sistemlerini otomatik WebGL 2 geri dönüşüyle çalıştırdığından, buradaki temeller hâlâ geçerlidir ve WebGL 2 güvenilir temel olmaya devam eder. Bugün sıfırdan yeni bir render sistemi geliştirmeye başlıyorsanız bir API'ye karar vermeden önce WebGPU eğitimini de bununla birlikte okuyun.

İlgili içerikler

• Oyunlar için WebGPU
• Canvas 2D oyun döngüsü
• Hızlı yüklenen bir web oyunu yayınlama
• 2026'da Web Oyunları Teknoloji Yığını — WebGL, WebGPU ve Wasm arasında ne zaman seçim yapılmalı?
• Oyun fiziği kütüphaneleri — WebGL üzerinden render yapan fizik motorları
• Web Oyun Motorları Karşılaştırması — Three.js, PixiJS, PlayCanvas ve diğerleri

Harici Kaynaklar

• MDN: WebGL API'si — eksiksiz API referansı
• WebGL2 Temelleri — ayrıntılı WebGL2 eğitim serisi
• Shader Kitabı — GLSL fragment shader'ları için etkileşimli rehber
• Three.js dokümantasyonu — en popüler WebGL çatısı