WebXR project setup with Babylon.js 5 and Vite

Demos and projects
1

Example setup and imports for WebXR development using:

  • Babylon.js 5.x (beta)
  • Vite
  • TypeScript
  • Vue 3

Source:

Intentionally made minimal changes from the default vite scaffolding.

Uses the ES6 packaging from Babylon.js and tree shaking. With this repo and babylon.js 5.0.0-beta.7, vite is reporting a vendor build size of 2.5MB (562k gzipped). If importing all of @babylonjs/core, the build size goes to ~4MB.

This repo includes enough setup to make sure controller models can be loaded for supported XR devices and that basic teleportation works.

6 Likes
2

cc @RaananW

3

This is so great!!!

Can I ask you to add that to the webxr documentation? The page that comes to mind is the demos and examples, but you might find a better place.

4

Sure. Here’s an attempt to add to the docs:

Comment there with any changes. While going through that, I created an even simpler repo example. This one doesn’t use Vue:

Please see comments on the PR (or in source) regarding one of the errors I was seeing. I am not sure if that error (and the corresponding import to resolve it) is expected. If it is not, might be confusing to see it in the docs.

3 Likes
5

That’s real-world experience entering our documentation. It’s exactly what we need! I merged this already. Thank you so much!

1 Like