Recommended learning path to build WebXR application using Babylon.js?

Questions
, ,
1

Hello,

I am a software dev whose keen on producing VR content for the web, and I want to use BabylonJS as my primary framework for doing so, however, I did get a bit confused by the documentation on WebXR in that I couldn’t figure out how the framework and WebXR are distinct and the linkage between building with Babylon.js for pure animation and building with Babylon.js for an immersive VR experience, basically I am asking how should I go about learning this framework with the goal of creating WebXR applications in mind? Do I go through the 101 docs and create some scenes without even thinking of webXR yet until I get the hang of Babylon.js development process, or should I jump straight into building webXR content using Babylon because the two are different, I am very new to animations and graphics and what not but I am super interested in this area of software development, I am currently a full-stack webdev at a small company but I think VR is the future and I want to get in on it now. Thanks for taking the time to read this and have a good day!

2

Hi @mynameismyname and welcome to the forum. As far as I understand it you develop your app with Babylon.js and use the webxr camera to display it for VR use.

Of course the main difference is the player interaction and app UI. You can get ideas about webxr use by searching for webxr in the Babylon.js docs.

I would start with learning about how to create apps with Babylon.js which can then be displayed on a variety of devices including 3D headsets.

1 Like
3

I’m in a similar position, although I started with WebVR a while ago and now… well, I’ve given up trying to port from WebVR to WebXR and I’m re-starting from scratch with WebXR.

I’d recommend using WebXR from the start as you can switch between VR and normal view. It’ll give you exposure to the await/async pattern that WebXR uses early on. And get the WebXR device emulator browser extension - WebXR emulator extension.

For reference the main (only?) XR doco is below:
https://doc.babylonjs.com/how_to/introduction_to_webxr
https://doc.babylonjs.com/how_to/webxr_experience_helpers
https://doc.babylonjs.com/how_to/webxr_selected_features
https://doc.babylonjs.com/how_to/webxr_camera
https://doc.babylonjs.com/how_to/webxr_demos_and_examples

4

Hi @mynameismyname (mine too, BTW!), welcome to the forum!!

Here is my take on getting started with WebXR -

Get started with Babylon and understand its features. understand the toolkit you have, what’s possible, what’s not. Understand what the render loop is, how meshes are imported, how the GUI works and how to use ES6 modules to keep your package size as small as possible. Understand PBR, sprites, particles systems. And then add a call to the WebXR experience helper.

WebXR is another way to interact with your user. it has its own view/camera(s), different user input, some interesting terminology, but all in all - when referring to VR in the browser, it is just a screen and a gamepad (generally speaking :slight_smile: ) and not more. Under the hood, Babylon’s WebXR implementation is using Babylon to display the scene. This is why understand the framework is much more important (IMO) than understanding XR.
It might take some time to get it to work. Using the WebXR emulator is a nice way to start. An Oculus quest is a wonderful device to test your scenes on. So is a windows MR device. Other devices can still be a bit unstable.

This is the technical side of things. Just as you don’t learn WebGL to use babylon.js (you can! of course, but WebGL calls are all abstracted for you, so you don’t HAVE to), you don’t need to “learn” WebXR. It is recommended, of course, to know the difference between local-floor, unbounded and viewer mode, to know what immersive-vr mode means, to know what an input source does. But you wouldn’t need it to get started. It is all abstracted for you. This is the difference between learning WebXR and using WebXR with Babylon.js

On the UX side of things - this is where it gets interesting. As VR/XR/MR/Whatever is a different way of interacting with the user, you will need to find new ways for the user to interact with the scene. Many different ways can already be found in the wild. Some like the users to move freely, some use teleport. Some add HUD elements, some have the information floating in the background, and some put it as a wristwatch on your “faked” hand. The possibilities are endless, and babylon is here to help on the technical side of things :slight_smile:

Carl has already provided with some of the docs pages, and they are a good starting point. If you have any questions, directly about webxr or about babylon, the community and the team do their best to answer them as quick as possible.