Professor, Designer, Husband, Father, Gamer, Bagpiper

I'm having my students use ES6 modules with Babylonjs this semester (see here for a quick overview of how I had them configure their development environments).

A couple of students asked why their code might suddenly start showing a white screen in the browser, and how they might fix it.  Their first assignment was meant to be a simple "add some Babylon content to this working sample" as a way of making sure they had a working environment, and at least walked through the Babylon 101 tutorial.

I posted a detailed reply to one of these questions on Teams, and thought I'd repeat it here (since this is a pretty common issue).

The Question

Any ideas on why I would get a blank white screen when trying to use Animation.CreateAndStartAnimation()?

My Answer (copied more or less directly from Teams)

If there is a white screen, look in the console to see if there is an error. Here I see this:

Console error in Edge

Clicking on animation.ts:164shows me:

Location in the debugger where the error occurred. As it says, node.getScene().beginDirectAnimation isn't defined.

Indeed, beginDirectAnimation is undefined on scene.  Using the debugger, I confirm this by inspecting the scene object.  Why?

Next, I search in VS code (clicking the gear at the end of the "files to exclude" line to have it search everything) and get this:

All the places in Babylon that beginDirectAnimation is mentioned.

Notice that the first hit in animatable.js is assigning a function to Scene.prototype.beginDirectAnimation ... this is a common way of adding NEW METHODS to JS objects.   Looking at this file, I see that it defines the Animatable class, and then below it, adds a bunch of methods to Scene.  Oh, wait ...

(the solution begins to dawn on me...)

I remember, oh ya (I even mentioned this when we were looking at the Babylon docs): go to https://doc.babylonjs.com/features/es6_support and look down in the "Side Effects" and FAQ sections.  If you are importing individual modules (as I asked you too), instead of the top level @babylonjs/core (which will include all of core), you need to remember to look at the list of modules with side effects in "The intellisense does not propose the method I normally use in the bundled version and an undefined error is raised at runtime?"

And there, the very first line is:

  • scene."animationRelatedMethods like beginAnimation and so on... " are available in the Animations/animatable module

So, after all this, I realize, we need to add import
@babylonjs/core/Animations/animatable
to the import statements to pull in the module that adds those commands to the Scene object.

Also, please note:  I gave this long explanation to show you how I figured this out ... since initially I wasn't sure.  I do not expect javascript novices would have known everything here, especially the step where I looked at animatable and knew (just from the bit in the search results, showing assigning a function to Scene.prototype.beginDirectAnimation) that animatable had side effects.  But the earlier bits about debugging, stepping through the code, etc., are things you should start practicing.

For debugging, I simply put a break point on that line that crashed so the debugger stopped there, refreshed the tab to reload and restart, and then when it stopped I started poking around at the objects.

You’ve successfully subscribed to Blair MacIntyre's Blog
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.