Gentle Introduction to WebXR in BabylonJS
Before we see any code I want to share something about OpenXR.
For a long time, the XR community was desperately waiting for the public release of OpenXR by Khronos Group (an open consortium of leading hardware and software companies creating advanced acceleration standards). And finally, they released OpenXR 1.0 at SIGGRAPH 2019(must check that out if you haven't)
OpenXR meant to solve the XR fragmentation in the market i.e. each HMD/Device comes with their own SDK which we as a developer have to leverage to create the applications.
“OpenXR seeks to simplify AR/VR software development, enabling applications to reach a wider array of hardware platforms without having to port or re-write their code and subsequently allowing platform vendors supporting OpenXR access to more applications. With the release of the OpenXR 1.0 specification, AR/VR developers can now create true cross-platform XR experiences.”
— Brent E. Insko the Lead XR Architect at Intel and OpenXR Working Group
And it is worth highlighting it that OpenXR has capabilities like WebXR.They are different APIs being developed by different standards bodies.
- WebXR — https://www.w3.org/TR/webxr/
- OpenXR — https://www.khronos.org/openxr/
Many concepts are represented by both APIs in different ways so OpenXR is capable to implement WebXR features (I have not tried it but that’s what I presume on the basis of what I have read so far)
I do not have HoloLens 2, but if you have access to it then you can create a prototype using OpenXR — Follow Here
Sooner or later we all are going to move towards open standards :)
But why BabylonJS —
So the reason I chose BabylonJS and not ThreeJS for WebXR is because of the following reasons —
- Inbuilt debug layer
- Node-based Editor for creating materials
- Great tools like SandBox and Playground
- Turn around time on the forum on any issue is less than 12 hours (Wow!!)
- Backed by Microsoft
If you have done any kind of 3D development for the web then you must have stumbled upon GLTF file format for 3D models. It is the only 3D file-format supported by the web (gave me nightmares when I first saw it)
To read more about GLTF/GLB please follow here. Will write another post on GLTF/GLB for curious minds but for now please think it of as another 3D file-format which you need if you are planning anything 3D for the web.
Sample GLTF Files — Download
Crash Course of BabylonJS —
To test the waters yourself please see the code below or you can clone it on your desktop from my GitHub account. And if you just want to see what the codes look like in action the visit this URL — BabylonJS Setup In Action
Most of the code is self-explanatory, but I will try to cover the important keywords which we will encounter in our application
- Engine — The engine is responsible for interfacing with all lower-level APIs such as WebGL and Audio, you can also define your own engine if you need physics in your app like either CannonJS or OimoJS. It is responsible for creating the scene. In short, it is the starting point of your 3D Xperience
engine = createDefaultEngine();2. Scene — Everything you see on your screen is part of the scene which means it takes care of the rendering. here you load 3D models, define the lights, camera, and everything which you want your application to spit out.
scene = createScene();
sceneToRender = scene;
engine.runRenderLoop(function () {
if (sceneToRender) {
sceneToRender.render();
}
});3. Camera — Camera is our window in the 3D world and whatever lies in the camera frustum it is rendered on the screen. All 3D-rendering lib/engines/frameworks come with a bunch of camera types. Here I have used the arc camera and its constructor takes certain values like rotation on longitude and latitude axis, the position, camera name etc.
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene); // Positions the camera overwriting alpha, beta, radius camera.setPosition(new BABYLON.Vector3(0, 0, 20)); // Set the mouse wheel delta percentage or how fast is the camera zooming camera.wheelDeltaPercentage = 0.01 // This attaches the camera to the canvas camera.attachControl(canvas, true); // sets target on the center camera.setTarget(BABYLON.Vector3.Zero());
More on Camera — Read Here
4. Lights — Of-course we need lights to see, and in this case I have made it very simple by creating a hemispherical light but BabylonJS has few different types of light
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light",new BABYLON.Vector3(0, 1, 0),scene); // Default intensity is 1. Let's dim the light a small amount light.intensity = 0.7;
More on Lights— Read Here
Setting up Testing Environment —
Alright, so what we need now is a VR device to try the application which we are going to build, unfortunately, I don’t have any VR device and will not get access to it in the future anytime soon given the COVID-19 situation.
Fortunately, Firefox has rolled out a WebXR API Emulator on which we can test our app 😃
Add it in our Mozilla browser from here — WebXR Emulator
Adding WebXR API —
Heavy lifting is already done in the above steps and now we need to add the WebXR API in the Babylon setup we saw above.
We need to add a few lines of code to convert the starter project into a full-fledged WebXR project.
Step 1: We have to make creatScene() to async so change the function call to
var createScene = async function () {Step 2: Add the below line of codes in main.js just before where we are returning scene in our createScene()
const xr = await scene.createDefaultXRExperienceAsync({
floorMeshes: [ground]
})
return scene;Step 3: Since the createScene() is now an async so we have to change its invoking statement as well from
sceneToRender = scene;to
scene.then(returnedScene => {
sceneToRender = returnedScene;
});Step 4: Cheers! You are done to open your browser and test it. If you want to see it in action live— Click here
To see the complete code you can clone this release from my GitHub Account
Disclaimer — Somehow I was not able to execue this on Google Chrome so please kindly try the sample code and the playground examples in Mozilla Firefox brower only
