Leveraging Twinfinity, BabylonJS and WebXR

VR for your digital twin? – Sure! No problem!

Did you know that experiencing your digital twin in virtual reality is easily achievable through the combined powers of Twinfinity and BabylonJS? By leveraging the excellent WebXR implementation of BabylonJS alongside your digital twin served by Twinfinity through our API, you can be walking around your model in 50 lines of code or less.

Though this pushes into the experimental parts what can be done with Twinfinity and BabylonJS, it is simply to cool not to share.

Published:
17 June 2024

Author:
Tobias Svenberg

We hold nothing back

At Twinfinity, we take pride in our approach: "anything that we can do, you can do too." There is no secret sauce reserved exclusively for us. All Twinfinity apps are built entirely on top of the Twinfinity API. To emphasize this further; we expose the underlying 3D engine to developers, vastly extending the possibilities available to you.

When working with BabylonJS features, please make sure you understand that there are limitations. You can read about those here.

Leveraging technologies

About WebXR

WebXR is a unifying API standard designed to bring immersive Virtual Reality (VR) and Augmented Reality (AR) experiences straight to web browsers, eliminating the need for additional software downloads. This simplifies the development of experiences across various devices such as different VR/AR headsets, mobile phones, or tablets, making it a very appealing option for developers.

WebXR's key benefit is its accessibility; it supports a multitude of platforms and devices as long as the device has a browser that supports the WebXR standard. For developers, this means utilizing well-known web technologies like HTML, CSS, and JavaScript. Ultimately, WebXR allows for scalable and captivating VR and AR experiences that can reach a vast audience directly through their web browsers, opening possibilities for interactive and immersive digital content and, most importantly, making it available on a larger scale.

BabylonJS

Twinfinity uses BabylonJS as its 3D engine and, when it comes to WebXR, the BabylonJS implementation is nothing short of excellent. This robust foundation allows us to build a VR starting point for you to use in your Twinfinity Digital Twin applications and projects.

When you look at the code you will notice that there is no specific code for setting up the safe zone boundaries, no code for setting up the teleportation or the control visualisations or walking around in the safe zone. This is all out of the box from BabylonJS!

50 lines of code, really?

Yes, really!

For this example, we'll make use of our playground and a Meta Quest 3 headset. Basically, all you need to do is:

Set up your basic scene.
Load what you want to see.
Set up meshes that are used as floors in the VR interaction.
Initiate the XR session.
Set a starting point.
Adjust the camera height.

Sounds easy, right? Well have a look yourself in this Playground. Just open the link in your VR headset browser. Please note that the browser needs to be WebXR compatible. Before using this for your project, please make sure you understand the technical caveats and limitations that apply. You can read more about them in our help centre

Find out more

For more information about the Twinfinity API check out help.twinfinity.com and docs.twinfinity.com. If you want to try it out for yourself the quickest way is to just visist our playground at playground.twinfinity.dev.

Lets talk!

If you are considering Twinfinity for your digital twin project, app or website you can reach us by booking a demo. Make sure to add a comment what it is you are interested in so that we can meet your needs as best we can.

All the best! Have fun out there : )

/Tobias