A practical guide to spector.js

Thanks for the reply @PatrickRyan

Today I ran in to an issue where the draw calls were decent ~10 and AFAIU <100 is preferred (although I don’t know if 100 is ok for mobile devices) but the GPU frame time (which I’m guessing is the only relevant frame time for webgl) was high. It turned out it was because of setting the realtimefilteringquality of pbrmaterial to HIGH. That was an easy fix as I was sorta aware of it. But for future GPU frame time slowness issues, what would you recommend I should look for in the spector.js window to locate culprit?

You gave very relevant examples of identifying where you thought things were merged and they aren’t or where meshes should be sharing materials and they are not. Or where transparency is forcing extra draw calls that you don’t expect - these will work great to figure out why draw calls are high. Anything like that on the front of GPU frame time?

Feel free to just list the pointers - I’m happy to go do the background webgl research.

Alternatively, the most widely used approach to performance, could be to just go down the list of items listed here: Optimizing Your Scene | Babylon.js Documentation one by one and seeing which ones apply. Is that a good strategy?

1 Like