search

pmndrs / react-three-offscreen

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

CanvasOffscreen uses fallback with Vite #2

Open davcri opened 1 year ago

davcri commented 1 year ago

First of all thanks @drcmda for this amazing package.

I tried integrating the example on a Vite based project and it seems like CanvasOffscreen always use fallback scene. Using the CRA example provided in this repo works fine instead.

Minimal Vite example: https://stackblitz.com/edit/vitejs-vite-pujh5e?file=src/App.jsx
Tested on latest Chrome on a Macbook Pro M1.

drcmda commented 1 year ago

i tried using vite as well but couldn't make it work, it looks like it has trouble loading the worker. it's more like a vite problem, nothing that i think i can fix here, it's just a worker after all. but if you figure it out i would love to document what must be done to make it work.

drcmda commented 1 year ago

it looks like vite can't handle jsx in workers. if the <Scene /> is removed at least i can console.log in it to make sure the worker runs, but once any jsx is in there the worker doesn't execute.

drcmda commented 1 year ago

ok, started to see something if i rename to worker.jsx, and if i just render a mesh with a geometry. as soon as i import the scene component vite tries to inject styles to document, which doesn't exist in the worker. :-S

some more digging, it is this that causes it: https://github.com/vitejs/vite/issues/1984 the plugin injects dom styles. i think previously it was possible to switch that off, see https://stackoverflow.com/questions/73815639/how-to-use-jsx-in-a-web-worker-with-vite but that option doesn't exist no more.

drcmda commented 1 year ago

this is the workaround :( it's very bad

https://github.com/pmndrs/react-three-offscreen#vite

TobiasMelen commented 4 months ago

Hello, I've fiddled with rendering r3f offscreen a while ago and in conjunction with this I made a patch plugin for Vites dev client to re-enable fast refresh in workers. Just saw this project and updated the plugin for latest Vite, it seems to work okay-ish still: codesandbox

Plugin vite-plugin-react-worker

Any updates outside the canvas re-triggers the effect doing the canvas offscreen handover, which will fail. This results in the fallback being rendered instead. But for changes inside of the worker it seems to work.