Series of issues after upgrading to 4.1.0-alpha

Bugs
1

Hi folks,

To be precise, I’m upgrading from 4.0.3 to 4.1.0-alpha.17.

1. beginAnimation missing on scene object

This is the error I get when i call scene.beginAnimation(...):

scene.beginAnimation is not a function
    at updateObjects (Viewer.js:450)
    at commitHookEffectList (react-dom.development.js:18053)
    at commitPassiveHookEffects (react-dom.development.js:18080)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitPassiveEffects (react-dom.development.js:19706)
    at wrapped (scheduler-tracing.development.js:177)
    at flushPassiveEffects (react-dom.development.js:19759)
    at Object.enqueueSetState (react-dom.development.js:11593)

It works fine in the PG at https://www.babylonjs-playground.com/#DMLMIP#1.

2. SkyMaterial shaders can’t be computed

In this context

const skyMaterial = new SkyMaterial('sky-material', scene)
skyMaterial.backFaceCulling = false
const skybox = BoxBuilder.CreateBox('skybox', { size: 1000 }, scene)
skybox.material = skyMaterial

This is the error I get when I call skybox.material = skyMaterial:

(warn) engine.js:3095 WebGL: INVALID_VALUE: shaderSource: string not ASCII
(warn) engine.js:3095 WebGL: INVALID_VALUE: shaderSource: string not ASCII
(error) index.js:1375 BJS - [13:14:14]: Unable to compile effect:
(error) index.js:1375 BJS - [13:14:14]: Uniforms:  world, viewProjection, view, vFogInfos, vFogColor, pointSize, vClipPlane, vClipPlane2, vClipPlane3, vClipPlane4, luminance, turbidity, rayleigh, mieCoefficient, mieDirectionalG, sunPosition, cameraPosition, cameraOffset
(error) index.js:1375 BJS - [13:14:14]: Attributes:  position
(error) index.js:1375 BJS - [13:14:14]: Defines:
(error) index.js:1375 BJS - [13:14:14]: Error: VERTEX SHADER ERROR: 1:1: '' : syntax error

I can provide the full stack trace for these if that’s useful to anyone.

The closest PG I could find and adapt (to use BoxBuilder) is https://www.babylonjs-playground.com/#E6OZX#270 and it works fine.

3. Failure to create Gizmos

This is the error I get when I call new BoundingBoxGizmo(Color3.FromHexString('#0984e3')).

utilityLayerRenderer.js:58 Uncaught TypeError: Cannot read property 'getEngine' of null
    at new UtilityLayerRenderer (utilityLayerRenderer.js:58)
    at Function.get [as DefaultKeepDepthUtilityLayer] (utilityLayerRenderer.js:226)
    at new BoundingBoxGizmo (boundingBoxGizmo.js:37)
    at onSceneReady (ObjectsEditor.js:70)
    at doneWithScene (Viewer.js:452)
    at updateObjects (Viewer.js:615)
    at commitHookEffectList (react-dom.development.js:18053)
    at commitPassiveHookEffects (react-dom.development.js:18080)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitPassiveEffects (react-dom.development.js:19706)
    at wrapped (scheduler-tracing.development.js:177)
    at flushPassiveEffects (react-dom.development.js:19759)
    at renderRoot (react-dom.development.js:20332)
    at performWorkOnRoot (react-dom.development.js:21357)
    at performWork (react-dom.development.js:21267)
    at performSyncWork (react-dom.development.js:21241)
    at interactiveUpdates$1 (react-dom.development.js:21526)
    at interactiveUpdates (react-dom.development.js:2268)
    at dispatchInteractiveEvent (react-dom.development.js:5085)

The closest PG I could find and adapt (add the color in the constructor) is https://www.babylonjs-playground.com/#SG9ZZB#1 and it works fine.

Questions

I realize this is hard for you to help since each of them works in the PG and I cannot provide a repro case. I’m just hoping someone will identify something, knowing the changes existing in the preview release.

To get these errors, I only need to upgrade @babylonjs/core. Downgrading fixes everything. No other changes to the code.

This is in an ES6 codebase (I’m using React with create-react-app handling webpack for me). I’m making maximum use of tree shacking. I believe this setup cannot be reproduced in the PG, is that right? Would their be any other way to debug this? To share my setup in any other way? How are releases tested for ES6 at the moment?

I’ve been at a loss at this, so any pointer will be useful.

Thanks.

Note: First time I tried the preview was at 4.1.0-alpha.14 and as far as I remember some of these already existed.

2

I will have a look tonight but I am pretty sure that the 2 first issues are missing side effects imports like the one from animation and sky material looks like it is missing some shaders.

The last one is more likely a bug.

I ll provide more info tonight when I ll be back.

3

About 1. you need to import animatable for side effects:
import “@babylonjs/core/Animations/animatable”;

About 2. It looks like an encoding issue would be amazing if you could share a github link to your project or a zip ???

About 3. It looks like LastCreatedScene is not accessible on engine, same as 2. I would need a repro to debug further as it comes from EngineStore which should be shared.

4

Hi @sebavan, thanks a lot for taking the time to look into this.

  1. Importing the side effect fixed it, yay! I didn’t have that issue previously, is that sign of some more decoupling (i.e. smaller bundles =]) you guys have done? And is there any way we could add a warning for missing side effect like I’ve experienced for others previously? I don’t mind trying to open a PR on this if you nudge me in the right direction.

  2. This is a large private repo so a bit hard to share (and for you to debug) as-is. I’ll try to create a minimal repro case on a public repo. Give me some time.

  3. Same story. Additionally, I was going through the what’s new notes to find some ideas on what might be going differently and found this blog post from @Deltakosh stating

    we are now working on decoupling the the engine itself from the scene graph

    Well, far shot as it’s all very opaque to me but thought it might be worth sharing.

Thanks again for the help.

1 Like
5

So creating that repro case, or rather failing to, was useful. The 2 other issues came from @babylonjs/materials and @babylonjs/loaders being at the wrong version. Feeling dumb right now :sweat:. I had just forgotten to upgrade those as well and I didn’t realize until I had to install them again for the new repo. Case closed, and thanks for your help again. Much appreciated. :slight_smile:

In case that’s useful to anyone (and for future me as well), the minimal repo I created to get a Babylon.js scene using ES6 imports only, and inside a React app, is at GitHub - tibotiber/react-babylon-playground: Playground for Babylon.js in React using ES6 modules, or play straight with it in CodeSandbox at react-babylon-playground - CodeSandbox.

2 Likes
6

We all do mistakes all the time so no worries :slight_smile:

1 Like