Mesh Gradient performance

[hlauinfo]

I really like the aesthetics and customizability of your Mesh Gradient shader. However, it seems to be consuming GPU resources heavily to the point where it depletes my laptop battery faster than it should. Are there any option flags that can help optimize performance? It seems like it still runs in the background even when not in view by default.

[vladmoroz]

How large are you rendering it at? Most of all, performance depends on the total pixel count that the shader renders. Mesh Gradient is one of the better performing shaders, it's pretty well-optimized itself.

Here's what you can try though:

• Set a smaller maxPixelCount prop. By default it's 1920 * 1080 * 4 (yields 8,294,400 pixels), that would be perfect quality on a full-screen 4K display.
• Set a smaller minPixelRatio prop. By default it's 2; we render at double resolution for better anti-aliasing (as long as it doesn't exceed maxPixelCount).

If you don't use the grain params, Mesh Gradient should take quality reduction very well as it doesn't have any sharp details that would make quality reduction obvious.

it still runs in the background even when not in view

We are not doing any checks for whether the shader is in viewport, but you could implement it on your side, setting speed = 0 when not in view, and tailor this behavior to what your app needs.

I suspect that pausing it perfectly might be challenging because the checks for whether an element is in the viewport are asynchronous in browsers.