THREE.DrawCallInspector | Visualize draw call cost

THREE.DrawCallInspector is a JavaScript library. THREE.DrawCallInspector has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can download it from GitHub.

This is a quick experimental attempt of a helper to monitor draw call costs. It could help spotting expensive draw calls caused by costly shaders. This is just experimental for now. I had some test runs it took some time till the expensive started to outweigh. A sort of hack is used in order to do measurements and to get as close as possible to the actual draw call without core modifications. I made this relatively quick as experiment, if it turns out to be useful and somewhat reliable i will clean it up and further improve, the WebGL API is quite limited around this as well as how precise time can be measured. Use ASDW keys to move the box, look around and you will spot a sphere in the center with a expensive shader. The output is a map that renders all objects tinted with red weight by how much time they took relative to each other. This means a average scene with equally expensive meshes in view is likely going to be mostly fully red, while if there is a more expensive objectt with an expensive shader it will be more red while the others fade towards white. There is no way to get some exact timings of a draw call, but comparing all timing weighted by the longest seems to give a reasonable result. When a render call is measured after and before every render call it is tried to wait for it being finished, the more draw calls you have the slower this process will be - in a large scene this can take several seconds. Everything is pretty driver dependent, possibly browser as well so for now i can't tell if this will work reliable in every condition. By default i recommend not using the original materials unless they are required for special vertex transformations, that means skinned meshes or similar won't be animated in the output redscale which is not relevant anyway but enough to see what is causing cost. Create the inspector, call mount in order to attach the UI and add the hooks into THREE, if you don't want to add/remove the code all time you want to inspect just only call mount when needed, such as commenting the line out or when a query parameter is given. In your render loop right at the beginning call dci.update() for the overlay output. And at your scene draw call, call dci.begin() before and dci.end() after your scene is rendered to the screen or a render target. Click on the overlay for a capture or enter a number of frames in the input, so it will automatically take a snapshot after that number of frames. This should work with all most recent 100+ revisions.