18 ms·

Even Flash doesn't offer hard guarantees of smooth, artifact-free animation. It has a fairly sophisticated timing model, and you can improve your chances with t

by chipsy 16y ago

Even Flash doesn't offer hard guarantees of smooth, artifact-free animation. It has a fairly sophisticated timing model, and you can improve your chances with the "direct" wmode (vs. the default "normal"), which makes Flash draw "on top of" the browser instead of "inside" it, but it eventually comes down to the specific platform and drivers, I think.

pmjordan 16y ago
I realise that at that level of abstraction a "guarantee" as such is pretty much impossible, but we don't really want to be writing interrupt handlers in user space. Flash presumably goes to more effort of keeping a consistent framerate, whereas JS's setInterval()'s "not guaranteed" is basically a get-out-of-jail-free card for the browser. A "I'm done with this frame, please call this function when I can start drawing the next one" function would be a great first step. (As would dealing sanely with off-screen canvases)
- phoboslab 16y ago
  Well, you can do a setTimeout with just 1ms delay or use window.postMessage when it's available. I must admit though that it is kinda counter intuitive how "swapbuffer()" is called only implicitly when your top level function finishes. But it doesn't work too bad. I found that the GC is usually not a problem in any browser when you want to animate something smoothly in <canvas>. Plugins in FF (like Firebug or the Echofon Twitter Client), or things like an AJAX request however can result in stuttering animations. Can you elaborate your statement about "(...) dealing sanely with off-screen canvases"? Do you mean things like double/tripple buffering? Edit: For the record: the particle animation runs extremely smooth in Safari on my 2 year old Macbook Air. As far as I can tell, Safari on OSX currently has the most "direct" and efficient way to draw Canvas elements.

18 ms·

Even Flash doesn't offer hard guarantees of smooth, artifact-free animation. It has a fairly sophisticated timing model, and you can improve your chances with t

by chipsy 16y ago

pmjordan 16y ago
I realise that at that level of abstraction a "guarantee" as such is pretty much impossible, but we don't really want to be writing interrupt handlers in user space. Flash presumably goes to more effort of keeping a consistent framerate, whereas JS's setInterval()'s "not guaranteed" is basically a get-out-of-jail-free card for the browser. A "I'm done with this frame, please call this function when I can start drawing the next one" function would be a great first step. (As would dealing sanely with off-screen canvases)
- phoboslab 16y ago
  Well, you can do a setTimeout with just 1ms delay or use window.postMessage when it's available. I must admit though that it is kinda counter intuitive how "swapbuffer()" is called only implicitly when your top level function finishes. But it doesn't work too bad. I found that the GC is usually not a problem in any browser when you want to animate something smoothly in <canvas>. Plugins in FF (like Firebug or the Echofon Twitter Client), or things like an AJAX request however can result in stuttering animations. Can you elaborate your statement about "(...) dealing sanely with off-screen canvases"? Do you mean things like double/tripple buffering? Edit: For the record: the particle animation runs extremely smooth in Safari on my 2 year old Macbook Air. As far as I can tell, Safari on OSX currently has the most "direct" and efficient way to draw Canvas elements.