WebGPU-Leistungsanalyse in Chrome: Ein umfassender Leitfaden zum Profiling mit RDP und Nsight

Die Optimierung der Grafikleistung ist ein entscheidender Faktor für die Entwicklung anspruchsvoller Web-Anwendungen. Mit Chrome Webgpu steht eine moderne API zur Verfügung, die leistungsstarke 3D-Grafiken und Berechnungen direkt im Browser ermöglicht. Doch wie analysiert man die Leistung dieser Anwendungen effektiv? Traditionelle GPU-Profiler arbeiten oft nicht auf Anhieb mit WebGPU-Workloads in Chrome zusammen, was Entwickler vor eine Herausforderung stellt. Dieser Artikel bietet eine detaillierte Anleitung, wie Sie diese Hürde überwinden und Ihre WebGPU-Anwendungen mit etablierten Tools wie dem AMD Radeon GPU Profiler (RDP) und Nvidia Nsight analysieren können.

Kontext: Die Herausforderung des WebGPU-Profilings in Chrome

WebGPU ist keine native Grafik-API im herkömmlichen Sinne. Das bedeutet, dass kein Hardware-Hersteller spezifische Treiber direkt für diese API bereitstellt. Stattdessen implementieren WebGPU-Laufzeiten, wie sie in Webbrowsern zu finden sind, ihre Backends für WebGPU unter Verwendung moderner nativer APIs wie DirectX12, Vulkan oder Metal. Diese APIs sind weit verbreitet, insbesondere in der Videospielbranche, und Hardware-Hersteller haben hervorragende Profiling-Tools für sie entwickelt.

Leider funktionieren diese GPU-Profiler nicht ohne Weiteres mit WebGPU-Workloads, die von Chrome ausgeführt werden. Der Hauptgrund dafür ist, dass Chrome zwar solche Workloads mit den genannten Grafik-APIs ausführt, die gerenderte Inhalte jedoch nicht über diese APIs auf dem Bildschirm darstellt. Dafür gibt es gute Gründe, und die technischen Details sind hier nicht entscheidend. Wichtig ist: GPU-Profiler funktionierten bislang nicht direkt, was für viele Entwickler frustrierend war.

Die gute Nachricht ist, dass eine Möglichkeit gefunden wurde, diese Einschränkung zu umgehen! Es handelt sich um einen “hacky” Workaround, der in der Praxis jedoch gut funktioniert. Alles, was Sie tun müssen, ist eine speziell entwickelte DLL herunterzuladen und an der richtigen Stelle zu platzieren, um sowohl AMDs Radeon GPU Profiler als auch Nvidias Nsight zum Laufen zu bringen. Die Details finden Sie im nächsten Abschnitt. Obwohl dies nur unter Windows funktioniert, gibt es für Apple dieses Gist (https://gist.github.com/slimbuck/ec4500afaec6b2c5368c22a37153826d), für Linux gibt es jedoch derzeit keine bekannte Lösung.

Wenn Sie daran interessiert sind, was genau fehlte, wie es behoben wurde und was diese mysteriöse DLL tut, lesen Sie den begleitenden Blogbeitrag Shimming d3d12.dll for fun and profit. Ein besonderer Dank geht an Marco Castorina (https://mastodon.gamedev.place/@theWarhelm) und Ray Dey (https://x.com/raydey), ohne deren Beitrag dieser Hack wahrscheinlich nicht existieren würde.

Anleitung zur Nutzung von GPU-Profilern mit Chrome WebGPU

⚠ Bevor Sie beginnen, beachten Sie bitte, dass dies eine inoffizielle Lösung ist und Sie den normalen Browserbetrieb nicht mit dieser angehängten DLL durchführen sollten. Sie sollte ausschließlich für eine GPU-Profiling-Sitzung verwendet und danach wieder entfernt werden. Diese Lösung kollidiert auch mit PIX, daher sollten Sie die DLL entfernen, bevor Sie versuchen, eine PIX-Aufnahme zu erstellen. Es wird dringend empfohlen, diese DLL einer spezifischen Chrome-Version (Dev, Canary usw.) hinzuzufügen, die Sie ausschließlich für das GPU-Profiling verwenden.

Weiterlesen >> SAP FF805: Ursachen und Behebung fehlender Steuerpositionen in der Rechnungslegung

Die DLL beschaffen

Besuchen Sie das folgende Repository und laden Sie entweder d3d12.dll aus dem Release-Bereich herunter oder klonen Sie das Repository und kompilieren Sie es selbst. Platzieren Sie die DLL im Chrome-Ordner, in dem sich chrome.exe befindet, zum Beispiel: C:Program FilesGoogleChromeApplication.

Chrome-Befehlszeilenargumente

Die Art und Weise, wie Sie Chrome starten sollten, hängt vom verwendeten Profiler ab. Die erforderlichen Befehlszeilenargumente sind jedoch größtenteils dieselben, die auch zum Erfassen eines Frames mit PIX verwendet werden, wie in Tojiros Blog (https://toji.dev/webgpu-profiling/pix.html#running-chrome-in-pix) beschrieben.

Zur Referenz sind hier die Argumente aufgeführt, die verwendet werden:

--disable-gpu-sandbox --disable-gpu-watchdog
--enable-dawn-features=emit_hlsl_debug_symbols,disable_symbol_renaming
--no-sandbox
--disable-direct-composition

Die ersten Argumente sind das Minimum, das zum Erfassen eines Frames erforderlich ist. Die zweiten Argumente sind Komfortargumente, die es Ihnen ermöglichen, Shader-Quellcode mit den ursprünglichen Variablennamen zu überprüfen. Das dritte Argument wird von Nvidia Nsight benötigt, um ordnungsgemäß zu funktionieren, der genaue Grund ist jedoch unbekannt. Das letzte Argument war früher erforderlich, um Chrome mit PIX zu erfassen, daher wird es vorsichtshalber beibehalten.

Debug-Marker aktivieren

Um Debug-Marker zu aktivieren, verweisen wir erneut auf Tojiros Blog (https://toji.dev/webgpu-profiling/pix.html#enabling-debug-markers). Im Wesentlichen müssen Sie WinPixEventRuntime.dll von https://www.nuget.org/packages/WinPixEventRuntime in den Ordner <chrome dir=""> kopieren.

Leider unterstützen die Radeon-Tools PIX-Marker nicht von Haus aus. Kein Problem: Es wurde eine modifizierte Version von WinPixEventRuntime.dll entwickelt, die von den Radeon-Tools unterstützt wird. Diese DLL ist hardwareunabhängig und verbessert die PIX-Marker nur auf AMD-Hardware. Der Prozess zum Beschaffen ist genau derselbe wie bei der modifizierten d3d12.dll. Gehen Sie einfach zum folgenden Repository und laden Sie entweder WinPixEventRuntime.dll aus dem Release-Bereich herunter oder klonen Sie das Repository und kompilieren Sie es selbst.

Frame-Erfassung mit RDP (AMD Radeon GPU Profiler)

Um mit AMDs Radeon GPU Profiler zu profilieren, müssen Sie die Radeon Developer Tool Suite von GPUOpen herunterladen. Laden Sie das Paket herunter und entpacken Sie es an einem beliebigen Ort; alle Anwendungen sind portabel.

Doppelklicken Sie auf die ausführbare Datei des Radeon Developer Panels, um es zu starten. Wenn Sie es zum ersten Mal verwenden, müssen Sie wahrscheinlich eine Funktion aus der oberen linken Ecke auswählen. In unserem Fall möchten wir die GPU profilieren, also wählen wir Profiling.

RDP-Funktionsauswahl für WebGPU-Profiling

Beachten Sie den grünen Punkt links neben dem Verbindungs-Tab. Wenn dieser Punkt rot ist, müssen Sie möglicherweise zu diesem Tab gehen und unten rechts auf die Schaltfläche “Connect” klicken, aber normalerweise sollte die Verbindung automatisch hergestellt werden.

Weiterlesen >> SOLIDWORKS auf dem Mac: Lösungen und Einschränkungen

Wenn das Radeon Developer Panel geöffnet, verbunden ist und die Funktion Profiling ausgewählt wurde, wird jede DirectX12-, Vulkan-, OpenCL- oder HIP-Anwendung, die Sie von nun an starten, automatisch erkannt und angehängt. Das bedeutet, dass wir nun bereit sind, Chrome zu starten.

Da RDP die Anwendung nicht für Sie starten muss, können Sie Ihr bevorzugtes Terminal öffnen und Chrome von dort mit den zuvor genannten CLI-Argumenten starten. Die gesamte Befehlszeile sollte etwa so aussehen: "C:Program FilesGoogleChromeApplicationchrome.exe" --no-sandbox --disable-gpu-sandbox --disable-gpu-watchdog --disable-direct-composition --enable-dawn-features=emit_hlsl_debug_symbols,disable_symbol_renaming.

Öffnen Sie nun eine WebGPU-Anwendung in einem Tab. Wenn alles ordnungsgemäß funktioniert, sollte sich der Profiling-Tab von RDP von Status: Offline zu Status: Ready ändern.

Statusanzeige "Ready" im Profiling-Tab des Radeon Developer Panel (RDP) für Chrome WebGPU

Sie können nun die Schaltfläche Capture profile drücken oder die konfigurierbare Tastenkombination Strg+Alt+C verwenden, um Ihre WebGPU-Anwendung zu erfassen. Das Profil sollte auf der rechten Seite der Anwendung unter Recently collected profiles erscheinen.

Tabelle der kürzlich erfassten WebGPU-Profile im Radeon Developer Panel (RDP)

Doppelklicken Sie einfach auf eine der Dateien, um den Radeon GPU Profiler zu öffnen. Falls dies nicht funktioniert, müssen Sie den Pfad möglicherweise manuell konfigurieren, indem Sie oben rechts auf das Zahnradsymbol klicken.

Ereignis-Tab einer RGP-Erfassung, zeigt WebGPU-Abläufe

Und voilà, Sie können nun die Leistung Ihrer App mit RGP untersuchen. Die genaue Verwendung von RGP selbst liegt außerhalb des Rahmens dieses Beitrags, aber ein weiterer Beitrag könnte folgen. In der Zwischenzeit können Sie gerne die folgenden Ressourcen erkunden.

Frame-Erfassung mit Nsight (Nvidia)

Um mit Nvidia-Hardware zu profilieren, laden Sie zunächst Nsight Graphics herunter und installieren Sie es. Ähnlich wie PIX muss Nsight eine Anwendung selbst starten, um sie profilieren zu können. Öffnen Sie also Nsight, klicken Sie oben links auf die Schaltfläche “Connect” und wählen Sie GPU Trace Profiler aus dem Tab Activity aus.

Einrichtung des GPU-Trace-Modus in Nvidia Nsight für Chrome WebGPU

Wählen Sie Ihre Chrome-Ausführungsdatei im Feld Application Executable aus; der Pfad sollte etwa C:Program FilesGoogleChromeApplicationchrome.exe lauten. Vergessen Sie nicht, das Feld Command Line Arguments mit den relevanten Argumenten, einschließlich des erforderlichen --no-sandbox, auszufüllen. Das Feld sollte etwa so aussehen: --no-sandbox --disable-gpu-sandbox --disable-gpu-watchdog --disable-direct-composition --enable-dawn-features=emit_hlsl_debug_symbols,disable_symbol_renaming.

Sobald diese Felder ausgefüllt sind, klicken Sie einfach unten rechts auf die Schaltfläche Launch GPU Trace und beobachten Sie, wie Chrome startet. Öffnen Sie einen Tab mit einem WebGPU-Workload, damit Nsight sich automatisch verbindet. Wenn der Vorgang erfolgreich war, sollte sich das Layout der App ändern und eine neue Schaltfläche Collect GPU Trace erscheinen.

Weiterlesen >> Die GIMP „Magische Schere“: Präzise Auswahlen erstellen und optimieren

Der "Collect GPU Trace"-Button in der Nsight-Benutzeroberfläche zur WebGPU-Erfassung

Nachdem Sie diese Schaltfläche gedrückt haben, sollte ein Meldungsfeld Sie darüber informieren, dass die Erfassung erfolgreich war. Drücken Sie einfach die Schaltfläche Open, um auf die Erfassung zuzugreifen.

Meldung nach erfolgreicher Frame-Erfassung mit Nsight für WebGPU

Sie sollten nun die folgende Ansicht sehen und in der Lage sein, die Leistung Ihrer Anwendung zu untersuchen.

Hauptansicht von Nvidia Nsight nach einer WebGPU-Leistungsanalyse

Die genaue Verwendung von Nsight selbst liegt außerhalb des Rahmens dieses Beitrags, aber Sie können gerne die folgenden Ressourcen erkunden.

Schlussbemerkungen zum WebGPU-Profiling in Chrome

Die hier vorgestellte Lösung ist zwar ein “hacky” Workaround, der zum Zeitpunkt des Verfassens dieses Artikels sowohl RDP als auch Nsight auslösen kann. Es ist durchaus möglich, dass dies morgen nicht mehr funktioniert und dagegen wenig unternommen werden kann.

Dennoch ist es derzeit die einzige verfügbare Option, um die GPU für chrome webgpu unter Windows/Chrome ordnungsgemäß zu profilieren. Dies war ein großer Schwachpunkt bei der täglichen Arbeit mit WebGL, zusammen mit dem Fehlen eines geeigneten Grafik-Debuggers. Jetzt bietet WebGPU beides durch PIX und RGP/Nsight. Dies macht es zu einer wesentlich praktikableren Option für ernsthaftes Grafik-Programming. Performance muss nicht länger ein Mysterium oder blinde Optimierung mit verbundenen Augen und gefesselten Händen sein. Starten Sie den Profiler und werfen Sie einen Blick auf tatsächliche Metriken! Nutzen Sie diese Tools, um Ihre WebGPU-Anwendungen auf die nächste Leistungsstufe zu heben und Ihren Nutzern ein reibungsloses Erlebnis zu bieten.

Kurzanleitung (TL;DR)

Anweisungen

Laden Sie d3d12.dll aus dem Release-Bereich dieses Repositorys herunter.
- Platzieren Sie die DLL im Ordner GoogleChromeApplication.
Für AMD-Hardware laden Sie WinPixEventRuntime.dll aus dem Release-Bereich dieses Repositorys herunter.
- Platzieren Sie sie im Ordner GoogleChromeApplication.
Verwenden Sie beim Starten von Chrome die folgenden Befehlszeilenargumente:
- --no-sandbox --disable-gpu-sandbox --disable-gpu-watchdog --disable-direct-composition --enable-dawn-features=emit_hlsl_debug_symbols,disable_symbol_renaming
Verwenden Sie Ihren bevorzugten GPU-Profiler wie gewohnt.