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?
