Application wide profiling

[vorg]

As the application grows so is the number of components that create regl commands and relaying on regl.stats and reglCommand.stats is not enough. Some issues:

1. Currently there is no way to get list of all regl commands, not even their count. Regl commands are one of the most expensive resources especially on init due to code compilation and reducing their number is critical. That would also allow me to iterate over stats of all commands in one place.
2. List of all buffers, textures etc. could be useful for debugging
3. Execution time measurement of update calls e.g. texture.subimage can take significant time of run every frame. Any ideas how to handle that? Currently I rely on wrapping update code with console.time/timeEnd and regl._gl.finish()

This is connected to Debugging helper tools

[mikolalysenko]

This makes sense and internally regl tracks all this info anyway. Exposing it would be an easy win.

Do you want to take a shot at this?

[vorg]

Yes, i'll have more time next week and probably start with exposing total counts.

There is also a question of how much of that should be in core? Below is a screenshot of what hopefully will become regl-profiler similar to PerfMeter. It currently depends on wrapping regl.frame, regl.texture, gl.useProgram, gl.drawArrays etc. I had to drill down to gl.* calls as one regl resource can create multiple dependent resources (eg. FBO creates dept buffer by default). Again, total counts currently used for resource ids would help.

Sections from the top:

• FPS counter (estimated from 1000ms / frame duration). Always aim for 60fps, yeah right..
• Manual labeled timers profiler.time(label), profiler.timeEnd(label) currently using performance.now() and gl.finish(), I should switch to disjoint queries as gl.finish approach doesn't work in Chrome. Used for bigger app subsystems / pipelines.
• Active (from regl.stats) vs total resource count. Used to catch errors where I was e.g. creating elements buffer every frame or lots of temp textures in a dynamic uniform.
• Primitives count. Used for scene complexity estimation.
• Core gl call count per frame. Used to better understand how to nest regl commands (e.g. for shared uniforms) and organise batching.
• Command stats (cpu vs gpu time). Currently added manually.

API:

const regl = require('regl')({ profile: true })
const profiler = require('regl-profiler')(regl)

const drawMesh = regl({ .... })

// start measuring CPU and GPU timings for the  given command
profiler.addCommand('drawMesh', drawMesh)

// measure some timespan
profiler.time('init')
...
profiler.timeEnd('init')

// whole frame call back will be measured automatically
regl.frame(() => {
   // draw will attach fixed canvas element in the top right corner and draw stats
   profiler.draw() 
})

[dcposch]

2. List of all buffers, textures etc. could be useful for debugging

You can get this and more with the excellent WebGL Inspector extension.

[vorg]

@dcposch I was big fan of WebGL inspector but there is number of issues:

• doesn't work in Safari
• once enabled it breaks extensions e.g. Float Textures, so it's not usable in any real world app
• it's not realtime, i need to capture frame to inspect it
• doesn't help with regl related bugs in my app like creating unnecessary buffers every frame

[kevzettler]

As of late, I have found Spector.js to be incredibly helpful. It is available as a standalone module you can integrate into your project and also has browser extensions.