WebGL und WebAssembly in Game Engines

WebGL und WebAssembly sind die technischen Grundlagen für Browser-basierte Spiele: Unity WebGL und Godot Web Export nutzen diese Standards, während Three.js eine leichtgewichtige JavaScript-Alternative für 3D im Browser bietet.

Rubrik: Game Design & Interactive Media · Unterrubrik: Game Engines · Niveau: Fortgeschritten

Synonyme / Auch bekannt als: HTML5 Games, Browser Games, Web Export, WebGL Games, WASM Games

Was ist WebGL und WebAssembly?

WebGL (Web Graphics Library) ist eine JavaScript-API, die auf OpenGL ES 2.0/3.0 basiert und Hardware-beschleunigtes 3D-Rendering direkt im Browser ermöglicht – ohne Plugins. WebGL ist ein W3C/Khronos-Standard und seit 2011 in allen modernen Browsern verfügbar. WebGL 2.0 (2017) brachte Instanced Rendering, Transform Feedback und viele weitere Features.

WebAssembly (WASM) ist ein binäres Kompilierungsformat, das C, C++ und andere Sprachen zu Bytecode kompiliert, der im Browser mit nahezu nativer Geschwindigkeit ausgeführt wird. WASM ist seit 2017 Webstandard und wird von allen modernen Browsern unterstützt.

Zusammen ermöglichen WebGL + WASM die Portierung vollständiger Game-Engines in den Browser: Unity WebGL nutzt IL2CPP zu emcc (Emscripten C++) zu WASM; Godot kompiliert sein eigenes C++-Backend via Emscripten zu WASM.

Erklärung

Unity WebGL-Export

Unity's WebGL-Export kompiliert das gesamte Spiel – Engine, Skripte, Assets – in eine WebAssembly-Anwendung mit WebGL-Rendering.

Technischer Ablauf:

1. IL2CPP konvertiert C#-Code zu C++.
2. Emscripten kompiliert C++ zu WebAssembly.
3. Eine HTML-Seite mit JavaScript-Wrapper und WebGL-Canvas lädt die WASM-Datei.

Größe: Unity WebGL-Builds sind typischerweise groß – eine einfache Szene kann bereits 20–50 MB komprimiert sein. Das initiale Laden im Browser dauert entsprechend lang. Unity unterstützt Streaming (Brotli-Komprimierung) und WebGL Loading Bars.

Einschränkungen:

• Kein Thread-Support (WebAssembly-Threads sind in Browsern beschränkt; Unity-Features wie Job System eingeschränkt)
• Kein lokales Dateisystem-Zugriff (PlayerPrefs über IndexedDB)
• Einige Grafik-Features deaktiviert (kein Desktop-DX12/Vulkan)
• Mobile-Browser-Unterstützung variabel; viele Spiele laufen auf mobilen Browsern schlecht

Best Practices:

• Gzip/Brotli-Komprimierung auf dem Webserver aktivieren
• Build-Größe minimieren: ungenutzte Assets entfernen, Audio-Komprimierung
• Ladebildschirm und Fortschrittsanzeige implementieren
• Application.ExternalCall / jslib für Browser-JavaScript-Interaktion

Typische Nutzung: Unity WebGL ist verbreitet bei Lernspielen, Browser-Demos, Itch.io-Projekte und werbegetriebenen Mini-Games.

Godot Web Export

Godot 4 bietet einen Web-Export, der ebenfalls auf Emscripten/WASM basiert:

• Godot 3 WebGL: Nutzte WebGL 2.0.
• Godot 4 Web: Nutzt WebGL 2.0, erhält aber schrittweise Verbesserungen für den Web-Kontext.

Godots Web-Export hat den Vorteil kleinerer Build-Größen als Unity. Ein einfaches 2D-Godot-Spiel kann in 10–30 MB exportiert werden. Für 3D-Projekte ist die Größe ähnlich wie bei Unity.

CORS und Hosting: Godot-Web-Exports benötigen einen Webserver mit korrekten CORS-Headern. Einfaches Öffnen der HTML-Datei im Browser (file://) funktioniert nicht aufgrund von Browser-Sicherheitsregeln. Itch.io hostet Godot-Web-Exporte zuverlässig.

SharedArrayBuffer: Godot 4's Web-Export benötigt für volle Threading-Unterstützung SharedArrayBuffer, was bestimmte Sicherheits-Header auf dem Webserver erfordert (COOP/COEP).

Three.js – JavaScript 3D-Bibliothek

Three.js ist keine vollständige Game Engine, sondern eine JavaScript-Bibliothek, die WebGL abstrahiert und 3D-Grafik direkt in JavaScript ermöglicht. Für leichtgewichtige 3D-Erfahrungen ist Three.js oft effizienter als das Exportieren einer vollständigen Engine.

Features:

• Scene Graph, Camera, Renderer
• Materialien (MeshStandardMaterial für PBR)
• Geometrien (BoxGeometry, SphereGeometry, BufferGeometry für Custom)
• Lichtquellen (AmbientLight, DirectionalLight, PointLight, SpotLight)
• GLTF/GLB-Import (Standard 3D-Format für das Web)
• Post-Processing (EffectComposer)
• Physics: Integration mit cannon.js, rapier.js

```javascript // Minimales Three.js-Setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube);

function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; renderer.render(scene, camera); } animate(); ```

Wann Three.js statt Game Engine: Für interaktive 3D-Webseiten, Product Configurators, datengetriebene Visualisierungen, Kunst-Installationen und einfache Browser-Spiele. Die Bundle-Größe ist minimal (700 KB gzipped), was initiale Ladezeiten drastisch reduziert.

WebGPU – Die Zukunft

WebGPU ist der Nachfolger von WebGL, basierend auf modernen APIs (Vulkan/Metal/D3D12). WebGPU bietet:

• Compute Shader im Browser
• Bessere Parallelität
• Modernere Rendering-Pipeline

WebGPU ist seit Chrome 113 (2023) und Firefox 2024 offiziell verfügbar. Einige Engines beginnen, WebGPU-Unterstützung hinzuzufügen. Three.js hat experimentellen WebGPU-Renderer. Godot plant WebGPU-Integration.

Beispiele

• Itch.io-Community: Tausende Unity-WebGL- und Godot-Web-Spiele, besonders nach Game Jams.
• Google's Project Tango Web Demos: Three.js-basierte 3D-Visualisierungen.
• PlayCanvas: Professionelle WebGL Game Engine (JavaScript-nativ), die komplett im Browser entwickelt werden kann.

In der Praxis

Browser-Spiele auf Itch.io sind ein hervorragender Weg für Indie-Entwickler, ihr Spiel ohne Installation spielbar zu machen. Für Game Jams ist der Web-Export besonders wichtig – Juroren können das Spiel direkt im Browser spielen.

Wichtigste Praxis-Empfehlung: Testen auf verschiedenen Browsern (Chrome, Firefox, Safari) und Betriebssystemen. Safari hat oft Einschränkungen bei WebGL und Audio. Mobile Browser-Performance ist in der Regel erheblich schlechter als Desktop.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Können Unity WebGL-Spiele auf Smartphones gespielt werden? Theoretisch ja, aber die Performance ist oft unzureichend. Mobile Browser haben weniger RAM und begrenzteres WebGL-Support. Für Mobile ist eine native App-Distribution (iOS/Android) deutlich besser.

Was ist Emscripten? Emscripten ist ein Compiler-Toolkit, das C/C++-Code zu WebAssembly (und JavaScript) kompiliert. Es ist das zentrale Tool für die Portierung nativer Engines in den Browser.

Warum sind WebGL-Builds so groß? Die gesamte Game Engine – Rendering, Physik, Audio, Scripting-Runtime – muss mitgeliefert werden. Bei Unity enthält das auch die Mono/.NET-Runtime (oder IL2CPP). Die meisten Daten sind komprimierbar; mit Brotli-Komprimierung auf dem Server sind Reduktionen von 50–70% erreichbar.

Verwandte Einträge

• Unity Engine
• Godot Engine
• Mobile Publishing mit Game Engines
• Rendering in Game Engines
• Game Engine – Grundlagen

Weiterführend

• Danchilla, Brian: Beginning WebGL for HTML5. Apress, 2012.
• Cabello, Ricardo u. a.: Three.js Documentation. threejs.org, 2024.
• Unity Technologies: Unity WebGL Documentation. docs.unity3d.com, 2024.
• Haas, Andreas u. a.: Bringing the Web up to Speed with WebAssembly. PLDI, 2017.