This is the last full week of the A Month of Babylon JS project. Most of the projects I want to build with Babylon JS are related to VR, so this week I’m going to learn everything I can about the WebXR features that Babylon JS has to offer.
I started today with the Diving Deeper documentation on WebXR. This page has some information about setting up a scene with WebXR, as well as some comparisons of WebVR vs WebXR.
The most basic setup involves adding this line to a scene
const xr = scene.createDefaultXRExperienceAsync();
As I mentioned last week, this helper is asynchronous, so the default template is not suitable. Here is a basic template that I use to make a new XR scenes.
The template above uses the default experience helper, which includes several built-in features such as pointers to interact with UI, teleportation, and the basic process of entering and exiting XR modes. There is also a basic experience helper available, which has fewer features by default but may be useful when more control is needed. For now, I’m going to use the default version.
Last week I was focused on interacting with the 3D cards. I was using the pointer event system that was added when I setup the default experience helper. Those features allowed me to interact with GUI controls that were rendered using the
AdvancedDymaincTexture. Toward the end of the day on Friday I added some code that allowed me to grab and move the cards around in 3D space. This was also using the pointer system. While moving objects with the pointers is an interesting (and powerful) feature, I also want to be able to use the controllers/hands to interact with objects. Throughout the week I’ll work on this and some other ideas.