Error while loading Draco-compressed mesh (glTF-Transform) in BabylonJS

Question

I am trying to load Draco-compressed meshes, processed server-side with glTF-Transform, in BabylonJS retrieving them on the fly via REST calls. Due to this, the mesh to load doesn’t have an extension, because it is a blob in memory and the method URL.createObjectURL() (which is being used to have a URL for such blob) doesn’t allow to specify an extension or a custom URL. If one tries to import the blob as it is, SceneLoader.ImportMeshAsync() seems to not know how to load it and gives

createModelRenderable.ts:520 Error during loading meshes, try again RuntimeError: Unable to load from blob:http://127.0.0.1:5173/b3b55baa-4ede-41fd-a66e-304460969a7f: importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse
    at A (sceneLoader.js:343:46)
    at Object.importMesh (babylonFileLoader.js:797:17)
    at sceneLoader.js:382:35
    at A (sceneLoader.js:182:13)
    at fileTools.js:375:9
    at XMLHttpRequest.A (fileTools.js:489:33)

without being even able to load a classic .glb. That’s why you have to specify “.glb” as the pluginExtension parameter of ImportMeshAsync to make it work. By doing so, the classic glb will load, but the draco-compressed one won't because (maybe? I suppose) its schema definition doesn't specify any extension mesh.primitive.KHR_draco_mesh_compression.schema.json

createModelRenderable.ts:519 Error during loading meshes, try again RuntimeError: Unable to load from blob:http://127.0.0.1:5173/07f9e64c-2c58-4c64-81c0-54f7d3bbb586: (this.dracoCompression || E8.Default)._decodeMeshToGeometryForGltfAsync is not a function
    at A (sceneLoader.js:343:46)
    at sceneLoader.js:397:21

By the way, the KHR_draco_mesh_compression is loaded because trying to add it again will raise a warning saying that “there’s no need to add the KHR_draco_mesh_compression extension because it’s already present”. I have already checked that draco’s configuration was ok, and the default one points to a valid CDN

wasmUrl: “https://preview.babylonjs.com/draco_wasm_wrapper_gltf.js”
wasmBinaryUrl: “https://preview.babylonjs.com/draco_decoder_gltf.wasm”
fallbackUrl: “https://preview.babylonjs.com/draco_decoder_gltf.js”

the decoder wasm is downloaded correctly. I have anyway tried to use local files, but the result was the same.

I'm also sure that the mesh is a valid Draco compressed GLB file, because it loads correctly on https://sandbox.babylonjs.com/

I also tried loading the mesh as a file with something classic like

const loadFileAsync = function (url) {
  return new Promise(function (resolve, reject) {
    LoadFile(
      url,
      function (data) {
        resolve(data);
      },
      undefined,
      undefined,
      true,
      function (_request, exception) {
        reject(exception);
      }
    );
  });
};

and then decode its Draco-compressed part with new DracoCompression().decodeMeshAsync() to mix it then with texture and the rest but no luck again getting "Not a Draco file." in response.

Seems the same issue is faced in this post on BabylonJS forum, still without any working solution.

Your error message undefinedimportMesh has failed JSON parse seems to suggest that it's a browser issue reading from a BLOB or something, not related to the glTF itself. Can you investigate DevTools network panel and see if you're getting a 403 or some other error? — emackey
– emackey, Commented Jan 31, 2024 at 15:08
In that case I think you have to trap the text being fed into JSON.parse that's giving you the parse failure. Is it trying to parse the binary contents of the GLB? Or is it trying to parse some non-JSON error message? Clearly it's not parsing the JSON payload from the glTF file, given the glTF file works fine in other viewers. — emackey
– emackey, Commented Feb 1, 2024 at 19:45
good catch, effectively not specifying the plugin extension, Babylon was using a loader with extension .babylon which was trying to parse the whole file as a json, instead of extracting the json header and then load the binary data. By specifying .glb instead, the loader being used is correct, but it seems to not have the draco plugin. even though adding it manually says it's already loaded! — Alessandro Muzzi
– Alessandro Muzzi, Commented Feb 13, 2024 at 14:18

labris · Accepted Answer · 2024-02-11 15:57:04Z

0

Here is the PG example with Draco mesh loading from blob - https://playground.babylonjs.com/#FIWM5X#45

answered Feb 11, 2024 at 15:57

labris

1111 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alessandro Muzzi Over a year ago

Even though it works in there, with the same exact lines it doesn't in my project. I'm starting to wonder if it might be caused by any incompatibility with other libraries I have. I double-checked BabylonJS version and is 6.18, so it should work.

Alessandro Muzzi · Accepted Answer · 2024-02-15 08:38:43Z

0

After debugging BabylonJS' core I discovered that using “.glb” was right and it was using the correct loader (glTFLoader), but there was a version mismatch in babylon’s imports causing a function not to be found, namely, _decodeMeshToGeometryForGltfAsync()

edited Feb 15, 2024 at 8:38

answered Feb 13, 2024 at 16:15

Alessandro Muzzi

8482 gold badges13 silver badges28 bronze badges

Collectives™ on Stack Overflow

Error while loading Draco-compressed mesh (glTF-Transform) in BabylonJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related