Was ist meine WebGL-GPU? Wie Browser Ihre Grafikkarte offenlegen

Jedes Mal, wenn Sie einen Browser-Tab öffnen, der WebGL nutzt – sei es eine 3D-Karte, ein Online-Spiel oder eine Datenvisualisierung –, kann JavaScript detaillierte Informationen von Ihrer GPU abfragen. Einige dieser Informationen, wie Ihr exaktes GPU-Modell, sind aufschlussreicher, als die meisten Menschen erwarten.

Dieser Artikel erklärt, was die WebGL-API über Ihre Grafikhardware offenlegt, wie die Erweiterung WEBGL_debug_renderer_info funktioniert, was die wichtigsten Parameter bedeuten und welche Auswirkungen dies auf den Datenschutz hat.

Was ist WebGL und warum wird GPU-Zugriff benötigt?

WebGL (Web Graphics Library) ist eine JavaScript-API, die hardwarebeschleunigtes Rendering von 2D- und 3D-Grafiken direkt in einem HTML-<canvas>-Element ermöglicht. Sie basiert auf OpenGL ES – dem gleichen Grafikstandard, der auch von Android- und iOS-Apps genutzt wird – und ist ohne Plug-ins in jeden modernen Browser integriert.

WebGL benötigt direkten GPU-Zugriff, weil das Rendern von 3D-Szenen – das Berechnen von Geometrie, das Schattieren von Pixeln und das Anwenden von Texturen – auf einer GPU um ein Vielfaches schneller ist als auf einer CPU. Wenn Sie eine Seite mit einer WebGL-Szene aufrufen, erstellt der Browser einen WebGL-Kontext, kompiliert Shader-Programme und leitet die Zeichenaufrufe an Ihren Grafiktreiber weiter.

Heute sind zwei Versionen im Einsatz:

WebGL 2 wird in allen aktuellen Desktop-Browsern und den meisten seit 2018 veröffentlichten Mobil-Browsern unterstützt.

Wie der Browser den Namen Ihrer GPU ausliest

Standardmäßig gibt WebGL eine maskierte Renderer-Zeichenfolge aus, die zum Schutz der Privatsphäre dient. In Chrome auf einem High-End-Rechner könnte das so aussehen:

ANGLE (NVIDIA, NVIDIA GeForce RTX 4070 Direct3D11 vs_5_0 ps_5_0, D3D11)

Die optionale Erweiterung WEBGL_debug_renderer_info ermöglicht es JavaScript, die unmaskierten Zeichenfolgen direkt vom Grafiktreiber anzufordern. Der Aufruf sieht so aus:

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2') ?? canvas.getContext('webgl');
const ext = gl.getExtension('WEBGL_debug_renderer_info');

if (ext) {
  const renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL);
  const vendor   = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL);
  console.log(renderer); // e.g. "NVIDIA GeForce RTX 4070/PCIe/SSE2"
  console.log(vendor);   // e.g. "NVIDIA Corporation"
}

Wenn der Browser die Erweiterung nicht anbietet – oder sie aus Datenschutzgründen blockiert hat –, gibt getExtension() den Wert null zurück, und beide Zeichenfolgen bleiben verborgen.

Wichtige WebGL-Parameter und ihre Bedeutung

Neben dem Renderer-Namen legt der WebGL-Kontext eine Reihe von Leistungskonstanten offen, die beschreiben, was Ihre GPU leisten kann:

Maximale Texturgröße

gl.getParameter(gl.MAX_TEXTURE_SIZE) gibt die größte quadratische Textur zurück, die die GPU verarbeiten kann – in der Regel 4.096, 8.192 oder 16.384 Pixel pro Seite. Eine Textur, die diese Größe überschreitet, wird stillschweigend verworfen oder herunterskaliert, was in WebGL-Anwendungen, die diesen Grenzwert nicht prüfen, zu fehlerhaften oder fehlenden Grafiken führt.

Maximale Render-Buffer-Größe

gl.MAX_RENDERBUFFER_SIZE ist das größte Off-Screen-Renderziel, das die GPU unterstützt. Dies ist relevant für Shadow Maps, Post-Processing-Pipelines und Deferred Rendering. Es entspricht meist der maximalen Texturgröße oder übersteigt diese leicht.

Maximale Viewport-Dimensionen

gl.MAX_VIEWPORT_DIMS gibt das breiteste und höchste Canvas-Element auf dem Bildschirm zurück, das die GPU in einem Durchlauf rendern kann. Auf den meisten Desktop-PCs übersteigt dieser Wert die Bildschirmauflösung bei Weitem.

Antialiasing

gl.getContextAttributes().antialias gibt an, ob der WebGL-Kontext mit aktiviertem MSAA (Multi-Sample Anti-Aliasing) erstellt wurde. Dies glättet stufige Kanten (Aliasing) an der Geometrie, benötigt jedoch zusätzlichen Grafikspeicher pro Frame.

Unterstützte Erweiterungen

gl.getSupportedExtensions() gibt ein Array aller optionalen WebGL-Funktionen zurück, die auf diesem Browser und dieser GPU verfügbar sind. Typische Erweiterungen sind:

• EXT_texture_filter_anisotropic – schärfere Texturen bei schrägen Betrachtungswinkeln
• WEBGL_depth_texture – ermöglicht die Nutzung des Tiefenpuffers als Textur-Sample (erforderlich für Shadow Maps)
• OES_texture_half_float – 16-Bit-Fließkomma-Texturen (genutzt für HDR-Rendering und GPGPU)
• ANGLE_instanced_arrays – zeichnet viele Kopien einer Geometrie in einem einzigen Aufruf (nur in WebGL 1; in WebGL 2 nativ integriert)

Eine höhere Anzahl unterstützter Erweiterungen bedeutet in der Regel, dass fortschrittlichere Rendering-Techniken zur Verfügung stehen.

WebGL und Browser-Fingerprinting

Die Kombination aus GPU-Modell, Treiberversion, der Liste der unterstützten Erweiterungen und feinen, GPU-spezifischen Abweichungen beim Rendering erzeugt ein sehr individuelles Profil. Dies wird als WebGL-Fingerprinting bezeichnet – und ist eine der verlässlichsten Tracking-Methoden für Websites, die keine Cookies verwenden.

Tracking-Skripte gehen in zwei Schritten vor:

1. Auslesen des Hardware-Profils – Renderer-Zeichenfolge, Erweiterungsliste, maximale Größen.
2. Rendern eines unsichtbaren Canvas-Elements – Es wird eine geometrische Szene gezeichnet und der resultierende Pixel-Buffer gehasht. Verschiedene GPU-Familien liefern selbst bei identischem Code geringfügig unterschiedliche Ergebnisse, was zu einem Fingerabdruck auf Hardware-Ebene führt.

Die resultierende Signatur übersteht den privaten Modus, das Löschen von Cookies und selbst VPN-Verbindungen – weil sie Ihre physische Hardware widerspiegelt und nicht Ihre Netzwerkidentität.

Wie datenschutzfreundliche Browser reagieren

Firefox, Brave und Safari unternehmen aktive Schritte zur Begrenzung von WebGL-Fingerprinting. Wenn Sie einen dieser Browser verwenden, wird der GPU-Renderer im WebGL-Tool wahrscheinlich als nicht verfügbar angezeigt oder gibt eine generische Zeichenfolge zurück.

SwiftShader – wenn keine GPU vorhanden ist

Wenn Ihre GPU als „Google SwiftShader“ oder „SwiftShader Device“ angezeigt wird, greift Ihr Browser auf einen Software-Renderer zurück. SwiftShader ist eine CPU-basierte OpenGL ES-Implementierung in Chrome, die aktiviert wird, wenn:

• Die Hardwarebeschleunigung in den Browser-Einstellungen deaktiviert ist
• Der Grafiktreiber auf der Blockliste von Chrome steht (meist aufgrund bekannter Fehler oder Abstürze)
• Das Gerät über eine integrierte Grafik mit einer nicht unterstützten Treiberversion verfügt
• Sie in einer virtuellen Maschine oder in einer Headless-Umgebung arbeiten

WebGL funktioniert auch im SwiftShader-Modus, allerdings laufen komplexe 3D-Szenen deutlich langsamer, da jede Pixelberechnung auf der CPU statt auf der GPU erfolgt. Um prüfen zu können, ob die Hardwarebeschleunigung in Chrome aktiv ist, rufen Sie chrome://gpu in der Adressleiste auf.

Ihre GPU ist nicht nur für 3D-Grafiken wichtig

Die Rolle der GPU im Browser geht weit über WebGL-Szenen hinaus:

• CSS-Animationen und Compositing – Transformationen, Änderungen der Deckkraft und will-change-Ebenen werden in modernen Browsern alle über die GPU gerendert.
• Videodekodierungsbeschleunigung – Hardware-Dekodierer für H.264, VP9 und AV1 befinden sich auf der GPU, was die CPU-Last und den Akkuverbrauch auf videointensiven Seiten reduziert.
• WebGPU – der Nachfolger von WebGL der nächsten Generation, der eine hardwarenähere API ähnlich wie Vulkan und Metal bietet. Es wird bereits in Chrome und Firefox ausgeliefert und soll WebGL bei hochperformanten Anwendungen ablösen.

Wenn Sie Ihren Grafiktreiber auf dem neuesten Stand halten und die Hardwarebeschleunigung aktivieren, sichern Sie sich eine optimale Performance für all diese Funktionen, nicht nur für explizite 3D-Inhalte.

Sie können alle Daten, die Ihr Browser derzeit offenlegt – GPU-Renderer, Hersteller, WebGL-Version, maximale Texturgröße, Anzahl der Erweiterungen und mehr – im Tool Was ist mein WebGL / GPU? einsehen. Die Erkennung findet vollständig in Ihrem Browser statt; es werden keine Daten an unsere Server gesendet.