Unable to load meshes for VR

Questions
,
1

Hi, i am using babylonjs + webxr with Vite.

when i click on VrButton i get following errors:
chunk-H5J6BXIY.js?v=c1e0ab36:315 Uncaught (in promise) RuntimeError: Unable to load from https://assets.babylonjs.com/meshes/HandMeshes/r_hand_rhs.glb: Cannot read properties of undefined (reading ‘asset’)

Uncaught (in promise) Unable to load from https://immersive-web.github.io/webxr-input-profiles/packages/viewer/dist/profiles/oculus-touch/left.glb: Cannot read properties of undefined (reading ‘asset’)

2

Let s add @RaananW to the rescue :slight_smile:

1 Like
3

Here is my full code (vanilla javascript), im using Vite.

import './style.css'

import { Engine } from '@babylonjs/core/Engines/engine.js'

import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight.js'

import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder.js'
import { Scene } from '@babylonjs/core/scene.js'
import { Vector3 } from '@babylonjs/core/Maths/math.vector.js'
import { FreeCamera } from '@babylonjs/core/Cameras/freeCamera.js'

import '@babylonjs/core'
import "@babylonjs/loaders/glTF";


function setupCameraForCollisions(camera) {
  camera.checkCollisions = true;
  camera.applyGravity = true;
  camera.ellipsoid = new Vector3(1, 1, 1);
}

const createScene = async function () {
  const app = document.getElementById('app')
  const canvas = document.createElement('canvas')
  app.appendChild(canvas)
  const engine = new Engine(canvas, true);
  const scene = new Scene(engine);

  scene.gravity = new Vector3(0, -0.5, 0);
  scene.collisionsEnabled = true;

  const camera = new FreeCamera("camera1", new Vector3(0, 2.5, -6), scene);
  camera.setTarget(Vector3.Zero());
  camera.attachControl(canvas, true);
  setupCameraForCollisions(camera);

  const light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
  light.intensity = 0.7;
 

  const ground1 = MeshBuilder.CreateGround('ground1', {
    width: 6,
    height: 6,
    subdivisions: 2,
  },
  scene);

  ground1.position.y = 0;
  ground1.checkCollisions = true;

  const xr = await scene.createDefaultXRExperienceAsync({ floorMeshes: [ground1],
    uiOptions: {
      sessionMode: 'immersive-vr',
    },
  });

  return {engine, xr, scene};
};



async function initFunction() {

  const returnedScene = await createScene();
  const scene = returnedScene.scene;
  const engine = returnedScene.engine;
  const xr = returnedScene.xr;
  

  engine.runRenderLoop(function () {
    if (scene && scene.activeCamera) {
      scene.render();
    }
  });

  window.addEventListener("resize", function () {
    engine.resize();
  });
  
}

initFunction().catch(console.error);
4

Vite config

import { defineConfig } from 'vite'

import { splitVendorChunkPlugin } from 'vite'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  base: '/3dgame/',
  plugins: [splitVendorChunkPlugin(), mkcert()],
  server: {
    port: 3443,
    https: true,
    host: '0.0.0.0',
  },
})
5

On first glance it looks like the gltf loader is missing, though i do see you load it. Could you share a project i can work with?

7

Haven’t fully tested it, but - can you install the same version of the loaders as the core module in package.json? This might be the issue

9

Ok, now it works, thanks so much for help !

10

@RaananW hey, just a small question. When i created AR application it worked on my mobile device. But when i open in Oculus 2 (Oculus quest browser) after asking me allowance for AR . The Quest browser closes and an error is displayed on VR icon.

Shoud i open a new Question or it is normal that i cannot run AR application on Quest browser using Oculus 2?

11

should work fine! might be a missing requirement (a feature not supported on the quest 2). But it really depends on the use-case. Do you have mobile-only (or android-chrome-only) code in your XR init?

12

only this

  const xr = await scene.createDefaultXRExperienceAsync({
    uiOptions: {
      sessionMode: 'immersive-ar',
      referenceSpaceType: 'local-floor',
    },
    optionalFeatures: true,
  });

I want build a AR game with babylonjs, but i want to play with Oculus 2

13

The thing is that none of any babylon AR playgrounds work on Oculus2 quest browser.

14

The quest browser can, in general, run AR experiences. It is possible the quest 2 doesn’t support them. I don’t have a quest 2 so I can’t sadly test it, but I do run AR scenes with the quest 3. If you can connect your quest to a debugger you will be able to see what the error is.
Sadly hard for me to say what’s wrong here… Altenatively, you can pass an onError function to uiOptions in the configuration option, to do whatever you want to do with the error (maybe alert it instead of console.log it).

15

ok thanks, i will see what i can do with that

1 Like
16

ok i got it work. I just removed feature “warnings”

1 Like