Eine kurze Liste der Rendering-Techniken moderner AAA-Spiele

Von Oleg Sidorkin, CTO und Mitgründer von Cinevva

Wenn man die Rendering-Pipeline eines AAA-Spiels aus dem Jahr 2026 untersucht, lässt sich das meiste darin auf eine kleine Gruppe von Techniken zurückführen, die studioübergreifend eingesetzt werden. Die Bezeichnungen unterscheiden sich je nach Engine, doch die Konzepte sind dieselben. Hier ist eine kurze Liste der Techniken, die tatsächlich die Arbeit auf dem Bildschirm erledigen – jeweils mit einer Abbildung und einigen ausführlichen technischen Quellen. Ich habe sie im September 2026 aktualisiert, um die Neuerungen in Unreal Engine 5.8 und die inzwischen im Browser lauffähigen Techniken ergänzt und am Ende eine Reihe häufig gestellter Fragen hinzugefügt.

1. Physikalisch basiertes Rendering (PBR)

Materialien werden durch Albedo-, Rauheits-, Metallizitäts-, Normalen- und Ambient-Occlusion-Texturen beschrieben und durch energieerhaltende Shader beleuchtet (Cook-Torrance für spiegelnde Reflexionen, Lambert oder Disney für diffuse Reflexionen). Das ist die Grundlage, von der jede moderne AAA-Engine ausgeht. Wenn eine Oberfläche bei Sonnenlicht, Lampenlicht und im Licht einer Taschenlampe konsistent aussieht, liegt das an PBR.

Vertiefende Quellen:

• Burley, Physikalisch basiertes Shading bei Disney (die ursprünglichen Kursunterlagen zur „Disney BRDF“, SIGGRAPH 2012).
• Karis, Realistisches Shading in Unreal Engine 4 (SIGGRAPH 2013, der maßgebliche Vortrag zu PBR in UE4).
• Lagarde und de Rousiers, Umstellung von Frostbite auf physikalisch basiertes Rendering 3.0 (SIGGRAPH 2014, die vollständige Frostbite-Pipeline).
• Real-Time Rendering, 4. Auflage, Kapitel 9 (das Standardlehrbuch).

2. Deferred Shading und Visibility-Buffer-Shading

Die Geometrie schreibt zunächst Attribute wie Normalen, Material-IDs und Tiefe in einen G-Buffer oder Visibility Buffer. Die Beleuchtung erfolgt anschließend in einem Vollbild-Pass, der diese Buffer ausliest und jedes Pixel genau einmal schattiert. Visibility Buffer, wie sie von Nanite und ähnlichen Systemen verwendet werden, führen dieses Prinzip weiter, indem sie nur Dreiecks-IDs speichern und die Materialparameter erst später pro Pixel auflösen. Dadurch bleibt Overdraw auch bei dichter Geometrie kostengünstig.

Vertiefende Quellen:

• Engel, Deferred Shading (NVIDIA, der grundlegende Vortrag).
• Burns und Hunt, Der Visibility Buffer: Ein cachefreundlicher Ansatz für Deferred Shading (JCGT 2013, das ursprüngliche Paper zum Visibility Buffer).
• Wihlidal, „Optimierung der Grafik-Pipeline mit Compute“ (GDC 2016, Frostbites Compute-basierter Deferred-Pfad).
• Karis, Stubbe, Wihlidal, Ein tiefer Einblick in virtualisierte Nanite-Geometrie (SIGGRAPH 2021, einschließlich einer detaillierten Erläuterung des Nanite Visibility Buffers).

3. Virtualisierte Geometrie (im Nanite-Stil)

Meshes werden vorab in einer Hierarchie aus Clustern aufgebaut. Zur Laufzeit streamt und wählt die GPU die Cluster in der Auflösung aus, die zu den jeweiligen Pixeln passt. So entsteht eine bis auf Subpixel genaue Detaildarstellung, ohne dass manuelle LODs erforderlich sind. Unreal Nanite ist das bekannteste Beispiel. Andere Engines liefern inzwischen eigene Varianten aus. Das praktische Ergebnis sind Assets in Filmqualität, die ohne manuelle LOD-Erstellung in Echtzeit dargestellt werden. Unreal Engine 5.8, das im Juni 2026 veröffentlicht wurde, verbesserte die Leistung der Nanite-Rasterisierung und des Cullings auf Handheld-Plattformen und ergänzte eine pro Pixel programmierbare Distanzsteuerung für Vegetation, wie in Tom Loomans Performance-Notizen zu 5.8 beschrieben. Epic erklärte zudem, dass 5.8 die letzte Version der 5.x-Reihe sei, bevor die Entwicklung zu Unreal Engine 6 übergeht.

Vertiefende Quellen:

• Karis, Stubbe, Wihlidal, Ein tiefer Einblick in virtualisierte Nanite-Geometrie (SIGGRAPH 2021).
• Brian Karis, Vortrag zu Nanite auf der GDC 2021 (eine gut zugängliche Videoeinführung).
• Liktor, Architektur der Geometrie-Rendering-Pipeline bei Activision (clusterbasiertes Rendering, 2021).
• Schied et al., Raumzeitliche varianzgesteuerte Filterung (verwandte Techniken für Cluster-Culling).

4. Echtzeit-Raytracing für Schatten, Reflexionen und AO

Hardware-Raytracing (DXR, Vulkan RT) verfolgt Schattenstrahlen, Strahlen für spiegelnde und glänzende Reflexionen sowie Ambient-Occlusion-Strahlen anhand einer in jedem Frame aufgebauten BVH. Schon wenige Strahlen pro Pixel übertreffen die Möglichkeiten von Screen-Space-Techniken, insbesondere bei Reflexionen außerhalb des sichtbaren Bildbereichs und bei Kontaktschatten. Die meisten Spiele setzen es gezielt ein und nicht für alles.

Vertiefende Quellen:

• Microsoft, Funktionsspezifikation für DirectX Raytracing (DXR) (die API-Referenz).
• Wyman, Einführung in DirectX Raytracing (die sehr zugänglichen SIGGRAPH-Kursunterlagen).
• Boksansky und Marrs, Ray Tracing Gems II, Kapitel 17–19 (kostenloses PDF zu modernen DXR-Techniken).
• Stachowiak, Stochastische Screen-Space-Reflexionen (Frostbite, die Brücke von SSR zu RT).

5. Software-Raytracing (im Lumen-Stil)

Nicht alle Spieler haben eine RTX-Karte. Deshalb enthalten Engines auch Fallbacks auf Basis von Distanzfeldern oder Surface Caches. Unreal Lumen verfolgt Strahlen beispielsweise anhand vorzeichenbehafteter Distanzfelder und Surface Caches, um kostengünstige diffuse globale Beleuchtung zu erzeugen, und wechselt nur bei Bedarf zu Hardware-Strahlen. So erzielen AAA-Spiele auf Konsolen einen „Raytracing-Look“. UE 5.8 ergänzte einen „Lumen Lite“-Modus, der etwa doppelt so schnell wie Lumens hochwertiger Rendering-Pfad ist und 60 fps auf der PlayStation 5 anvisiert. Außerdem wurde MegaLights, das stochastische System für zahlreiche Lichtquellen, laut CG Channels Überblick zu 5.8 als produktionsreif eingestuft.

Vertiefende Quellen:

• Wright et al., Lumen: Globale Echtzeitbeleuchtung in Unreal Engine 5 (SIGGRAPH 2022, das Lumen-Paper).
• Epic Games, Technische Details zu Lumen (offizielle Engine-Dokumentation).
• Wright, Radiance Caching für globale Echtzeitbeleuchtung (SIGGRAPH 2021).
• Wright, Vortrag zu Lumen auf der GDC 2022 (Videoversion).

6. ReSTIR und Reservoir Sampling

Bei direkter und indirekter Beleuchtung mit Tausenden von Lichtquellen verwendet ReSTIR (Reservoir Spatio-Temporal Importance Resampling) Licht-Samples pixel- und frameübergreifend wieder. So halten Spiele wie Cyberpunk 2077 mit Pathtracing das Bildrauschen selbst bei nur einem oder zwei Strahlen pro Pixel gering. Da Pathtracing zunehmend zum Ziel für High-End-Grafik wird, dürfte diese Technik künftig in weiteren Engines auftauchen.

Vertiefende Quellen:

• Bitterli et al., Raumzeitliches Reservoir Resampling für Echtzeit-Raytracing mit dynamischer Direktbeleuchtung (SIGGRAPH 2020, das ursprüngliche ReSTIR-Paper).
• Ouyang et al., ReSTIR GI: Pfad-Resampling für Echtzeit-Pathtracing (HPG 2021, ReSTIR für indirekte Beleuchtung).
• Lin et al., Verallgemeinertes Resampled Importance Sampling (SIGGRAPH 2022, die mathematischen Grundlagen).
• NVIDIA, Technischer Deep Dive zum Pathtracing in Cyberpunk 2077 (Engineering-Blog).

7. Volumetrische Wolken, Nebel und Atmosphäre

Himmel werden per Raymarching durch 3D-Rausch- und Dichtevolumen gerendert. Für die Atmosphäre kommen vorberechnete Streutabellen im Bruneton-Stil zum Einsatz, die Übergänge zwischen Sonne und Mond abbilden. Nebel verwendet ein Froxel-Raster – vergleichbar mit einer am Sichtfrustum ausgerichteten 3D-Textur –, das lokale Beleuchtung erfasst. Zusammen erzeugen diese Techniken „Wetter als System“ anstelle einer einfachen Skybox.

Vertiefende Quellen:

• Schneider, Die Echtzeit-Wolkenlandschaften von Horizon Zero Dawn (SIGGRAPH 2015, die maßgebliche Referenz für Wolken).
• Hillaire, Eine skalierbare und produktionsreife Rendering-Technik für Himmel und Atmosphäre (EGSR 2020, der moderne Bruneton-Nachfolger, der in UE5 verwendet wird).
• Wronski, Volumetrischer Nebel: Eine einheitliche, Compute-Shader-basierte Lösung für atmosphärische Streuung (SIGGRAPH 2014, Froxel-Nebel aus Assassin's Creed 4).
• Hillaire, Physikalisch basiertes und einheitliches volumetrisches Rendering in Frostbite (SIGGRAPH 2015).

8. Cascaded Shadow Maps und Virtual Shadow Maps

Für Sonnenschatten teilen Cascaded Shadow Maps das Sichtfrustum in Bereiche auf und rendern jeden davon mit einer passenden Auflösung. Virtual Shadow Maps gehen noch weiter: Eine einzelne riesige Shadow Map wird in Seiten unterteilt, und nur die von der Kamera aus sichtbaren Seiten werden gerendert. So erhalten AAA-Spiele scharfe Schatten in der Nähe der Spielfigur, ohne dafür enorme Speichermengen zu benötigen. Laut Epics VSM-Dokumentation beträgt die virtuelle Auflösung 16k × 16k pro Lichtquelle. UE 5.8 ergänzte außerdem einen vorgefilterten Pfad für große Entfernungen, der weit entfernte Schattenwerfer mit deutlich geringerer Auflösung in die Clipmap zeichnet, sowie eine Drosselung der Seiteninvalidierung, wie in Tom Loomans Notizen beschrieben.

Vertiefende Quellen:

• Dimitrov, Cascaded Shadow Maps (NVIDIA-Whitepaper, die Standardreferenz).
• Microsoft, Gängige Techniken zur Verbesserung von Shadow Depth Maps (DirectX-Dokumentation).
• Wright, Virtual Shadow Maps in Fortnite Battle Royale, Kapitel 4 (SIGGRAPH 2023, der Vortrag zu VSM in UE5).
• Epic Games, Dokumentation zu Virtual Shadow Maps.

9. Screen-Space-Effekte (SSAO, SSR, SSGI, SSSSS)

Durch das kostengünstige Auslesen der Tiefen- und Normalen-Buffer lassen sich Ambient Occlusion (SSAO), Reflexionen (SSR), globale Beleuchtung mit einem indirekten Lichttransport (SSGI) und Subsurface Scattering für Haut (SSSSS) erzeugen. Details außerhalb des sichtbaren Bildbereichs können sie nicht erfassen, weshalb Raytracing sie zunehmend ersetzt. Als schnelle Basislösung sind sie jedoch weiterhin überall zu finden.

Vertiefende Einblicke: - Mittring, [Finding Next Gen: CryENGINE 2](https://www.crytek.com/wp-content/uploads/Finding%20Next%20Gen%20-%20CryEngine%202.pdf) (SIGGRAPH 2007, die ursprüngliche SSAO-Veröffentlichung). - McGuire et al., [Scalable Ambient Obscurance](https://research.nvidia.com/publication/scalable-ambient-obscurance) (HPG 2012, modernes SSAO). - Stachowiak und Uludag, [Stochastic Screen-Space Reflections](https://www.ea.com/frostbite/news/stochastic-screen-space-reflections) (Frostbite, die maßgebliche SSR-Referenz). - Jimenez, [Separable Subsurface Scattering](https://www.iryoku.com/separable-sss/) (die in den meisten AAA-Engines für Haut verwendete Technik). - Mara et al., [Deep Screen Space](https://research.activision.com/publications/2016/09/deep-g-buffers-for-stable-global-illumination-approximation) (Activision, ein Vorläufer von SSGI).

10. Temporales Anti-Aliasing und ML-Upscaling (DLSS, FSR, XeSS)

Das Bild wird mit einer niedrigeren internen Auflösung gerendert und mithilfe von Bewegungsvektoren, Tiefendaten und vorherigen Frames rekonstruiert. ML-basierte Upscaler (DLSS 4, FSR 4, XeSS) ergänzen dies um Frame-Generierung und interpolieren anhand des optischen Flusses Zwischenbilder. AMDs FSR „Redstone“ erweitert FSR 4 auf RDNA-4-Hardware um ML-Frame-Generierung, Ray-Regeneration und einen neuronalen Radiance Cache. Das ist das deutlichste Anzeichen dafür, dass Upscaling und Denoising zu einer einzigen neuronalen Stufe verschmelzen. Die meisten AAA-Titel werden inzwischen unter der Annahme ausgeliefert, dass ein Upscaler aktiviert ist, was die Budgetierung des restlichen Frames verändert.

Vertiefende Einblicke:

• Karis, High Quality Temporal Supersampling (SIGGRAPH 2014, der maßgebliche Vortrag zu TAA).
• Salvi, An Excursion in Temporal Supersampling (NVIDIA, über den Weg zu DLSS).
• Edelsten, Truly Next-Gen: Adding Deep Learning to Games and Graphics (GDC 2019, DLSS-Architektur).
• AMD, Technische Details zu FidelityFX Super Resolution 3 und Intel, Technisches Paper zu XeSS.

11. GPU-gesteuertes Rendering und Mesh-Shader

Culling, LOD-Auswahl und die Übermittlung von Draw Calls laufen vollständig auf der GPU. Mesh-Shader ersetzen die Vertex-/Geometrie-/Tessellations-Pipeline durch eine flexiblere, Compute-ähnliche Stufe, die Meshlets ausgibt. In Kombination mit Multi-Draw Indirect hält dies die CPU vollständig aus der zeitkritischen Schleife pro Objekt heraus.

Vertiefende Einblicke:

• Haar und Aaltonen, GPU-Driven Rendering Pipelines (SIGGRAPH 2015, der grundlegende Vortrag zu Assassin's Creed Unity).
• Wihlidal, Optimizing the Graphics Pipeline with Compute (GDC 2016, GPU-gesteuertes Culling in Frostbite).
• Kubisch, Introduction to Turing Mesh Shaders (NVIDIA, die Einführung in Mesh-Shader).
• Pesce, A Whirlwind Tour of Mesh Shaders (und ähnliche Engineering-Blogs, gesammelt in Adrian Courrèges' RenderDoc-Analysen).

12. Rendering von Haaren, Stoffen und Haut

Haare verwenden anisotropes Shading nach Marschner mit strähnenbasierter Geometrie (NVIDIA HairWorks, AMD TressFX oder Engine-eigene Systeme). Stoffe werden auf der GPU mit positionsbasierter Dynamik simuliert und mit anisotropen Glanzlichtern gerendert. Haut nutzt Screen-Space-Subsurface-Scattering sowie vorintegrierte Wrap-Beleuchtung. An diesen drei Bereichen lässt sich meist am deutlichsten der Budgetunterschied zwischen AAA- und Indie-Produktionen erkennen.

Vertiefende Einblicke:

• Marschner et al., Light Scattering from Human Hair Fibers (SIGGRAPH 2003, das grundlegende Haarmodell).
• Chiang et al., A Practical and Controllable Hair and Fur Model for Production Path Tracing (Disney 2016, weit verbreitet für Echtzeit-Approximationen).
• Müller et al., Position Based Dynamics (die Standardreferenz für Stoffsimulationen).
• Jimenez et al., Separable Subsurface Scattering und Real-Time Realistic Skin Translucency.

13. Decals, virtuelle Texturierung und Material-Layering

Oberflächenvariation entsteht durch übereinanderliegende Decals (Einschusslöcher, Schmutz, Blut, Ablagerungen), die auf den Tiefenpuffer projiziert werden, sowie durch virtuelle Texturen, die hochauflösende Details genau zum benötigten Zeitpunkt streamen. Beim Material-Layering werden mehrere PBR-Sets pro Pixel mithilfe von Masken und triplanarer Projektion miteinander vermischt. So kann ein einzelner Felsen wie fünf verschiedene Felsen aussehen.

Vertiefende Einblicke:

• Pranckevičius, Deferred Decals und Folgebeiträge (Aras' klassische Blogreihe).
• Mittring, The Technology Behind the "Unreal Engine 4 Elemental Demo" (SIGGRAPH 2012, enthält Details zur virtuellen Texturierung).
• van Waveren, id Tech 5 Challenges: From Texture Virtualization to Massive Parallelization (SIGGRAPH 2009, der Vortrag zu MegaTexture).
• Williams, Material Layering in The Order: 1886 (GDC 2014, mehrschichtige PBR-Materialien).

14. Reihenfolgeunabhängige Transparenz

Haare, Vegetation, Partikel und Glas lassen sich nicht sauber sortieren. AAA-Engines verwenden Techniken wie Weighted Blended OIT, Depth Peeling oder verkettete Listen pro Pixel, um sie ohne einen CPU-basierten Sortierschritt korrekt zu rendern. In Szenen mit dichter Vegetation ist dies im Stillen einer der teuersten Bestandteile eines Frames.

Vertiefende Einblicke:

• McGuire und Bavoil, Weighted Blended Order-Independent Transparency (JCGT 2013, das WBOIT-Paper).
• Bavoil und Myers, Order Independent Transparency with Dual Depth Peeling (NVIDIA-Whitepaper).
• Yang et al., Real-Time Concurrent Linked List Construction on the GPU (die Referenz zu verketteten Listen pro Pixel).
• Wyman, Exploring and Expanding the Continuum of OIT Algorithms (HPG 2016, vergleichender Überblick).

15. Neuronales Radiance Caching und ML-Denoiser

Die neueste Ebene. NVIDIAs Neural Radiance Cache lernt die indirekte Beleuchtung für jede Szene und fragt sie ab, anstatt weitere Strahlen zu verfolgen. ML-Denoiser (OptiX, Intel Open Image Denoise und unternehmenseigene Lösungen) bereinigen verrauschte Raytracing-Signale innerhalb weniger Millisekunden. Diese Kategorie dürfte in den nächsten zwei Jahren schnell wachsen.

Vertiefende Einblicke:

• Müller et al., Real-Time Neural Radiance Caching for Path Tracing (SIGGRAPH 2021, das NRC-Paper).
• Schied et al., Spatiotemporal Variance-Guided Filtering: Real-Time Reconstruction for Path-Traced Global Illumination (HPG 2017, SVGF).
• Chaitanya et al., Interactive Reconstruction of Monte Carlo Image Sequences using a Recurrent Denoising Autoencoder (SIGGRAPH 2017, der erste rekurrente ML-Denoiser).
• Intel, Dokumentation zu Open Image Denoise (quelloffener Produktions-Denoiser).

Was das für den Browser bedeutet

Wir haben mehrere dieser Techniken in WebGPU für unsere Open-World-Browser-Engine umgesetzt. Kaskadierte Shadow Maps, GPU-gesteuertes Instancing, triplanares PBR, Screen-Space-Nebel und Clipmap-basiertes virtualisiertes Terrain laufen in einem Tab mit 120 FPS. Seit September 2026 ist WebGPU selbst standardmäßig in Chrome und Edge ab Version 113, in Safari 26 unter macOS, iOS, iPadOS und visionOS sowie in Firefox unter Windows (141) und auf Apple-Silicon-Macs (145 und neuer) aktiviert; unter Linux ist es laut dem Implementierungsstatus von gpuweb weiterhin nur in Nightly verfügbar. Three.js liefert seinen WebGPU-Renderer ab r185 als Standardpfad aus, und Babylon.js 9 (März 2026) ergänzte laut der Ankündigung zu Babylon.js 9.0 Cluster-Beleuchtung und Compute-Shader-basierte Volumetrie. Der Rest (Hardware-Raytracing, Mesh-Shader, ML-Upscaling) ist noch nicht Teil der WebGPU-Spezifikation, daher bleiben diese Techniken im Web vorerst Compute-Shader-Emulationen. Weitere Details finden Sie in unseren Leitfäden zu Open-World-Technik im Browser, Landschaftsgenerierung, WebGPU im Vergleich zu WebGL für Spiele und dem Technologie-Stack für Webspiele 2026. Wenn Sie prüfen möchten, welche Funktionen ein bestimmter Browser bereitstellt, zeigt unser WebGL-/WebGPU-Prüftool die Adapterfunktionen und -limits an.

Häufig gestellte Fragen

Welche dieser Rendering-Techniken laufen 2026 mit WebGPU in einem Browser?

Die meisten, die keine spezielle Hardwareeinheit benötigen. PBR, Deferred Shading und Visibility-Buffer-Shading, kaskadierte Shadow Maps, Screen-Space-AO und -Reflexionen, volumetrischer Nebel und Wolken, TAA, GPU-gesteuertes Culling über Compute-Shader, reihenfolgeunabhängige Transparenz sowie Cluster-basiertes Geometrie-Streaming funktionieren bereits heute in WebGPU. Mehrere davon setzen wir in unserer Browser-Engine ein. Es fehlt alles, was von einer in der Spezifikation nicht offengelegten Hardwarestufe abhängt: Hardware-Raytracing, Mesh-Shader und anbieterspezifische ML-Upscaler wie DLSS und FSR. Raytracing und Cluster-Culling nach Nanite-Art lassen sich in Compute-Shadern emulieren – und das wird auch gemacht –, doch gegenüber nativen Lösungen ist mit einem erheblichen Abstand zu rechnen. Unser Leitfaden zu WebGPU im Vergleich zu WebGL erläutert, was das für das Performance-Budget eines Spiels bedeutet.

Was sind Kontaktschatten in Spielen?

Kontaktschatten sind die kurzen, scharfen Schatten an den Stellen, an denen ein Objekt tatsächlich eine Oberfläche berührt: ein Fuß auf dem Boden, eine Tasse auf einem Tisch oder die Fuge zwischen Wand und Boden. Normale Shadow Maps stellen sie aufgrund von Bias und begrenzter Auflösung oft unscharf oder gar nicht dar. Daher fügen Engines einen eigenen Pass hinzu, üblicherweise ein kurzes Screen-Space-Ray-Marching gegen den Tiefenpuffer oder bei Raytracing-Renderern einige sehr kurze Schattenstrahlen. Sie sind kostengünstig und verhindern, dass Objekte zu schweben scheinen. Für das Web bietet three.js ein Beispiel für Kontaktschatten, das sie simuliert, indem es die Tiefe des Objekts auf eine Bodenebene rendert. Das eignet sich für Produktaufnahmen, ist bei vollständigen Szenen jedoch schwierig.

Was ist eine virtuelle Shadow Map, und gibt es sie in Browsern?

Eine virtuelle Shadow Map behandelt eine einzige riesige Shadow Map (bei Unreal 16K mal 16K pro Lichtquelle, laut der Dokumentation von Epic) als eine Gruppe von Seiten. Nur die Seiten, die die Kamera tatsächlich sehen kann, werden in der jeweils benötigten Auflösung reserviert und gerendert. So entstehen aus der Nähe nahezu pixelgenaue Schatten, ohne dass die gesamte Map berechnet werden muss. Stand September 2026 liefert keine Browser-Engine VSMs mit. Three.js bietet in seinem WebGPU-Renderer kaskadierte Shadow Maps und weiche PCSS-Schatten, während Babylon.js einen CascadedShadowGenerator bereitstellt. VSMs auf WebGPU zu entwickeln ist grundsätzlich möglich – sie benötigen Compute-Shader und indirekte Draw Calls –, aber bislang hat niemand eine universell einsetzbare Lösung veröffentlicht. Daher bleiben Kaskaden in einem Browser-Tab die praktikable Antwort.

Was sind die besten Techniken zum Rendern von Haaren in Webspielen?

Überspringe die Strähnensimulation und schattiere Hair Cards überzeugend. Echtzeit-Strähnenhaar (TressFX, Unreals Groom-System) benötigt rechenintensive Simulationen und reihenfolgeunabhängige Transparenz in großem Maßstab. Das ist selbst nativ aufwendig, und dafür gibt es mit Stand September 2026 weder in three.js noch in Babylon.js eine gebrauchsfertige Implementierung. Der webfreundliche Ansatz besteht aus Hair Cards (einige Dutzend texturierte Streifen mit Alpha-Test) mit anisotropen Kajiya-Kay-Highlights oder vereinfachten Marschner-Highlights, umgesetzt mit TSL von three.js oder den Node Materials von Babylon.js, einem Renderverfahren in zwei Durchläufen – zuerst Alpha-Test, dann Blending –, um weiche Kanten zu erhalten, sowie einem kostengünstigen Ambient-Occlusion-Anteil, der in die Textur der Cards eingebacken ist. Wenn du Bewegung brauchst, steuere einige wenige Knochenketten, statt einzelne Strähnen zu simulieren. So erreichst du den Großteil der gewünschten Optik mit einem winzigen Bruchteil des Frame-Budgets. Das ist entscheidend, wenn deine gesamte Szene auf einer integrierten GPU nur 16 ms zur Verfügung hat.

Ist diese Liste 2026 noch aktuell?

Ja. Die Änderungen seit Mai 2026 sind eher Verfeinerungen als neue Kategorien. UE 5.8 (Juni 2026) machte MegaLights produktionsreif, führte Lumen Lite und kostengünstigere Virtual Shadow Maps für weit entfernte Objekte ein und ist die letzte Version der 5.x-Reihe vor Unreal Engine 6. AMDs FSR Redstone vereinte Frame-Generierung, Ray Regeneration und einen neuronalen Radiance Cache in einem einzigen ML-Paket, was die Richtung der letzten beiden Abschnitte bestätigt. Und WebGPU ist inzwischen in allen großen Browsern verfügbar. Im obigen Abschnitt „Was das für den Browser bedeutet“ geht es daher nun darum, welche Techniken portiert werden sollten – nicht mehr darum, ob die Plattform dafür bereit ist.

Weiterführende Literatur zum gesamten Technologie-Stack

Wenn du nur ein Buch lesen möchtest, ist Real-Time Rendering, 4. Auflage das Standardwerk, das die meisten der oben genannten Themen behandelt. Für aktuelle Forschung bietet das Kursarchiv „Advances in Real-Time Rendering in Games“ der SIGGRAPH (advances.realtimerendering.com) kostenlose PDFs mit tiefgehenden Einblicken in AAA-Engines, die bis ins Jahr 2006 zurückreichen. Für detaillierte Produktionsanalysen dazu, wie bestimmte Spiele ihre Frames rendern, sind Adrian Courrèges’ Artikel zum GPU-Profiling Pflichtlektüre.