WebGL performance issues with retina Macbook Pro

Question

I have a WebGL application that I am developing and I have run up against some pretty serious performance concerns with Retina Display Macbook Pros. I am testing on a 15 inch Macbook with Intel Iris Pro GPU, rendering at full resolution, which gives me a canvas resolution of 3810x2030 with a full screen Chrome window. My application renders about 100k vertices per frame.

Now, when I set the application to run with a device pixel ratio of 1 (meaning no retina scaling), the performance of the application is solid, never falls below 60 fps, but the image quality is unacceptable. When I switch to the retina's device pixel ratio which is 2, the image quality dramatically improves, but my framerate plummets to around 20-30 fps.

Now, I'm no stranger to GPU programming, so the reasons why this is happening are obvious to me. What I am wondering is, has anyone out there found any workarounds or ways to optimize WebGL drawing for ultra high resolution displays with bad GPUs like the retina Macbook Pro? Are there any non-obvious tips or tricks people have found through trial and error to resolve this issue or at least make it slightly better?

Any help would be appreciated. Thanks.

Edit: Small update with an interesting discovery. I put my browser window into an external display hooked up to the Macbook, and when rendering at a DPR of 1, the performance is even higher on the external display than it is on the macbook, even with the exact same resolution, and the image quality is much better.

So even when you render a downscaled framebuffer on a Macbook Pro, it still scales it up, which is likely what is causing the poor image quality (it is scaling it up using bilinear filtering, making it more blurry than it would be if the original image were displayed unaffected).

Answer 1

Just want to give an update to all those who followed this post some closure. I was able to get my application running above 45 FPS by simply setting the canvas option "antialias: false". This gave a huge performance gain on high density displays, and isn't necessary since high density displays provide a large amount of built-in antialiasing. Hope this helps someone else in the future.

Answer 2

Some things are not hardware accelerated in Chrome on Mac OSx.

Take a look at this URL:

chrome://gpu/ 

If you find something that is disabled, you can potentially adjust it using:

chrome://flags/ 

The downside, is that if you find something that works, it isn't exactly deployable. It may give you insights into where your bottleneck is though.

(here is the full list of urls that get you to hidden and special places in chrome: chrome://chrome-urls/)