disappear scene method , shadow generator component at v3.0.30

[slash9494]

at 3.0.30

1

disappear scene methods (createDefaultXRExperienceAsync, create...) from types and throw console error

2

shadow generator error issue: Uncaught ShadowGeneratorSceneComponent needs to be imported before as it contains a side-effect required by your code.

public static _SceneComponentInitialization: (scene: Scene) => void = (_) => { throw _DevTools.WarnImport("ShadowGeneratorSceneComponent"); }

please check above issues on 3.0.30

[brianzinn]

1. Can you share the code that is throwing exceptions? For example, the XR stuff doesn't have any declarative counterpart yet. Have a look here for an XR demo: https://github.com/brianzinn/xr-dom-overlay-react
2. There is no "ShadowGeneratorSceneComponent" in this library - there is a <shadowGenerator ../> host element.

[slash9494]

1. you can check this sandbox url - https://codesandbox.io/s/quirky-fog-p7icv?file=/src/App.tsx at 3.0.30 , you can see type error but at 3.0.29, there is no error

2. i thought it should be related with compiling process on my project

on my nextJs project, it run well through transpiling module, but on the other my react project , it throw error only at version 3.0.30 so i will take over the reason what happen it

[brianzinn]

I was quite puzzled as well - looks like createDefaultXRExperienceAsync function is not available until you have a camera. That may be an issue in this library

import { Scene as BabylonScene, Vector3 } from "@babylonjs/core";
import { useState } from "react";
import { Engine, Scene, useScene } from "react-babylonjs";
import "./styles.css";

const XrExperience = () => {
  const scene: BabylonScene | null = useScene();
  const [created, setCreated] = useState(false);
  if (scene && !created) {
    console.log("creating default XR experience (async)", scene);
    scene.createDefaultXRExperienceAsync({});
    setCreated(true);
  }

  return null;
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div style={{ flex: 1, display: "flex" }}>
        <Engine antialias adaptToDeviceRatio>
          <Scene>
            <arcRotateCamera
              name="camera1"
              target={Vector3.Zero()}
              alpha={Math.PI / 2}
              beta={Math.PI / 4}
              radius={8}
            />
            <box name="box1" />
            <hemisphericLight
              name="light1"
              intensity={0.7}
              direction={Vector3.Up()}
            />
            <XrExperience />
          </Scene>
        </Engine>
      </div>
    </div>
  );
}

I can confirm it works without Camera and Lights on 3.0.29. Thank-you for reporting @slash9494 . I will look for what changed 🤯

[brianzinn]

This does work with the side-effect import:

import { Scene as BabylonScene } from "@babylonjs/core";
import "@babylonjs/core/Helpers/sceneHelpers";
import { useState } from "react";
import { Engine, Scene, useScene } from "react-babylonjs";
import "./styles.css";

const XrExperience = () => {
  const scene: BabylonScene | null = useScene();
  const [created, setCreated] = useState(false);
  if (scene && !created) {
    scene.createDefaultXRExperienceAsync({});
    setCreated(true);
  }

  return null;
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div style={{ flex: 1, display: "flex" }}>
        <Engine antialias adaptToDeviceRatio>
          <Scene>
            <XrExperience />
          </Scene>
        </Engine>
      </div>
    </div>
  );
}

Seems like the side-effects need to be imported now, which is probably a good thing for tree-shaking, but definitely less intuitive.

[brianzinn]

I found the root cause. I changed an import from:

import { Scene, Nullable } from '@babylonjs/core'

to

import { Scene } from '@babylonjs/core/scene.js';
import { Nullable } from '@babylonjs/core/types.js';

That was the last place in the code where I had missed the direct file import and that caused all of those side-effect imports to be lost. One the one hand it is a breaking change, so I can re-add the default Scene import. Here is the FAQ on what needs to be imported: http://www.babylonjs.com.cn/features/es6_support.html#faq

I'm not sure what the right solution is here - it will be a breaking change in 4.0 when I fully support tree shaking and only registering what is needed.

What do you think?

[slash9494]

Great i absolutely agree with breaking change with tree shaking by importing absolute path

i didn't know method 'createDefaultXRExperienceAsync' is related with camera

I thought issue#2(shadow component error) could be involved with this es6 support

So i hope issue#2 is resolved on 4.0

[brianzinn]

Did you add import "@babylonjs/core/Helpers/sceneHelpers"; and that fixed your first issue? That should augment the scene object with that method.

For the issue#2 can you share any details on that one, because I am not able to see what is causing that?

[slash9494]

yeah, i tried to add import @babylonjs/core/Helpers/sceneHelpers and it's great well

and issue#2, it is obvious to be caused on <shadowGenerator/>

when i import light and shadow generator like below picture, it throw error that i mentioned before

and when i remove shadow generator, it work well

one more thing is i has imported my custom renderer module (private package) build with react-babylonjs

so this issue(#2) could be caused by importing custom module package

[brianzinn]

sorry @slash9494 I completely lost track on this issue as I thought it had been resolved with the side effect import. Is it still not working or is there an import missing still? If not resolved, is ShadowGeneratorSceneComponent something on your side?

[brianzinn]

closing from inactivity - if you have more questions or were unable to resolve as per above please re-open. thanks for finding that issue related to tree-shaking!