davidedc / livecodelab

a web based livecoding environment
http://livecodelab.net/
MIT License
327 stars 63 forks source link

Allow control of the canvas context(s) resolution and solve performance conundrum #223

Closed davidedc closed 9 years ago

davidedc commented 10 years ago

There should be a way to better control the resolution of the canvas context(es). Going full-resolution,especially on high-dpi devices, is an overkill and a fps killer.

Currently, the resolution is set to the size of the browser window when the system is initialised. BUT note that fps changes a lot when the browser window is enlarged or enters in presentation mode - even if the resolution of the contexts seems to be remaining to the original resolution, which shouldn't really happen because the GPU should be still working on the original-size buffers and just then cheaply scale them to the new extent of the window.

A little investigation is needed on why that happens, as it shouldn't happen.

For example, in the default mode of retina macbook 13'' of 2013 (i.e. "Best for display"), opening LCL at the minimum possible size runs the turbine demo at 60fps: screen shot 2013-12-20 at 21 15 19 ...then degrades when the window is expanded (note that the resolution of the 3d context is still the original -very small- resolution) screen shot 2013-12-20 at 21 15 52 ...and also has the same unacceptably low fps in presentation mode, although again the context resolution is the same: screen shot 2013-12-20 at 21 14 54

On the same machine, the performance is vastly better when in scaled -> Larger text mode - see 60 fps here at a context resolution clearly higher than the previous example: screen shot 2013-12-20 at 21 18 38

Some of this may be due to quirks of browser/gpu/os, but I remember that suspicious varying-fps-with-same-context-resolution happened on non-retina display macbook pro as well, so there is something fishy going on there.

Possible ways to investigate:

noio commented 10 years ago

So you're saying that a resolution other than 1:1 is slowing things down? (edit: nvm I re-read your comment. ynohtna's suggestion is useful though)

Aside from that, I think a clean solution would be to always have the canvas resolution match the window size (handle onresize), but allow the user to reduce that for performance reasons using a menu button in the top bar; or perhaps a code call: resolution half or something.

ynohtna commented 10 years ago

Have you tried setting the image-rendering CSS property to avoid the GPU/browser doing excessive & unwanted work when the canvas context's viewport area does not match that of it's target in-browser render region?

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

davidedc commented 9 years ago

It took a long while but I'm reasonably happy with the new solution. It seems to give reasonable frame rates (around 60) on the classic examples we use on some setups I tried it on - different GPUs different screen sizes and also on resizing of browser window (including going fullscreen). Description here: https://github.com/davidedc/livecodelab/blob/master/docs/intros/buffers-sizing.md

Note that rendering in latest safari is suboptimal because of this https://github.com/mrdoob/three.js/issues/5599 , should go away soon.