pmndrs / react-three-offscreen

📺 Offscreen worker canvas for react-three-fiber
https://offscreen.pmnd.rs
MIT License
434 stars 14 forks source link

Feature request: add ability to handle onmessage in worker #10

Open wmaurer opened 1 year ago

wmaurer commented 1 year ago

I'd like to be able to handle onmessage in the worker. The react-three-offscreen render function already handles onmessage. I'd like to be able to hook into this.

(My use case is that I'm sending ImageBitmaps from the video camera to the worker which are passed on to the Scene component as a stream)

As an experiment, I've changed the signature of render to accept a callback:

function render(children: React.ReactNode, onmessageHandler: (event: MessageEvent) => void);

I then call the callback inside render's handler:

    self.onmessage = event => {
        const { type, payload } = event.data;
        const handler = handlerMap[type as keyof typeof handlerMap];
        if (handler) handler(payload);
        onmessageHandler(event);
    };

Would you accept a PR for this feature request?

austintheriot commented 8 months ago

First off: thank you for making this library. I think it's a fantastic idea, and now that OffscreenCanvas is supported in all major browsers (check out latest support in Safari), you'll likely be getting more traction here.

As @wmaurer mentioned, it would be nice to be able to hook into the onmessage handler.

Any users interested in using this package are likely doing so because they want/need every ounce of performance they can get in the browser. postMessage on WebWorkers is a crucial part of web performance, because it allows developers to performantly send transferrable objects with very little overhead, which is not possible to do with the BroadcastChannel api. Only allowing users to use BroadcastChannel seems like the wrong choice here.

austintheriot commented 8 months ago

Note for any others: after looking more, it's also possible to use transferable objects via the MessagePort object: https://developer.mozilla.org/en-US/docs/Web/API/MessagePort/postMessage

^ This may in fact be the best way to interact with your rendering WebWorker, since you are able to "transfer" objects that exist in the same thread OR in different threads, allowing you to isomorphically interact with your rendering thread/scene