Babylon.js and Frame: Pushing Remote Work Forward

Babylon.js
4 min readApr 21, 2021

When most people think of Babylon.js, they think of it as a powerful, beautiful, simple and open game engine. It’s true, there are a ton of amazing games created with Babylon and it comes with many features you’d find in other popular game engines as well. However you might find it surprising to know that Babylon.js powers countless other types of online experiences as well.

A recent blog post of ours talks about Babylon.js being used in e-commerce experiences, and an exciting update to a remote collaboration tool called Frame shows how Babylon can be used to power rich, immersive experiences that are used for remote work, education, and sales.

We partnered with the Frame team as they migrated their tool to Babylon.js, and we think the outcome is a great example of how Babylon can be leveraged to push remote work and collaboration forward. There’s no better time for tools like Frame, and we’re really proud that Frame now uses Babylon.js to power their solution used by virtual teams and classes all over the world. Let’s dive in to learn about this use case and see how Babylon is being used to shape the future of immersive collaboration.

In a nutshell, Frame let’s people come together in a 3D space to communicate, collaborate, and create. It’s RAD! You interact with others as avatars using spatialized voice chat and text chat, but you can also bring in your webcam or share your screen — staple requirements of online collaboration tools. That’s not all you can bring in, though. You can also import documents, 360 photos or videos, audio, videos, images, 3D models, and whiteboards.

Frames are persistent, immersive spaces. Content that you and your teammates import and arrange in your Frames will be there until you remove them. In other words, it’s not just a space you can use for in-and-out meetings, a Frame can serve as a virtual office where you bump into your colleagues, display content in a 3D space for each other and your guests, hold meetings, or host immersive online events. The fact that you can create your own digital immersive space with others, make it your own, and it’s always there waiting for you…this truly creates a more intimate feeling of connection with those that you collaborate with.

The Frame team reached out to us with the idea of rebuilding Frame from the ground up using Babylon.js. One interactive meeting later and we were hooked and super excited to partner together to help connect the world. We worked with the Frame team during the development process to help them squeeze better performance out of the product and engine. We are really pumped about the end result!

Why the switch to Babylon.js? Gabe Baker, the Frame product manager, says “I’ve been closely following the Babylon updates over the past few years, and after talking with the Babylon team about their plans for the future, I became convinced that building Frame with Babylon would give my team a strong foundation right now and in the years ahead. I’m thrilled with the outcome of this rebuild and what my team has been able to achieve with this incredible framework.”

Because Babylon.js is a web development framework, Babylon projects like Frame can target mobile, Windows, Mac, chromebooks, and immersive VR headsets with one codebase. From the lowest-end device, to the massive gaming rig and everything in between, this is why Frame works on all of them through the browser. Because Frame has so many education users that use Chromebook or tablets, as well as enterprise users interested in VR, this kind of cross-platform deployment through the web is critical.

Creating the user interface for cross-platform experiences can also pose a significant challenge, but the Frame team was able to put Babylon’s GUI tools to good use. The buttons you see to pause/play media, change pdf pages, pick colors for the whiteboard, or share your screen are all built with Babylon GUI elements, and the VR UI is a simple but effective example of what Babylon GUI can achieve. The Frame desktop user interface also uses elements created with Vue.js, and this combination works because Babylon can be used seamlessly alongside other web development frameworks and tools.

To sum it up, Frame is a powerful Babylon.js project being used for remote work, education, and events, and it’s just one exciting example of how Babylon can be used outside of the game development world. We’ve heard some of the plans from the Frame team about what’s coming next, and we could not be more excited to see how they will leverage Babylon in the months and years ahead.

Frame is still in beta, and you can try it out at framevr.io.

You can get started with Babylon.js right at https://www.babylonjs.com/

https://twitter.com/pirate_jc

--

--

Babylon.js

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/