Bad shader performance in Edge

Problem Description

Performance drops a little in FireFox and dramatically in Edge when using included shaders that effect color and blending. This seems to have more to do with the way the shaders are working than the size of any objects on-screen in relation to overdraw - without the shaders, performance is consistent and greatly improved. This issue appears using only the shaders included with C2, no 3rd-party shaders. This could possibly be related to browser differences but I wanted to report it because performance is so different in Edge and this may impact anyone who ports to XB1 when the ability to do so is officially released, and I definitely remember this not being an issue the last time I tested in Edge around 6-8 months ago.

Attach a Capx

https://dl.dropboxusercontent.com/u/14245368/performanceissues_colorblending.capx

Description of Capx

Creates 75 randomly-tinted sprites & changes their blending mode. Randomly chooses between Screen and Multiply blend modes on each sprite, then turns off the shader that isn't in use.

Steps to Reproduce Bug

• Launch Capx
• Launch in Chrome, FF, Edge
• Observe performance in debugger

Observed Result

Low CPU usage/high performance in Chrome. Higher CPU usage/Draw Calls but high fps in FF. Much lower performance in Edge, and if for example a single additional layout shader is added (eg the noise shader included with C2) performance can reach down past 10fps on a beefy PC. Maybe something broke in Edge?

Expected Result

Better performance with standard shaders. A further example can be found here from which the .capx is derived: http://fars.pixelmetal.com - go to the map screen and compare draw performance in the browser debuggers in Chrome/Edge.

Affected Browsers

• Chrome: NO
• FireFox: YES, somewhat
• Edge: YES

Operating System and Service Pack

Win10 1607

Construct 2 Version ID

243

In Edge 15 with the Creator's Update, Edge performs approximately the same as Firefox on my machine. I can get 60 FPS on all three browsers, but the CPU usages are approximately 20% in Chrome, 40% in Edge and 45% in Firefox. So it looks like Edge 15 has been optimised and is now slightly better than Firefox. Can you confirm?

In Edge 15 with the Creator's Update, Edge performs approximately the same as Firefox on my machine. I can get 60 FPS on all three browsers, but the CPU usages are approximately 20% in Chrome, 40% in Edge and 45% in Firefox. So it looks like Edge 15 has been optimised and is now slightly better than Firefox. Can you confirm?

I haven't spent much time in it since the update, but a quick test shows better performance if objects with shaders don't animate, and with scaling/rotation manipulation at runtime is still pretty bad. For reference, the example in the OP creates around 200 or so tinted objects.

I'll spend more time and see if I can figure out what the issue is, but glancing at the Edge console the paint operation seems to be taking an unreasonable amount of time. Removing all object shaders and applying the default noise shader to the layout has similar results. This is on the most recent GPU drivers with an EVGA GTX 980 WC. I'll post here again after more tests.

The scale, rotate and actual rendering work done by the shader is all done on the GPU so that aspect ought to be identical across all browsers (and even native engines).

However rendering shader effects does involve quite a lot of complex rendering calls, so there is a significant CPU aspect to that, and that's what looks like has significantly improved in the latest Edge. I'd suggest focusing any measurements on the CPU side.

The scale, rotate and actual rendering work done by the shader is all done on the GPU so that aspect ought to be identical across all browsers (and even native engines).

However rendering shader effects does involve quite a lot of complex rendering calls, so there is a significant CPU aspect to that, and that's what looks like has significantly improved in the latest Edge. I'd suggest focusing any measurements on the CPU side.

To be more clear, it's not the shader doing rotation/scale - it's rotation/scale of the objects using events & actions. The only shader in use on the objects dragging performance down in my example is the Tint shader included with C2.

So far I've tested on a higher-end Xeon, a top of the line SP4 and mid-range Surface Book (with Nvidia keyboard GPU). If I remove the Tint shader, the fps issues go away, Intel or Nvidia GPU, and if I turn off scaling/rotation of objects but leave the Tint shader on, no fps issues occur. I'm seeing more CPU usage in Edge 15 and it's not really thrashing the GPU as the recent, previous updates were. It's pretty strange behavior tbh, and seems to be an issue with Edge that I didn't run into at all last year, so I think something changed on their end. I'll poke my MS contacts to see if I can get any more info from them.

Well, I think it's clear it's not a problem with C2 anyway - if it's fast in one browser but slow in another, it generally means our code is fine and something in the browser is slow in that case. It also seems better in the latest Edge 15. So closing this report for now.