How to capture WebGL with Renderdoc

This setup only works on Windows with Chrome (might work with Chromium, Edge etc. as well).

  1. Enable process injection in RenderDoc by going to “Tools -> Settings” and checking “Enable process injection” option.
  1. Restart RenderDoc.
  2. Close all instances of Chrome running on your system.
  3. Launch cmd.exe and run Chrome like this:
cmd /C "set RENDERDOC_HOOK_EGL=0 && "C:\Program Files\Google\Chrome\Application\chrome.exe" --gpu-startup-dialog --disable_direct_composition=1 --disable-gpu-sandbox"

or like this in Git Bash and other Bash-like terminals:

RENDERDOC_HOOK_EGL=0 "C:\Program Files\Google\Chrome\Application\chrome.exe" --gpu-startup-dialog --disable_direct_composition=1 --disable-gpu-sandbox
The location of Chrome might differ on your system (sometimes it can be in “Program Files (x86)”. Use “Open File Location” on the Chrome’s shortcut to find where it is.
The Chrome will complain about --disable-gpu-sandbox flag - you should just ignore it. Without this flag, it’s not possible to do RenderDoc captures.

  1. A blank (white) window with a “Google Chrome GPU” popup will appear - don’t press “OK” yet.

  2. In RenderDoc, go to “File -> Inject into Process”

  3. Double-click on the process which has “Google Chrome Gpu” window title (you can filter by “chrome” to find it more easily).

  1. Alt+Tab to the popup and press “OK” (you can also note that PIDs reported by popup and in RenderDoc match).

  1. You should see the RenderDoc text in top-left of your Chrome window. Navigate to the page you want to capture. You can now press F12 to capture the frame.

  2. Note that ANGLE will probably use D3D11 as WebGL backend by default on Windows. I tried switching to OpenGL in chrome:flags but the capture then fails, unfortunately.

  3. Here are some screenshots of my game captured with RenderDoc.

Shadow map pass in my engine

Shadow map pass in my engine

You can even view models

You can even view models

And uniforms

And uniforms

Unfortunately, the debug capabilities of this are not as powerful as for the desktop apps - you can’t inspect and change the shaders, D3D11 calls don’t match to WebGL calls one-to-one, ANGLE renames your uniforms, buffers and textures etc. - but it’s better than nothing!