WebXR teleportation to point picked with touch screen

Questions
, , ,
1

Hello!

I am trying to teleport the WebXR camera to the picked point on a mobile touch screen in inline mode. I’ve been trying to use the built-in teleportation, yet the indicator meshes appear further than touch position, and flicker without a double touch. Therefore, if I can set the point to teleport manually, I can listen to pointer events and trigger the teleportation at picked position.

What I need: Code snippet to manually teleport the WebXR camera.

My application is large and I am unable to create a PG for it, but I can share some snippets which might give an idea:

let xrExperience, xrCamera;
const XR_INIT_QUATERNION = new Quaternion(0, 0, 0, 1);

scene.createDefaultXRExperienceAsync({
  uiOptions: {
    sessionMode: "inline",
    referenceSpaceType: "local-floor",
  },
  disableTeleportation: false,
  optionalFeatures: true,
  disableDefaultUI: true,
  ignoreNativeCameraTransformation: false,
    floorMeshes: [myFloorMesh],
  })
  .then((_xrExperience) => {
    xrExperience = _xrExperience;
    xrCamera = xrExperience.baseExperience.camera;
    xrCamera.compensateOnFirstFrame = true;
  }, console.error);

xrExperience.baseExperience.enterXRAsync("inline", "local-floor").then((sessionManager) => {
  sessionManager.referenceSpace = sessionManager.referenceSpace.getOffsetReferenceSpace(
    new XRRigidTransform(XR_INIT_QUATERNION, XR_INIT_QUATERNION)
  ); // <- for initial positioning, not so important
  sessionManager.onXRFrameObservable.addOnce(() => {
    new Promise<void>((resolve) => setTimeout(resolve, 0)).then(() => {
      scene.activeCamera = xrCamera;
      scene.cameraToUseForPointers = xrCamera;
    });
  });
});

Thanks a lot!

2

cc @docEdub

3

Interested what you come up with, best I managed for input on mobi XR is tap/doubletap(without coords) and device-orientation(which is largely shared with the camera).

4

I am not sure if I correctly understood.

On single tap, the indicator appears at a distance from where I actually tap at. The indicator is flickering (rapidly appearing/disappearing). On double tap, the indicator does not flicker anymore, and there is a visible ray from camera to the indicator. But moving it around is not intuitive.

For more intuitive approach, I had this idea to teleport at picked position. Only I don’t know how to teleport :slight_smile:

5

You can translate and rotate the WebXR camera using it’s position and rotation/rotationQuaternion properties:

Here’s an example of moving its position: