Standalone inspector

Questions
1

Hi,

I am working on optimizing the build size of my project… To achieve this, I’ve decided to decouple the debugger from the build process. The 3D scene is initially created in a repository without the debugger. Then, this scene is imported as a package into a different project. In this secondary project, I want to inject the debugger selectively, depending on certain conditions. The reason for this approach is that importing the debugger as an ES6 package would require importing all its dependencies again, even if most of them are already imported in the 3D scene package. To avoid this redundancy, I plan to inject the debugger directly into the page and link the scene to it.

I tried something like

const clientManager = this.engine3d.default(); // this come from the 3d scene package
const bg = new BABYLON.DebugLayer(clientManager.scene)
bg.setAsActiveScene();
bg.show();

but I got this error
image

I hope this explanation clarifies the approach. Am I crazy trying to do this? :)))
Thank you!

2

Not sure that I completely understand the issue, but probably you could use dynamic import like here? - babylonjs-webpack-es6/src/scenes/defaultWithTexture.ts at e3f29bfafa216765a12cda8c067e32559a816ae2 · RaananW/babylonjs-webpack-es6 · GitHub

1 Like
3

Here is an example of code spillting the debugger BabylonjsInkSample/src/inkCanvas.ts at 3330c48c98f50857dae557170949258aa483a6ee · sebavan/BabylonjsInkSample · GitHub

2 Likes
4

Hi, thank you both! Sebavan, this is how I’m currently using it, but for some reason, it’s not working as expected. :disappointed: I’ll try a few more things and let you know.

I think what I’m looking for is a solution to use the inspector outside of the bundle. Essentially, I want to bundle all the Babylon code except the inspector. Then, somehow, in the page where the bundle is used, I’d like to add the inspector.js script in the head and link them together, or something along those lines. btw, I’m not sure this is the right solution

5

Hi, good news. I was able to make it work something like this

import type { Scene } from "@babylonjs/core/scene";

export function toggleDebugMode(scene: Scene): Promise<any> {
    // Rely on code splitting to prevent all of babylon
    return new Promise((resolve, reject) => {
        try {
            import('@babylonjs/inspector').then((inspectorModule: any) => {
                const { Inspector } = inspectorModule.default;
                Inspector.Show(scene, {});
                resolve(Inspector);
            }).catch((e) => {
                reject(e);
            });
        } catch (e) {
            reject(e);
        }
    })
}

Thanks :hugs:

2 Likes