A question about performance and "random" jankyness

I’ve made a fairly simple app (as far as I know) but am struggling with one thing: jankyness. Or more specifically: random jank. Most of the time the app is perfectly fine, but occasionally the app will start to stutter, and the smooth frame rate is gone. The strange thing is that when this happens Chrome performance tools give no indication of frames dropped or poor FPS, and the GPU and CPU load seem to be well within 16.7 ms. Even Chromes Frame rate stats show a consistent FPS with no dropped frames or frame reduction, and when running Chrome without an FPS cap, the frame rate speeds up considerably indicating that Chrome indeed can render more than 60 frames per second.

I’m on a two-year-old Macbook Pro, but it is perfectly possible that my app is simply trying to do something that won’t work, or that my approach is not performant enough, but then if that was the case why would I not see more consistent FPS drops that happen more frequently?

You can see the live app running at grassy.huth.io and the code is here: github.com/tommhuth/grassy. The field of grass is generated with an instanced mesh (the average field has an instance count of around 169, with the geometry having 350 vertices) that has a custom vertex shader that reads textures (3 in total, generated with a 2D canvas) to calculate the height of the grass, and a simple fragment shader to create a top-to-bottom gradient for each blade of grass. I’ve tried following the best practice I know: reusing textures and geometries, reducing uniform updates, infrequent texture updates and other intensive work, including doing a simple discard in the fragment shader based on distance from player (camera) position radius.

Perhaps rendering this much is simply not going to be performant ever? Has anyone else experienced this kind of jankyness that is hard to reproduce and does not seem to happen very frequently? Anyone have any ideas what could be the culprit or how to approach Webgl performance tweaks?

Very nice demo!

Do you see the same kind of frame drops in other browsers on the same platfrom? E.g. how does Firefox and Safari perform?

You can also try to start Chrome Canary with a Metal backend (instead of OpenGL). I believe the command for that is:

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --user-data-dir=/tmp/c1 --use-angle=metal

Do you see a difference when doing this? Performance issue like described could be resolved by switching from OpenGL to Metal.

Thanks @Mugen87! :slight_smile:

So it seems it’s Chrome that has an issue here, Safari and Firefox seem much more consistent. I also tried using Metal instead (both Chrome and Chrome Canary) but that gave me a horrible frame rate (1 fps like) almost as if it skipped the GPU altogether. Not sure if that is some incompatibility with my Mac or just the Metal stuff being to early to test.

Maybe it’s indeed too early for the Metal tests.

In any event, I would test with Chrome on another device. The performance issue you are seeing could occur because Chrome has issues with your driver/hardware combination.

If you can manage to narrow down the performance problem to a more compact demo, you might want to file an issue at: Monorail - chromium - An open-source project to help move the web forward. - Monorail

1 Like