WebGL – Grundlagen für Kreative

WebGL (Web Graphics Library) ist eine JavaScript-API, die OpenGL ES direkt im Browser-Canvas ausführt und damit GPU-beschleunigte 2D- und 3D-Grafik ohne Plugins ermöglicht.

Was ist WebGL?

WebGL ist eine vom Khronos-Konsortium standardisierte API, die seit 2011 (WebGL 1.0) in alle großen Browser integriert ist. WebGL 2.0 (2017) erweitert die Möglichkeiten erheblich. Die API basiert auf OpenGL ES 2.0/3.0 und läuft direkt auf der GPU des Geräts.

Für Web-Designer und Kreative ist die reine WebGL-API sehr niederschwellig – man schreibt Shader-Programme in GLSL (OpenGL Shading Language), handelt Buffer und Matrizen. In der Praxis nutzen die meisten Kreativen Abstraktionsbibliotheken wie Three.js – 3D im Browser oder p5.js/GLSL-Sandboxes.

Trotzdem lohnt das Verständnis von WebGL-Grundkonzepten, um zu verstehen, was im Hintergrund passiert.

Erklärung

Konzepte verstehen

GPU vs. CPU: WebGL führt Code auf der GPU aus. Die GPU ist für parallele Berechnungen optimiert: Während eine CPU 8–32 Kerne hat, hat eine moderne GPU Tausende Shader-Kerne. Ideal für Grafikoperationen.

Shader: Programme, die auf der GPU laufen, in GLSL geschrieben:

• Vertex Shader: Berechnet Position jedes Eckpunkts einer 3D-Geometrie
• Fragment Shader: Bestimmt die Farbe jedes Pixels

Pipeline: Vertices → Vertex Shader → Rasterisierung → Fragment Shader → Pixel

Minimales WebGL-Beispiel

```javascript const canvas = document.querySelector('#canvas'); const gl = canvas.getContext('webgl2');

// Vertex Shader (GLSL) const vertexShaderSource = `#version 300 es in vec4 a_position;

void main() { glPosition = aposition; }`;

// Fragment Shader (GLSL) const fragmentShaderSource = `#version 300 es precision highp float; out vec4 outColor;

void main() { outColor = vec4(0.0, 0.47, 1.0, 1.0); // RGBA: Blau }`;

// Shader kompilieren function erstelleShader(gl, typ, source) { const shader = gl.createShader(typ); 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; }

const vertexShader = erstelleShader(gl, gl.VERTEXSHADER, vertexShaderSource); const fragmentShader = erstelleShader(gl, gl.FRAGMENTSHADER, fragmentShaderSource);

// Programm verlinken const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program);

// Dreieck-Geometrie const positionen = new Float32Array([ 0.0, 0.5, // oben mitte -0.5, -0.5, // unten links 0.5, -0.5 // unten rechts ]);

const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAYBUFFER, buffer); gl.bufferData(gl.ARRAYBUFFER, positionen, gl.STATIC_DRAW);

// Zeichnen gl.useProgram(program); const positionLocation = gl.getAttribLocation(program, 'a_position'); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLORBUFFERBIT); gl.drawArrays(gl.TRIANGLES, 0, 3); ```

GLSL Shader-Grundlagen

Fragment Shader sind das kreative Herz von WebGL. Sie berechnen die Farbe jedes Pixels:

```glsl #version 300 es precision highp float;

// Uniforms: Werte aus JavaScript übergeben uniform vec2 uresolution; // Canvas-Größe uniform float utime; // Vergangene Zeit in Sekunden uniform vec2 u_mouse; // Mausposition

out vec4 outColor;

void main() { // Normalisierte Koordinaten: 0.0 bis 1.0 vec2 uv = glFragCoord.xy / uresolution;

// Farbverlauf von links-blau nach rechts-cyan vec3 farbe = mix( vec3(0.0, 0.47, 1.0), // Blau vec3(0.0, 0.8, 0.9), // Cyan uv.x // Mischfaktor );

// Pulsierend mit Zeit farbe = 0.8 + 0.2 sin(u_time * 2.0);

outColor = vec4(farbe, 1.0); } ```

Uniforms aus JavaScript übergeben

```javascript // Uniform-Locations abfragen const utime = gl.getUniformLocation(program, 'utime'); const uresolution = gl.getUniformLocation(program, 'uresolution'); const umouse = gl.getUniformLocation(program, 'umouse');

// In der Animations-Loop aktualisieren let startZeit = Date.now();

function render() { const zeit = (Date.now() - startZeit) / 1000;

gl.uniform1f(utime, zeit); gl.uniform2f(uresolution, canvas.width, canvas.height);

gl.clear(gl.COLORBUFFERBIT); gl.drawArrays(gl.TRIANGLES, 0, 3); // Fullscreen Quad für Shader

requestAnimationFrame(render); } ```

Praktischer: GLSL-Sandboxes und Shadertoy

Für kreative Erkundung empfehlen sich:

• Shadertoy.com (Inigo Quilez, 2013) – Browser-basierte GLSL-Sandbox mit tausenden Community-Shadern
• The Book of Shaders (Patricio Gonzalez Vivo, laufend) – Interaktives Tutorial
• GLSL Sandbox (glslsandbox.com)

Shadertoy-Shader lassen sich mit kleinen Anpassungen in eigene Projekte portieren.

Beispiele

WebGL über Three.js nutzen (empfohlen für Projekte)

Statt direktem WebGL empfiehlt sich Three.js – 3D im Browser für die meisten kreativen Projekte:

```javascript import * as THREE from 'three';

// Scene, Camera, Renderer const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

// Custom Shader Material in Three.js const material = new THREE.ShaderMaterial({ uniforms: { utime: { value: 0 } }, vertexShader: ` void main() { glPosition = projectionMatrix modelViewMatrix vec4(position, 1.0); } , fragmentShader: uniform float utime; void main() { float r = 0.5 + 0.5 * sin(utime); gl_FragColor = vec4(r, 0.47, 1.0, 1.0); } }); ``

Post-Processing Effekte

```javascript // Bloom, Glitch, CRT-Effekte via WebGL Post-Processing (Three.js) import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';

const composer = new EffectComposer(renderer); composer.addPass(new RenderPass(scene, camera)); composer.addPass(new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, // Stärke 0.4, // Radius 0.85 // Threshold )); ```

In der Praxis

Wann direktes WebGL, wann Three.js?

Direktes WebGL macht Sinn für:

• Maßgeschneiderte Shader-Effekte mit maximaler Kontrolle
• Lernzwecke und tiefes Verständnis
• Sehr einfache Anwendungen ohne 3D-Szenegraph

Three.js (oder Babylon.js, PlayCanvas) macht Sinn für:

• 3D-Szenen mit Objekten, Lichtern, Kameras
• Projekte mit Zeitdruck
• Teams, die keine GLSL-Expertise haben

Browser-Unterstützung: WebGL 1.0: Universal. WebGL 2.0: >97 % (2024). Der Fallback auf Software-Rendering ist langsam – immer prüfen:

``javascript if (!canvas.getContext('webgl2')) { document.body.innerHTML = '<p>Ihr Browser unterstützt WebGL 2 nicht.</p>'; } ``

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Muss ich Mathematik können für WebGL? Lineare Algebra (Vektoren, Matrizen) ist fundamental. Für Shader reicht oft trigonometrisches Grundwissen. The Book of Shaders erklärt alles schrittweise.

Kann WebGL barrierearm genutzt werden? WebGL-Canvas ist für Screenreader opak. Alternativ-Inhalte, ARIA-Beschreibungen und Fallbacks sind Pflicht.

Was ist der Unterschied zu WebGPU? WebGPU (2023 in Chrome) ist der modernere Nachfolger – expliziter, leistungsfähiger, aber noch nicht universell unterstützt. WebGL bleibt vorerst Standard.

Verwandte Einträge

• Three.js – 3D im Browser – Abstraktion über WebGL für 3D-Projekte
• HTML Canvas API für Animationen – Canvas 2D als einfachere Alternative
• Performance-Optimierung bei Web-Animationen – GPU-Beschleunigung verstehen
• CSS Transforms (2D & 3D) – CSS 3D als leichtgewichtigere 3D-Option

Weiterführend

• WebGL Fundamentals: webglfundamentals.org (Gregg Tavares, laufend)
• The Book of Shaders: thebookofshaders.com (Gonzalez Vivo & Lowe, laufend)
• Shadertoy: shadertoy.com – Community und Lernressource
• MDN: WebGL API – developer.mozilla.org
• Khronos Group: WebGL Specification – khronos.org