BJS on ObservableHQ

I am getting started with BJS, probably more for data vis. and sometimes like to use observablehq.com, an online js dev./app/notebook system focused on data vis. but general and powerful. BJS does not seem to be used there, so I thought I should try a simple example to see if BJS can be embedded.
It turns out to be quite straightforward:
Hello, BabylonJS / Andreas Plesch / Observable
There is no inspector (perhaps also possible to add). Advantages are uploading of asset files (or any files), better urls, easy forking, collab., easy module loading, and more. But no typescript support.
This feels somewhat exotic here but I thought I would share anyways. It feels more comfortable than the playground to me.

6 Likes

This rocks! thanks a lot!

Thanks ! I tried a few things to add the 5.0 inspector but get this error:

ā€œTypeError: Cannot read property ā€˜GpuFrameTimeStrategyā€™ of undefinedā€.

when I use https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js .

Using/requiring babylonjs-inspector@4.2.0/babylon.inspector.bundle.js does not give the error but will most likely not work 5.0, or should it ?

You should use the latest 5.0 beta version ?

Is that not the latest 5 beta version ? It does not load and generates this error:

ā€œTypeError: Cannot read property ā€˜GpuFrameTimeStrategyā€™ of undefinedā€.

Oh yes this is latest but this should have been fixed last week :frowning:

Can you try forcing a refresh with ctrl + F5 ?

or share a repro ?

You can just type to start to edit.

I am not sure to understand what you mean. I can type but I can not launch anything in the page you linked. What should I do to trigger the repro there ?

Sorry for the lack of explanation. The code is evaluated after the page loads (You can shift-return to immediately execute a line). No need to type anything. The error is in the third line where the inspector is required. Note that the next line requires the inspector 4.2 module which works just fine.

I am sorry, nothing happens for me just seeing this:

without anything in the console :frowning:

Hm, weird. I just tried opening the link in an incognito tab and it worked for me. Do other observable notebooks work ? Maybe some extension blocking things ? I also republished this.

With the debugger I could get more detail on the error:

TypeError: Cannot read properties of undefined (reading ā€˜GpuFrameTimeStrategyā€™)
at Object. (https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js:31:65865)
at n (https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js:1:862)
at Module. (https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js:31:641280)
at Module. (https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js:31:641453)
at n (https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js:1:862)
at https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js:1:1661
at https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js:1:1671
at https://static.observableusercontent.com/next/worker-2a1925c3.js:2:22358

The page should like this:

Ok I was able to repro and this is unfortunately linked to how ObservableHQ is loading amd depencies internally.

When the inspector loads, it will see a required babylonjs dep and instead of providing the already loaded one, it fetches it from npm on the latest version so in this case 4.2.0ā€¦ which does not contain the required objects.

There is not much we can do if we can not control how ObservableHQ is loading dependencies :frowning: meaning this can only work from babylon stable. If you figure ways to tell ObservableHQ where dependencies are we could check again.

1 Like

Thanks, this is very helpful. Perhaps there is a way.

1 Like

With your analysis in hand, a dive into the forum and documentation was successful:

edit: I added a small tweak to make sure the inspector shows on first load.

There is a way to tell require which version of a dependency to load. The inspector now works well on ObservableHQ.

1 Like

This is really cool! :rocket: thanks for sharing.