Vue + babylonjs experiment

Hi Brian, idk if you saw my post here The BabylonJS Scene Explorer and Inspector in realtime in 3D with two way event binding to @roland , but he’s probably interested in this too.

One very important thing though, check this out… Its the next version of trois, yours is based on the vue2 version before vue3’s createRenderer existed.
.trois-renderer/index.ts at main · troisjs/trois-renderer · GitHub

createRenderer works much like react reconciler. Using this strategy instead of the old vue 2 strategy has actual hot scene reloading like react three fiber. For ex. in the example above, the rotation state probably wouldn’t reset.

I REALLY want to get this working in babylon itsself though. It’s possible, and probably really easy, but webpack makes everything so fucking needlessly hard and complicated.

Interested in helping, especially on a babylon centric implementation.

So far, i’ve thought two approaches to implement it in babylon.

Approach 1) instead of doing HMR how webpack/everyone else does it ie: (user code → running app) , you invert it and do (change running app → post form data to user code). Or said another way, just save the changes you make on the client to the server. This would also be ideal for the babylon electron editor. Also required to send an editor to the client, but thats not a big deal for dev, and would work well with all the existing babylonjs tooling

Approach 2) I was watching the vids on the babylon youtube channel and i forgot which one it was in but @Deltakosh mentioned that a recent release (v4.2 maybe?) added scene deserialization. So what we could do would be to capture current state in a hot reload callback and re-instantiate the scene tree after reload. Something like module.hot.accept(() => {
var previous = babylon.saveScene();
somehowRestore(previous)
} . Also the module.hot.accept and import.meta.hot is so unnecessary. HMR is just a socket connection that recieves and applies json patches. Imo it’d be much better to just add a listener to either a websocket or SSE socket and do away with the absurd abstractions.