requestAnimationFrame, setInterval(16ms), vs futures_bindgen::spawn_local

Context: Chrome / wasm32 / webgpu / webgl2.

We want to redraw to a canvas at 60fps.

Three common ways come to mind:

  1. requestAnimationFrame

  2. setInterval(16ms, ...)

wasm_bindgen_future::spawn_local(async move {
  loop {
    redraw();
    sleep_millis(16).await;
  }
})

Now, I know that if we were modifying the Dom tree, requestAnimationFrame would be useful for delaying the css layout calculations. However, in our situation, we are only painting to the canvas, nothing else.

If our goal is "smooth, minimal lag", is there any difference between these 3 approaches, or are they all approximately the same ?

Thanks!

requestAnimationFrame is not just about DOM updates — it also follows the screen refresh rate automatically. It's the recommended way to do any kind of animation.

4 Likes

This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.