Offscreen canvas
dannysemi opened this issue · 15 comments
Any luck with offscreen canvases?
I modified my component so I'm not using the canvas before I transfer to offscreen. That part seems to work, but if I try to use any SceneLoader on the worker thread I am getting this error:
Uncaught (in promise) ReferenceError: window is not defined at Function.e._ReturnFullUrlLocation (babylon.js:16)
I don't get that error if I use NullEngine. Deltakosh is loading assets just fine in the demo which makes me think this must be something specific to webpack/typescript. Any ideas?
It looks more like you are running it in Node.
https://github.com/BabylonJS/Babylon.js/blob/73a8eca71b772d68e8679052c75ea43ff1c3f9a9/src/Offline/database.ts#L96
If window isn't defined then you are not running it in a browser?
No window is not defined in a worker either. From https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API:
A worker is an object created using a constructor (e.g. Worker()) that runs a named JavaScript file — this file contains the code that will run in the worker thread; workers run in another global context that is different from the current window. This context is represented by either a DedicatedWorkerGlobalScope object (in the case of dedicated workers - workers that are utilized by a single script), or a SharedWorkerGlobalScope (in the case of shared workers - workers that are shared between multiple scripts).
But as I mentioned I was able to use SceneLoader in a worker in my react app with the NullEngine. But for some reason I'm getting that error with the offscreen canvas.
Can you disable the database/offline mode? I just re-read your question and was going to send you this link (https://www.w3schools.com/html/html5_webworkers.asp).
Is that enabled by default? I didn't enable it so I will have to figure out how to disable it first.
I didn't see anywhere in the demo where it was being disabled explicitly.
This is how to do it explicitly:
https://github.com/BabylonJS/Babylon.js/blob/73a8eca71b772d68e8679052c75ea43ff1c3f9a9/src/Engines/engine.ts#L324
You should be able to set it like this, but it looks like I don't flow the prop through to the Engine, so you would need to do it for now imperatively to see if that will fix and then I can fix react-babylonjs:
{ /* this won't work */ }
<Engine ... enableOfflineSupport={false} />Can you share a repro?
https://github.com/dannysemi/create-react-app-typescript-babylonjs/tree/vanilla
So I got it working by stripping practically all of the react and typescript away. I will try to add some of these elements back in until I can reproduce the issue I am having.
Sorry, this isn't an issue with your library. Unfortunately it looks like I won't be able to make much use of it if I want to do offscreen rendering.
well, the original error you were seeing can be fixed in the original library by removing the window.location.href (if I tracked it down correctly) - I'm looking at what you have.
Your repo works for me in chrome. If you add back in and get the error just repost. I would try this in worker.js before creating the engine:
BABYLON.Engine.OfflineProviderFactory = undefined;
That may remove the error. Would like to see a repro with the error and then I can put a patch to main library.
I've managed to reproduce this cleanly. BABYLON.Engine.OfflineProviderFactory = undefined; didn't do anything for me, but engine.enableOfflineSupport=false did fix things. I'm going to organize my code a little better and post what I've got. I think webpack is causing this. It should be clearer when you see my code.
great. push your vanilla branch when you are ready and I will take a look. cheers.
https://github.com/dannysemi/create-react-app-typescript-babylonjs/tree/typescript-worker
If you change the SceneLoader line in the worker to the commented version you can see the error I was getting. I wrote the worker in typescript this time and loaded it with webpack's worker-loader. Which explains why the vanilla version works with no modifications, but I have to work around webpack when I try to load files from my public directory.
I don't understand why that .glb file doesn't load properly when loading from public. It works fine in my project with all of my assets.
Note: I had to update some dependencies to get this working because I think the CRA folks or webpack changed how they handle workers.
I did a PR on babylon.js main repo. It's because the URL starts with /assets/. Once (if) that gets merged then your repo works just by changing the rootUrl it should include PUBLIC_URL:
SceneLoader.ImportMesh("", `${process.env.PUBLIC_URL}/assets/`, "flightHelmet.glb", scene, function (meshes) {
I'll drop a message here if the PR is accepted.
it was merged this morning, so your project should work when @babylonjs/core@4.2.0-alpha.12 is released. Imagine would be very soon as alpha.11 was nearly 2 weeks ago. :)
Awesome, thanks!