Embedd your BabylonJS app in any webapp and establish two-way communication host<->client even from different domains

Hello everyone!

I created a simple demo app which consists of two web apps. What’s the practical use for this? You can have for example a BabylonJS viewer app and embedd it to multiple host apps with their own UI which can control the viewer.

Things can be done more professionally (type safety in messages, message names as enums instead of strings, …) and in many ways, the repo just demonstrates the idea and the possibilities.

The HOST app is a Vue3 app and it embedds a CLIENT BabylonJS app using an IFRAME. Two way binding is established and you can call function from the HOST app on the CLIENT app and get values from it as well. The CLIENT can emit any data JSON compatible data to the HOST app.

It works even when the two apps are located at different domains. Even when you open the CLIENT app in a different browser tab the communication works. Imagine to have a GUI with many UI elements in one tab on one monitor and the second tab on the second monitor with a fullscreen controllable BabylonJS scene. (the version of Postmate used here supports only IFRAME embedding).

Read the README.MD for instructions.

The demo app uses GitHub - dollarshaveclub/postmate: 📭 A powerful, simple, promise-based postMessage library.. Check it out!