I cannot find any WebGL fragment shader that will maintain 60fps in a mobile browser. They will run smoothly at first, but over the course of a few minutes will inexorably slow and stutter.
Here's a simple example to demonstrate the problem. http://glslsandbox.com/e#74134.2
Here it is running for a few minutes on iPadOS. https://youtu.be/oVPVER9RCP0
Are shaders like this simply not an option on mobile devices?
Update: This apparently only applies to WebGL1 contexts. On websites that use WebGL2, such as ShaderToy, the shaders run smoothly.
I've figured it out. As pleup surmised, it was a problem of precision.
On every single shader I tested, the motion in some way relied on a function that required a precise decimal value time input. As any floating-point value increases, it gets less precise on this scale. So when this happens to the time uniform, it gives the appearance of poor performance.
So why does this only happen on mobile?
It's because desktop devices sometimes just ignore the global precision setting and use highp
anyway. mediump
is not precise enough for a minutes-long time value, but you wouldn't be able to tell on a machine that doesn't use mediump
anyway.
So in the end, the fix is to force the precision of the time value by declaring it as uniform highp float time
.