Examples: Enhancing Performance Monitoring with Stats-GL

[RenaudRohlinger]

I'm excited to introduce stats-gl a new performance monitoring tool for Three.js, designed to provide more meaningful insights in a WebGL/WebGPU context. This tool extends the basic monitoring of the FPS metric, offering GPU analytics powered by the EXT_disjoint_timer_query extension. This extension is widely supported across various platforms, including Chrome, Safari, Android, iOS, both on desktop and mobile devices.

The only difference from the stats.js API is the requirement to initialize the tool with stats.init(renderer). This initialization step is essential for integrating the GPU tracking feature into Three.js. I've meticulously updated all the WebGL examples to demonstrate the tool's effectiveness. You can explore these examples here: WebGL Postprocessing GTAO Example.

This new tool is particularly useful for setups involving postprocessing and scenarios with multiple render calls per loop. It captures the total CPU/GPU time spent on rendering each frame, aiding in detecting performance regressions which might be less apparent as modern machines easily handle basic examples at full frame rates.

Here I'm not trying to steal the show to the amazing stats.js, I just want to improve the life of maintainers and developers as it's been now a while since every machine runs basic examples to full frame rate and it's now becoming difficult to know if we're introducing a regression or not. The UI and API are basically the same as I wanted something that users can easily adopt but the code is pretty different in the logic.

If this seems ok, I will double check again the examples and add a small header to the lib file and promote to PR this Draft.
I didn't update the repository of the tool yet too as I introduced a bunch of deprecation in order to align the API with stats.js, will have to take care of that too.

[marcofugaro]

The EXT_disjoint_timer_query extension is already implemented in the GPUStatsPanel

[RenaudRohlinger]

The EXT_disjoint_timer_query extension is already implemented in the GPUStatsPanel

Thanks I'm aware, also I don't think a constant 0 GPU MS is any helpful here (for example https://threejs.org/examples/?q=gpu#webgl_lines_fat_raycasting), and the implementation is quite different from stats-gl which uses average of logs to have human readable informations, and support postprocessing by accumulating multiple renders passes analysis per frame.

Again I'm just proposing this feature to help maintainers and developers to have a relevant performance informations as FPS in threejs is pretty much irrelevant nowadays and stats.js is in most of the examples which means that's there is a need, so let's try to add something useful to it.

[gkjohnson]

Thanks I'm aware, also I don't think a constant 0 GPU MS is any helpful here

I guess the natural question why not just adjust the existing GPUStatsPanel to be more useful instead of replacing all of stats.js?

[RenaudRohlinger]

Mostly because stats.js is not made to accumulate values nor to create an average of values and, in consequence, the information output would not be readable.

Alternative would be to support these different elements in stats.js but then the changes would be bigger than the library itself.

Also if the plan was to update GPUStatsPanel I would just have to basically copy paste all my code from stats-gl and try to monkey patch my way to blend it with stats.js which seems overkill for the tool.

Otherwise I can just refer it as an external tool if interested.

[gkjohnson]

I don't think it would be too complex to add a rolling average to just GPUStatsPanel - though it wouldn't add a rolling average for all other panels if that's the goal.

Generally I agree the GPU panel could be made more useful and it would be nice for it to be available in all examples for performance testing. However, I don't have any strong opinions on whether stats.js should be completely replaced. I'll let others chime in on that.

[RenaudRohlinger]

Make sense, will think about all this and open a smaller PR related to what we just discussed in the future.