What's RenderDoc?
RenderDoc is a powerful tool for capturing and analyzing the rendering process of applications utilizing rendering APIs (Direct3D, OpenGL, Vulcan, etc.) RenderDoc injects itself into the application's execution process intercepting calls to the rendering API.
Important Features
The two most valuable things RenderDoc provides are:
- A detailed chronological list of all the rendering commands that were issued throughout the captured frame.
- Duration times for rendering events.
RenderDoc provides many more features, but the two mentioned above are inarguably crucial for render pipeline profiling.
How to use
Due to how powerful RenderDoc is in extracting mesh and texture data from 3D applications on one hand, but also due to the complexity that comes with browser based rendering on the other hand, the maintainer makes it very clear that capturing frames from browsers like Chrome is not supported.
Understanding the reason for not supporting browser injection and given that there's no ill intent in our quest to profile our browser WebGL rendering, one way of getting RenderDoc to work with browsers is presented below.
Note that the browsers running your WebGL code are very complex and the way they use the low level rendering API is not straight forward at all. A lot of them translate the original render API calls from WebGL to an API that works best on the given OS the browser runs on using ANGLE. For example, on Windows, ANGLE will translate the original WebGL render API calls to D3D11 for performance and stability reasons (Direct3D being the default rendering API on Windows which in turn lead to the GPU driver support for Direct3D to be in better shape than the OpenGL driver support.)
The complexity of browsers and the simple fact that RenderDoc doesn't really support profiling WebGL applications need to be kept in mind when analyzing captures of your WebGL application. The duration times might not always be consistent for example.
Using RenderDoc on Windows
Environment:
Step 1
Install Chromium and RenderDoc (same version as mentioned above. Other versions might also work, but I obviously haven't tested all the combinations.)
Step 2
Create a new shortcut and set the path of cmd.exe (in my case, the path was: C:\Windows\System32\cmd.exe) as the target.
Step 3
Right click on the shortcut and click on "properties". Below window will open.
Replace
C:\Windows\System32\cmd.exe
with
C:\Windows\System32\cmd.exe /c "SET RENDERDOC_HOOK_EGL=0 && START "" ^"C:\Users\my-user-name\AppData\Local\Chromium\Application\chrome.exe^" --disable-gpu-sandbox --gpu-startup-dialog"
Step 4
Start Chromium via Shortcut.
You should get a white window and a popup window as shown above. Don't click OK yet.
Step 5
Open RenderDoc and enable process injection by clicking on Tools -> Settings and checking the box next to "Enable Process Injection" in the "General" tab.
Step 6
After Restarting RenderDoc, click on File -> Inject Into Process.
Step 7
Below window should open. Enter the pid from the chromium popup window here and look for the process.
Step 8
After selecting the "Chromium GPU" process click on "Inject."
Step 9
Now close Chromium's popup window by clicking on "OK."
Step 10
Chromium should now be rendering and RenderDoc should be successfully injected into it. Click on "Capture Frame(s) Immediately" in the process tab.
Step 11
A new capture should appear as shown below.
Step 12
Double click on the capture to analyze the rendering of the frame.
Conclusion
When developing for the web using WebGL, a powerful tool like RenderDoc helps the developer by giving him/her valuable insight into what's happening under the hood. Performance problems like overdraw or excessive draw calls can be easily identified and rectified.
In this blog post I showed how to get RenderDoc to work with chromium in order for web developers to be able to better profile their web applications.
We're Hiring!
Are you fluent in Japanese and looking for a new challenge? Head over to Spacely/Recruit and check out our current job openings!
