Using new tree shakable versions

[Leon]

I’m trying to implement the new /pure tree shakable imports for my app.

but I’m struggling.

Babylon.js docs

I have two apps, frontend and editor

in the frontend app it works fine after changing over to /pure
and using:

RegisterRay()
registerBuiltInLoaders()

But in the editor I’m getting this weird error when loading the exact same .glb file.

LoadAssetContainer is not supported by this plugin. Plugin did not provide a loadAssetContainer or loadAssetContainerAsync method.

How should I go about finding out why this is happening?

Claude could not help me either and just ate $10 dollars of tokens and said I should go back to the old way of doing things

[Deltakosh]

cc @RaananW who is the overlord on that part

[RaananW]

Hey, let’s solve the issue.

I noticed you wrote about the editor. Can you explain exactly what you mean? The Babylon editor? I’m not sure how running code works there, but will be happy to try and understand with you what went wrong.

Also, what plugin is complaining about the missing function? Any error log I can look into?

[Leon]

I got it working by configuring the gltf scene loader explicitly instead of the dynamic

// GLTF 2
RegisterSceneLoaderPlugin({
  ...GLTFFileLoaderMetadata,
  createPlugin: (options: SceneLoaderPluginOptions) => {
    return new GLTFFileLoader(options[GLTFFileLoaderMetadata.name])
  },
} satisfies ISceneLoaderPluginFactory)
// Selective glTF (2.0) extensions — only what we actually use.
// Each entry becomes its own lazy chunk, loaded when an asset's extensionsUsed lists it.
registerGLTFExtension('KHR_draco_mesh_compression', true, async (loader) => {
  const { KHR_draco_mesh_compression } =
    await import('@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression')
  return new KHR_draco_mesh_compression(loader)
})

registerGLTFExtension('EXT_meshopt_compression', true, async (loader) => {
  const { EXT_meshopt_compression } =
    await import('@babylonjs/loaders/glTF/2.0/Extensions/EXT_meshopt_compression')
  return new EXT_meshopt_compression(loader)
})

registerGLTFExtension('KHR_mesh_quantization', true, async (loader) => {
  const { KHR_mesh_quantization } =
    await import('@babylonjs/loaders/glTF/2.0/Extensions/KHR_mesh_quantization')
  return new KHR_mesh_quantization(loader)
})

registerGLTFExtension('KHR_texture_basisu', true, async (loader) => {
  const { KHR_texture_basisu } =
    await import('@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_basisu')
  return new KHR_texture_basisu(loader)
})

registerGLTFExtension('KHR_texture_transform', true, async (loader) => {
  const { KHR_texture_transform } =
    await import('@babylonjs/loaders/glTF/2.0/Extensions/KHR_texture_transform')
  return new KHR_texture_transform(loader)
})

registerGLTFExtension('EXT_texture_webp', true, async (loader) => {
  const { EXT_texture_webp } =
    await import('@babylonjs/loaders/glTF/2.0/Extensions/EXT_texture_webp')
  return new EXT_texture_webp(loader)
})

registerGLTFExtension('KHR_materials_unlit', true, async (loader) => {
  const { KHR_materials_unlit } =
    await import('@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_unlit')
  return new KHR_materials_unlit(loader)
})

instead of

import { registerBuiltInLoaders } from '@babylonjs/loaders/dynamic';

When i check the error the problem was here

packages/dev/core/src/Loading/sceneLoader.ts

Where plugin was a promise, and because of that it was going to the else statement with the error.

Which was very strange.

So probably my fault