WebXR-Tests-3

WebXR tests using:

• Vite
• BabylonJS 5 (ES6)
• Vue 3
• TypeScript
• Bootstrap 5

Test site:

• http://webxr-tests-3.kaliatech.com/

One of the benefits of WebXR over Unity and Unreal, is the development workflow. This vite based setup is particularly fast to iterate with. Make a change in code, save, and within seconds the change becomes visible.

Purpose

Test and verify WebXR functionality using Babylon.js 5. Key features tested:

• High fidelity controller models
• Teleport functionality (use right joystick)
• Multiple scene transitioning
• Basic UI and input functionality
• 360° and 180° photos and videos
• PBR Materials
• Etc

While most of the functionality works across all browsers and devices, including Safari/iOS, these demos are primarily meant to be viewed within a VR headset. Testing was done with a Meta Quest 2.

Additional notes and thoughts here:

• https://kaliatech.com/blog/2022/webxr-tests

Screenhots

Browsers all the way down...

Not the most exiting demo, but it does work...

2D UI in VR...

Immersive photos and videos...

PBR and high fidelity models...

Project Setup Examples

A simpler repo showing the minimal setup for using Babylon.js and Vite for WebXR development is here:

• With Vue

  • https://github.com/kaliatech/webxr-vite-babylon-simple

• Without Vue

  • https://github.com/kaliatech/babylon-docs-vite-webxr

The Vue example does not use reactivity for Babylon.js. There are other projects showing how to do that if interested, with both Vue and React.