How do I make a continuous animation loop with wasm +winit?

Question

I have the following rust code which work when I create a native window:

 event_loop.run(move |event, _, control_flow| {
        control_flow.set_poll();
        match event {

            Event::WindowEvent {
                event: WindowEvent::Resized(size),
                ..
            } => {
                // Reconfigure the surface with the new size
                config.width = size.width;
                config.height = size.height;
                driver.surface.configure(&driver.device, &config);
                // On macos the window needs to be redrawn manually after resizing
                window.request_redraw();
            }

            Event::RedrawEventsCleared => {
                lbm.iterate(&driver, 100);
                console::log_1(&format!("{}", lbm.get_compute_num()).into());
            }
            Event::WindowEvent {
                event: WindowEvent::CloseRequested,
                ..
            } => *control_flow = ControlFlow::Exit,
            _ => {}
        }
    });

When I build this using wasm-pack and call the function that contains the event loop in a simple html page, I get the results of the first render, but no more. I have read that winit's event loop cannot cause updates directly as renderAnimationFrame() controls when the browser calls updates. I read the following from the winit docs

Web: Events are queued and usually sent when requestAnimationFrame fires but sometimes the events in the queue may be sent before the next requestAnimationFrame callback, for example when the scaling of the page has changed. This should be treated as an implementation detail which should not be relied on.

However, I don't really understand how to use requestAnimationFrame in this context. How do I call it to create a continuous loop?

Note: the console log is being called in RedrawEventsCleared, but I only get the first frame still.

Answer 1

I figured it out. I was confused with the callback in requestAnimationFrame(). I thought the callback needed to perform some kind of work to change the frame, but after reading the docs, the following loop works:

function step() {
          window.requestAnimationFrame(step);
}
        window.requestAnimationFrame(step);