# Blender to Playground - Realtime Link

**URL:** <https://forum.babylonjs.com/t/blender-to-playground-realtime-link/54070>\
**Category:** Demos and projects\
**Tags:** blender, playground, gltf\
**Created:** [October 11, 2024, 11:17am UTC](https://forum.babylonjs.com/t/blender-to-playground-realtime-link/54070 "2024-10-11T11:17:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [October 11, 2024, 11:17am UTC](https://forum.babylonjs.com/t/blender-to-playground-realtime-link/54070/1 "2024-10-11T11:17:12Z")

</div>

Hello 🙂

For a personal project, I was working on shading on Blender, for BabylonJS. In order to reduce time spent on exporting from Blender, and reloading on BabylonJS side, I ended up writing a script to do so :

On Blender side ( **LEFT** )

- Python script hosts a threaded HTTP server
- Export (or delete) the updated meshes in `.GLB` files, in a folder along side the `.blend` file
- Updated a `status.json` file for current state (modif timestamps)
- I serve the HDRI texture as well

On BJS Playground side ( **RIGHT** )

- Env HDRI loaded directly from Blender
- I fetch the `status.json` to retreive for update (new timestamps, addition, deletion)
- I dispose or import the new updated meshes based on the content of this update

* * *

The nice point is that blender is hosting the HTTP server locally, but the Playground can still access to the files via `127.0.0.1` because I’ve set the header right on Blender side (`Access-Control-Allow-Origin`) in order not to trigger a CORS policy error on the Playground trying to load external source 🙂

So there is no specific BabylonJS server or implementation or whatever, just a regular “online” Playground, and a “Run” button to hit on Blender.

* * *

`NB` : For now an update is triggered only going from EDIT to OBJECT mode… Which means after only a shader edit, just a double tap on TAB key will update…

* * *

Whatever, for me it’s very handy !  
If many people are interested, I can share the source code, eventually 🙂

++  
Tricotou

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 11, 2024, 4:41pm UTC](https://forum.babylonjs.com/t/blender-to-playground-realtime-link/54070/2 "2024-10-11T16:41:58Z")

</div>

Amazing!! 😻 Gimme the source 😉

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [October 11, 2024, 5:07pm UTC](https://forum.babylonjs.com/t/blender-to-playground-realtime-link/54070/3 "2024-10-11T17:07:47Z")

</div>

> [@roland](#):
>
> Gimme the source 😉

Straight forward, as usual 😂

* * *

Here it is, budy 😛  
[Blender\_to\_Playground.zip](https://forum.babylonjs.com/uploads/short-url/avXYagZAmLJ5qGXvJdeet8KZ9tJ.zip) (314.2 KB)

Steps to test :

- Open `main.blend` and launch the script
- Run the `main.js` in a playground but it’s already saved in this [PLAYGROUND](https://playground.babylonjs.com/#4U4QH9#111)
- Add / Remove / Edit meshes (and their materials) in Blender

* * *

`NB` : It’s a quick & dirty solution to be used by me… Not initially meant to share this so don’t panic when everything will mess up or whatever 😁

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 11, 2024, 8:46pm UTC](https://forum.babylonjs.com/t/blender-to-playground-realtime-link/54070/4 "2024-10-11T20:46:45Z")

</div>

I’m getting a lot of these after I moved a face in Edit mode and switched back to Object mode:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/1/9122afef8c476f6f5dc173bfdfb56795b9a31809.jpeg)

However updating the scene still works (I’ve removed the cube and added a sphere).

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/9/393e4450bf8531511a6cffb59bc5035fa90945ad.jpeg)

Meanwhile this is ducking marvelous!!

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [October 12, 2024, 8:31am UTC](https://forum.babylonjs.com/t/blender-to-playground-realtime-link/54070/5 "2024-10-12T08:31:13Z")

</div>

> [@Tricotou](#):
>
> the Playground can still access to the files via `127.0.0.1` because I’ve set the header right on Blender side (`Access-Control-Allow-Origin`) in order not to trigger a CORS policy error

Now, that’s smart and appreciated. I wonder if somehow we could include this ‘routine’ in the next PG version. Providing we would add user identification and trusted users servers?

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [October 12, 2024, 12:05pm UTC](https://forum.babylonjs.com/t/blender-to-playground-realtime-link/54070/6 "2024-10-12T12:05:21Z")

</div>

> [@roland](#):
>
> I’m getting a lot of these

Yeah it’s a known issue due to lack of code cleaning on my side 😝  
It happens only if you hit “Run” twice in the Playground, because I’m using `setTimeout` which is never reset. After Running the Playground again, there is still the routine (pure JS from the previous session) running, on a disposed Scene.

* * *

By the way, there are tons of such bugs you can trigger by using `setInterval` or `setTimeout` in the Playground. I had proposed an edit of these functions within the Playground in [this topic](https://forum.babylonjs.com/t/automatic-clearing-of-setinterval-and-settimeout-at-playground-relaunch/50261) but as @RaananW said, it’s better not to tweet native API. Best is to do clean code 😝 . I was missing a clean using `scene.onDisposeObservable`. Here is a fixed [Playground](https://playground.babylonjs.com/#4U4QH9#111)

* * *

> [@mawa](#):
>
> I wonder if somehow we could include this ‘routine’ in the next PG version. Providing we would add user identification and trusted users servers?

For sure there is something to be done here. I thought about it multiple times while helping people here on the forum, sometimes you just want to send them a Playground directly linked to one of their assets hosted on their server, and BOOM you hit CORS policy and cannot load… ^^
