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 
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.
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
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 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! 
thanks for sharing.
I noticed that loading the preview version of the Inspector does not work anymore in Observable:
There is now an error
“TypeError: Cannot read properties of undefined (reading ‘RegisteredTypes’)”
Something may have changed in a recent commit ? Is is possible to get a more specific version of the preview ?
A quick github search in the Babylon repo for “RegisteredTypes” was unsuccessful. I also could not find any recent changes on the Observable side.
Any hints or ideas very welcome.
I figured how to use raw.hithack from the repo/dist to load commit specific modules.
3caacd1ab174c82326f3138d489446f88f2e3bc3 still works
91d5694ac111f95c634ef0963a3c6659974b7f7a still works
ee7fb62f877de23caf225d4decf103d5c90b9467 still works ( Hello, BabylonJS Inspector / Andreas Plesch / Observable )
21011fc83099a0845a5e6d92fd54c4b43d1c68d4 (latest) does not
So perhaps something changed in the latest commit ? There was a change from Misc/decorators to Material/effects which may be related ?
i’m looking into this right now.