Hi, I’m using the following code to import a glb mesh file:
const meshes = (await SceneLoader.ImportMeshAsync("", "", "content/3dmodels/meshes/cart_wheel.glb", this, undefined, '.glb')).meshes;
When running in dev mode (I’m developing a Angular webapp), it loads the mesh, but when we build the app and deploy it, it fails loading the mesh with the message:
Unable to load from content/3dmodels/meshes/cart_wheel.glb: /textures/0: Error while trying to load image: blob:http://10.3.0.185:8080/a584c845-6058-4cf1-9de4-b560ffea4ae7 - Fallback texture was used
The glb file is being served ok, if we open the url http://10.3.0.185:8080/content/3dmodels/meshes/cart_wheel.glb in a new browser tab, it downloads the file.
Since I can’t reproduce this error in dev (nor in playground), I’m a little lost by where should I start looking for the source of the error.
Any advise is really apreciated!
What I have already done:
- In the network tab of the Chrome DevTools, it do request the “blob:http://10.3.0.185:8080/a584c845-6058-4cf1-9de4-b560ffea4ae7” url, but it fails to get a result.
- Already cheched that the loaders are imported in the project, if we remove the loader at all, the error message is different (indicating that the loader was not found)
Would be easier to check if you could put it on an open ip address so we could check it.
Just guessing… check the prod build if it is bundling everything that is needed. Are you minifying and obfuscating? Try disabling those and check if it works. Then enable one, check, enable other check until you find the one which is optimizing out more than it should.
I’m not really used to these tech/framework but when some similar happens to me, I try to load the file as a data array or a string to check if it’s the api that I’m using incorrectly or it’s some file access issue.
I don’t know the form the ‘production’ bundle looks like but I’d try to look inside to see if my file is actually bundled inside or not.
It 's inside, then it’s a URL resolving issue. if it’s not, then I’d try to look on how to bundle asset files.
As always, assume anything can fail and check each part of the pipeline (file in bundle, file discoverable, file loadable, bjs api used correctly)
The glTF loader will eventually create blob urls for images inside a glb. It is unlikely that there is an issue with serving the glb since the glb is downloaded completely before it gets processed (unless the
useRangeRequests option set).
If you load your model using the sandbox (e.g., https://sandbox.babylonjs.com/?assetUrl=http://10.3.0.185:8080/content/3dmodels/meshes/cart_wheel.glb), does that work?
Can you put the glb somewhere we can check?
Yes, pointing the sandbox to the served url, it loaded ok (see image below)
But I think the error is related to “Content Security Policy”. I didn’t see before, but now I found this error log:
Refused to load the image 'blob:http://localhost:8080/1ea83ebb-a85c-4a74-9c6b-84e1575829a7' because it violates the following Content Security Policy directive: "img-src 'self' data:".
This is new for me, I’ll try to understand what is this content security policy and check why in production it’s blocking those dinamic blob urls.
The issue was indeed related to content security policy (and not with BabylonJS or the glb file itself).
In production, the following content policy was being applied:
Since the glb loader generates some images with blob urls (that starts with blob:) for the textures, they were being blocked.
To solve, I just added blob: to the content security policy:
- img-src ‘self’ data: blob:
I’m deploying a jhipster application (https://www.jhipster.tech/), so, specifically for jhipster, if anyone else is having the same issue, the solution is to add the blob: in the content-security-policy property inside the application.yml file (that’s why in dev was working, but not when deployed in production).
But if you’re using another web framework and this issue is ocurring, you probably have to configure the content-security-policy somewhere to allow for blob urls in the images.
Anyway, thanks everyone for the help!