Trying add debug layer - Not working

Icyrockton · February 5, 2021, 2:49pm

I am using ES6 import
below is package.json dependencies

when I using

I get this error

Deltakosh · February 5, 2021, 5:22pm

This is a good question for @sebavan

sebavan · February 5, 2021, 7:17pm

Here is how to use it in ES6 Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation

Icyrockton · February 6, 2021, 2:34am

Hi!,
after import

I get another error

mawa · February 6, 2021, 11:26am

I guess you will have to go through all of em if you want to load’em separately. Can’t have everything, can you?

Icyrockton · February 6, 2021, 2:17pm

finally Inspector is showing but not working properly
I get several error at the same time

the debug layer tab is not showing

it should be like this

sebavan · February 8, 2021, 3:42pm

This is weird, here is an example app where I use it like this:

I use code splitting here:

github.com

sebavan/BabylonjsInkSample/blob/d175045f374f24bc64de90ef3aa0f58494b6c82e/src/inkCanvas.ts#L227


/**
 * Get the current framerate
 */
public getFps(): number {
    return this._scene.getEngine().getFps();
}
/**
 * Toggle the Babylon almighty inspector
 */
public toggleDebugLayer(): Promise<void> {
    // Rely on code splitting to prevent all of babylon
    // + loaders, serializers... to be downloaded if not necessary
    return import(/* webpackChunkName: "debug" */ "./debug/appDebug").then((debugModule) => {
        debugModule.toggleDebugMode(this._scene);
    });
}
private _updateParticleSystem(): void {
    // Update the current particle emitter
    this._pointerNode.x = this._scene.pointerX;

To show it here: BabylonjsInkSample/appDebug.ts at master · sebavan/BabylonjsInkSample · GitHub

Icyrockton · February 9, 2021, 5:12am

I have created a repo
Icyrockton/inspector_test (github.com)

sebavan · February 9, 2021, 3:58pm

Unfortunately, it seems related to how VUE/Vite handles TS files but I know nothing about those Maybe @RaananW would have an idea ?

Pryme8 · February 9, 2021, 4:09pm

Did you try doing it from the console?

If you expose you scene on the globalThis and have the debug layer included you can afterwards do window.scene.debugLayer.show() from the console and if that works then at least you know you have included it correctly. Might not get you what you want though if you need it to be fired up by the script.

RaananW · February 9, 2021, 7:05pm

It seems like vue creates different packages for different dependencies based on the directory and not the package:

When importing the DebugLayer from @babylonjs/core (only worked after i cleared the .vite cached directory in node_modules for some reason) it works. Something like that:


import { ArcRotateCamera, Engine, HemisphericLight, MeshBuilder, Scene, Vector3, DebugLayer, DebugLayerTab } from "@babylonjs/core"
import "@babylonjs/inspector";

console.log(DebugLayer);

let canvas = <HTMLCanvasElement>document.getElementById("renderCanvas");

let engine = new Engine(canvas, true);

const createScene = () => {
  let scene = new Scene(engine);
  let light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
  let camera = new ArcRotateCamera("camera", 0, 0, 5, Vector3.Zero(), scene);
  camera.attachControl(true);

  scene.debugLayer.show(); //bug .... error .....

  MeshBuilder.CreateBox("box", { size: 1 });
  return scene;
};

let scene = createScene();

engine.runRenderLoop(() => {
  scene.render();
});

It then looks like this:

I have to say i can’t explain it without further debugging, but i hope you get it working with this info!

Icyrockton · February 10, 2021, 6:04am

thanks! it works now

magicfelix · June 28, 2021, 7:18pm

I am having problems including the inspector in build process dev is running fine. Is there anywhere a working boilerplate. Vite + TS + Vue + Babylon + Inspector. Thanks.

sebavan · June 28, 2021, 7:39pm

I hope @RaananW might know as I am currently way too n00b in Vue

RaananW · June 29, 2021, 9:17am

Would be great if you can create a new thread for that, and share the project (or a reproduction of the project).
What problem exactly are you experiencing?

magicfelix · June 29, 2021, 12:48pm

Sure. I will try to create a github repo next week. In the meantime here the error messages while running build:

node_modules/@types/react/index.d.ts:121:51 - error TS2344: Type 'C' does not satisfy the constraint 'ElementType<any>'.
  Type 'string | number | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any, context?: any) => ReactElement<any, string | JSXElementConstructor<...>> | null)' is not assignable to type 'ElementType<any>'.
    Type 'number' is not assignable to type 'ElementType<any>'.
      Type 'C' is not assignable to type 'FunctionComponent<any>'.
        Type 'string | number | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any, context?: any) => ReactElement<any, string | JSXElementConstructor<...>> | null)' is not assignable to type 'FunctionComponent<any>'.        
          Type 'string' is not assignable to type 'FunctionComponent<any>'.

121         "ref" extends keyof ComponentPropsWithRef<C>
                                                      ~

node_modules/@types/react/index.d.ts:122:49 - error TS2344: Type 'C' does not satisfy the constraint 'ElementType<any>'.
  Type 'C' is not assignable to type 'FunctionComponent<any>'.

122             ? NonNullable<ComponentPropsWithRef<C>["ref"]> extends Ref<
                                                    ~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1420:15 - error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'.
  Named property 'props' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not identical.

1420     interface Element extends VNode {}
                   ~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1420:15 - error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'.
  Named property 'type' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not 
identical.

1420     interface Element extends VNode {}
                   ~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1427:15 - error TS2430: Interface 'IntrinsicElements' incorrectly extends interface 'NativeElements'.
  Types of property 'symbol' are incompatible.
    Type 'SVGProps<SVGSymbolElement>' is not assignable to type 'ElementAttrs<SVGAttributes>'.
      Type 'SVGProps<SVGSymbolElement>' is not assignable to type 'SVGAttributes'.
        Types of property 'autoReverse' are incompatible.
          Type 'Booleanish | undefined' is not assignable to type 'Numberish | undefined'.
            Type 'false' is not assignable to type 'Numberish | undefined'.

1427     interface IntrinsicElements extends NativeElements {
                   ~~~~~~~~~~~~~~~~~

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:1432:15 - error TS2320: Interface 'IntrinsicAttributes' cannot simultaneously extend types 'ReservedProps' and 'Attributes'.
  Named property 'key' of types 'ReservedProps' and 'Attributes' are not identical.

1432     interface IntrinsicAttributes extends ReservedProps {}

RaananW · June 29, 2021, 1:03pm

oh, that’s because the inspector is using react, and internally requires the react typing, but it seems like the version you have is incompatible with the one we are using for some reason.

That’s an interesting issue. if you can repro this on github i’ll be able to see how we can make sure the inspector is 100% independent of the host

magicfelix · June 29, 2021, 4:34pm

Oh that sounds promising! I already tried including react and react-dom typings without luck.
Here is the repro for testing.

magicfelix · July 13, 2021, 11:28am

Hi @RaananW, did you find some time looking into the repo and find a possible fix? Thanks
PS: adding “skipLibCheck”: true to tsconfig.json is fixing the problem, but i guess thats only a temp. fix

Topic		Replies	Views
DebugLayer on Babylon 3.3 Questions	4	597	March 7, 2019
Debug poject and step into BabylonJS code Questions	4	652	February 11, 2019
Failing to import the Inspector Questions inspector	2	45	September 11, 2024
Error importing BABYLON in multiple modules Questions import	7	530	May 8, 2023
How to use Babylon.js Particle Editor with ES6 Questions	3	571	June 1, 2020

Trying add debug layer - Not working

Related topics