Immersive-ar how to use real mobile as my cube texture

Questions
1

i want to use my mobile immersive-ar as my texture insted of my hdr cube texture so i can see my glb on real world

2

Hello :slight_smile:

There is no “texture” to be set then.
WebXR is made in a way protective toward the user, so by default you would not access the data from the camera. Instead, you simply need to render without any CubeBox, on default scene background. And if you initialized createDefaultXRExperienceAsync with sessionMode: "immersive-ar" then it will automatically replace the background by camera view :slight_smile:

3

yes but when i move mobile my glbs moves also i don’t want that i want when i move mobile i come closer to glbs or away so i want it to be fixed to real ground

4

You will need to place them in your scene using hit test and/or anchors.

This is a simple demo - Babylon.js Playground it also includes plane detection, which is not 100% needed in your case. If you want to share code that is not working we will be able to help further.

Documentation can be found here - Babylon.js docs

1 Like
5

i have regular mode with skybox and ar mode so i triggered this function to open ar mode

const vrExperment = async () => {
  // const xrExperience: WebXRDefaultExperience = await scene.createDefaultXRExperienceAsync();

  // const xrExperience = await scene.createDefaultXRExperienceAsync();

  // await xrExperience.baseExperience.enterXRAsync("immersive-vr", "local-floor");

  if (scene) {
    const xr = await scene.createDefaultXRExperienceAsync({
      uiOptions: {
        sessionMode: "immersive-ar",
      },
    });
    scene.clearColor = new Color4(0, 0, 0, 0);
  } else {
    console.warn("Scene is null or undefined.");
  }

  //   const xrHelper = await WebXRExperienceHelper.CreateAsync(scene);
  // await xrHelper.enterXRAsync("immersive-ar", "unbounded", scene);

  // xrHelper.sessionManager.onXRSessionInit.add((xrSession) => {
  //   console.log("XR Session Initialized!");

  //   // Perform any additional setup here, like adding hit-test functionality
  // });

  // // Optional: Use hit testing to place the model on detected surfaces
  // xrHelper.baseExperience.featuresManager.enableFeature(
  //   WebXRHitTest,
  //   "latest",
  //   { offsetRay: new Ray(new Vector3(0, 0, 0), new Vector3(0, 0, -1)) }
  // ).onHitTestResultObservable.add((results) => {
  //   if (results.length) {
  //     const hitTest = results[0];
  //     // Place the model at hit position
  //     myModel.position.copyFrom(hitTest.position);
  //   }
  // });
};
6

that’s all fine, now you need to continue with the implementation. All of the tools and code examples are in my last post, try experimenting with them and let us know what is not clear.

7

Also, for your skybox, this might come in handy - Babylon.js docs