Performance issues while repeatedly tapping buttons on iPad2

[veillette]

This issue came about while trying to address phetsims/plinko-probability#26.

Plinko-probability uses a play button to launch a ball. The user is likely to use this button in a firing motion by tapping the button. On iPad2 , the frame rate drops considerably while tapping the play Button. However this is not due to the listener attached to the button.

One can recreate this issue by using the Demo Buttons on Sun,

Tapping the A, B C, D and E buttons , one can lower the fps to about 10-15 fps. (I guess i was tapping 5 times a second). Tapping the 1, 2, 3,4 buttons in the same conditions, the lowest fps I could reach was 48 fps (a relatively decent result).

The ABCDE buttons using a 3DAppereanceStrategy whereas the 1234 buttons have a flat look.

[pixelzoom]

Raising priority to high, since this is affecting plinks-probability, which is now in the "home stretch".

@veillette Does this problem occur with both the 3D and flat appearance strategy? Or only with 3D?

@jbphet Any idea what's going on here?

[pixelzoom]

My WAG is that this is a 3D appearance issue caused by gradient performance. Looking at RoundButtonView as an example (RectangularButtonView is similar)... While the gradients are pre-computed, the button's fill, and the "overlay" fill and stroke are changed on every button state change. E.g. RoundButtonView line 239:

case 'idle':
  button.fill = upFillHighlight;
  overlayForShadowGradient.stroke = enabledStroke;
  overlayForShadowGradient.fill = upFillShadow;
  break;

For 3D appearance, upFillHighlight and upFillShadow are both gradients (RadialGradient, in the case of RoundButtonView).

[pixelzoom]

@jbphet Question: Why are 2 gradients (button.fill and overlayForShadowGradient.fill) required for the 3D appearance? Why can't this be accomplished with a single fill for button?

[ariel-phet]

@pixelzoom in phetsims/plinko-probability#26 (comment) @veillette claimed that with the flat strategy he could only get the fps down to about 30 (so much less of an issue)

[jbphet]

One of the gradients is for the highlighting/shading at the top and bottom of the button, the other is for highlighting/shading at the left and right. @jonathanolson had once talked about having more elaborate specs than the currently available linear and radial gradients so that we could use a single gradient in a situation like this, but I don't think anything was ever implemented along those lines.

[jbphet]

The redrawing of the buttons could well be the culprit. Would it be a possibility to detect iOS and use the flat button strategy?

[pixelzoom]

@ariel-phet said:

@pixelzoom in phetsims/plinko-probability#26 (comment) @veillette claimed that with the flat strategy he could only get the fps down to about 30 (so much less of an issue)

This issue is not specific to plinko-probability, it potentially affects all sims. So I don't think that "change to flat appearance" is a viable workaround.

[pixelzoom]

@jbphet said:

The redrawing of the buttons could well be the culprit. Would it be a possibility to detect iOS and use the flat button strategy?

Ditto for this suggestion. Should we just turn off 3D appearance for all sims on iOS?

[jbphet]

In the original description, @veillette describes using the sim by frequently tapping a button. To my knowledge, this doesn't happen in many sims, so I see this as somewhat of a unique situation.

[pixelzoom]

Any sim that has a fire button will involve frequently (more accurately, "repeatedly") tapping the button. So I don't agree that this is a unique (if that implies "rare") situation.

[jbphet]

@pixelzoom - what percentage of the currently live HTML5 sims would you say have a fire button that is intended to be repeatedly tapped by the user in this way?

[pixelzoom]

@jbphet The presence of such a button in the currently-published sims has no bearing on whether this is a "unique" situation. Sun is a general button package, supposedly useful outside of PhET. And PhET will surely have other sims like plinko-probability that need a fire button.

[ariel-phet]

(projectile motion will have a fire button)

[jbphet]

One way to improve performance might be to create the buttons in Scenery and turn all of the different representations (not-pressed, pressed, disabled) into images instead of rendering the gradients.

[pixelzoom]

Membrane Channels, Nuclear Fission and Wave Interference (none of which have been ported yet) all have buttons that are designed to be pressed repeatedly. (There may be others, I just took a quick look.)

[pixelzoom]

Re #244 (comment)... Or instead of changing fill, have different scenery nodes for each state, and change visibility (which is relatively inexpensive).

[pixelzoom]

Re phetsims/plinko-probability#26... That sim has other performance issues which I think may be contributing to the Play button issue. And the designers have said that they are willing to use flat appearance for the Play button as a means of resolving the issue. So I'm going to remove the high priority label from this issue for now.

[jbphet]

Assigning to @KatieWoe to determine if this is still a problem that needs to be addressed. It was originally reported on an iPad 2, and we no longer test that device for performance. There have also been several releases of iOS since then, so the problem may have gotten better or worse.

@KatieWoe - If you feel that it is still something that requires some effort to try to address, please assign to @ariel-phet for prioritization.

[KatieWoe]

Checked on iOS 11, 12 and iPadOS 13 devices. None seemed to exhibit the problem when tested on sun.

[jbphet]

Thanks @KatieWoe. Closing.