WebGL-Grundlagen für Spieleentwickler

WebGL gibt dir direkten GPU-Zugriff im Browser. Es ist die Grundlage für 3D-Web-Spiele und für performantes 2D. Dieses Tutorial deckt das Wesentliche ab.

1) Einen WebGL-Kontext holen

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

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

Nimm webgl2, wenn verfügbar. Es wird breit unterstützt und bietet die besseren Funktionen.

2) Die Render-Pipeline (vereinfacht)

1. Der Vertex-Shader läuft einmal pro Vertex. Er positioniert deine Geometrie.
2. Der Fragment-Shader läuft einmal pro Pixel. Er färbt die Ausgabe.
3. Buffer halten Daten (Positionen, UVs, Farben).
4. Texturen sind Bilder, die Shader abtasten.

3) Ein minimales Shader-Paar

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 kompilieren und linken

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 anlegen

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 mit Shadern verbinden

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

7) Die Spielschleife

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) Texturen laden

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) Typische Stolperfallen

• Zweierpotenz-Texturen sind in WebGL 2 nicht zwingend, Mipmaps funktionieren mit ihnen aber besser.
• Verlorener Kontext: Behandle webglcontextlost-Events. Mobile Browser räumen Kontexte bei Speicherdruck ab.
• Float-Texturen brauchen eine Prüfung auf Erweiterungen (EXT_color_buffer_float).

10) Wann eine Bibliothek sinnvoll ist

Rohes WebGL ist geschwätzig. Für die meisten Spiele lohnt ein Blick auf:

• Three.js — vollwertiges 3D
• PixiJS — schnelles 2D-Rendering
• PlayCanvas — Game-Engine mit Editor

Nimm rohes WebGL, wenn du brauchst:

• maximale Kontrolle
• einen eigenen Renderer
• ein echtes Verständnis davon, wie es funktioniert

Eine Anmerkung für 2026: WebGPU wird inzwischen in jedem großen Browser standardmäßig ausgeliefert (Chrome und Edge seit 113, Firefox 141 unter Windows und 145 unter macOS sowie Safari auf iOS 26, iPadOS 26 und macOS Tahoe 26). Die Grundlagen hier gelten weiterhin, denn Bibliotheken wie Three.js betreiben ihren WebGPU-Renderer mit automatischem WebGL-2-Fallback, WebGL 2 bleibt also die verlässliche Basis. Wenn du heute einen Renderer von Grund auf neu beginnst, lies das WebGPU-Tutorial parallel zu diesem, bevor du dich auf eine API festlegst.

Verwandt

• WebGPU für Spiele
• Canvas-2D-Spielschleife
• Ein Web-Spiel ausliefern, das schnell lädt
• Tech-Stack für Web-Spiele 2026 — wann WebGL, WebGPU oder Wasm die richtige Wahl ist
• Physik-Bibliotheken für Spiele — Physik-Engines, die über WebGL rendern
• Web-Game-Engines im Vergleich — Three.js, PixiJS, PlayCanvas und andere

Externe Ressourcen

• MDN: WebGL API — vollständige API-Referenz
• WebGL2 Fundamentals — ausführliche Tutorial-Reihe zu WebGL2
• The Book of Shaders — interaktiver Leitfaden zu GLSL-Fragment-Shadern
• Three.js documentation — das populärste WebGL-Framework