OffscreenCanvas with WebGPU

[Mutefish0]

Is there any plan to implement OffscreenCanvas for WebGPU?

Background

I have ported a small game to Deno using WebGPU:
https://github.com/Mutefish0/rega/tree/main/celeste

Currently, the game's FPS is locked to the screen refresh rate (typically 60 FPS), which delays user input responses and makes gameplay less smooth. I'm planning to port a larger game to Deno, but this issue makes me hesitant about it.

Here’s a snippet of my code:

const surface = new Deno.UnsafeWindowSurface(...)

let count = 0;
let lastTime = 0;

while (true) {
  const now = performance.now();
  count++;
  if (now - lastTime > 1000) {
    console.log("Main FPS: ", count);
    count = 0;
    lastTime = time;
  }
  runGameLogic();
  render();
  surface.present();
}

I’ve noticed that surface.present() blocks the main thread, limiting the FPS to 60. When I remove surface.present(), the FPS increases to over 200(but the rendered result is not displayed on the screen).

Suggestion

One possible approach could be to create the surface in the main thread (since surface creation must happen in the main thread due to a wgpu issue), and then transfer it to a web worker. In the worker, we would call render() and surface.present(), while keeping input processing and game logic in the main thread：

// main.ts
const surface = new Deno.UnsafeWindowSurface(...)

const worker = new Worker(import.meta.resolve('./worker.ts') , { type: 'module' });
worker.postMessage({ surface }, [surface]);

let count = 0;
let lastTime = 0;

while (true) {
  const now = performance.now();
  count++;
  if (now - lastTime > 1000) {
    console.log("Main FPS: ", count);
    count = 0;
    lastTime = time;
  }
  runGameLogic();
}

// worker.ts
self.addEventListener('message', (e) => {
    const surface = e.data.surface;
    while (true) {
       render();
       surface.present();
    }
});

In the web, there’s OffscreenCanvas, which achieves a similar purpose. Here’s a WebGPU example.

I've also created a proof of concept in my fork, and the results look promising：

I’d love to hear your thoughts on this idea :)