Run AR hit-test locally

Questions
,
1

Good morning,
I am sorry for my question but I am still kind of a newbie with Babylon. I am trying to load an AR scene locally, but I can’t seem to be able to run it. WebXR incubation is already enabled on Chrome, and loading a simple Immersive AR scene isn’t giving any problem. Issues arise when the featuresManager comes into play, as in the Hit-Test example below, where the marker does not appear at all. I took this simple scene from this playground Babylon.js Playground , where everything works fine. Am I missing some imports?
Thank you very much.

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>Test</title>
    <style>
      html,
      body,
      canvas {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-size: 0;
      }
    </style>
  </head>
  <body>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/materialsLibrary/babylon.gridMaterial.js"></script>
     <script src="https://unpkg.com/earcut@2.1.1/dist/earcut.min.js"></script>
     <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    
    <canvas id="render-canvas"></canvas>
    
    <script>
    const canvas = document.getElementById("render-canvas");
    const engine = new BABYLON.Engine(canvas);

    const scene = new BABYLON.Scene(engine);
        
    function renderLoop() {
       scene.render();
     }
     engine.runRenderLoop(renderLoop);

     const camera = new BABYLON.FreeCamera(
       "camera",
       new BABYLON.Vector3(0, 35, 0),
       scene
     );


   camera.setTarget(BABYLON.Vector3.Zero());

    camera.attachControl(canvas, true);

    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    light.intensity = 0.7;

    var xr = scene.createDefaultXRExperienceAsync({
        uiOptions: {
            sessionMode: "immersive-ar",
        },
        optionalFeatures: true
    });

    const fm = xr.baseExperience.featuresManager;

    const xrTest = fm.enableFeature(BABYLON.WebXRHitTest, "latest");

    const marker = BABYLON.MeshBuilder.CreateTorus('marker', { diameter: 0.15, thickness: 0.05 });
    marker.isVisible = false;
    marker.rotationQuaternion = new BABYLON.Quaternion();

    xrTest.onHitTestResultObservable.add((results) => {
        if (results.length) {
            marker.isVisible = true;
            hitTest = results[0];
            hitTest.transformationMatrix.decompose(marker.scaling, marker.rotationQuaternion, marker.position);
        } else {
            marker.isVisible = false;
        }
    });

    
    </script>
  </body>
</html>
2

cc @RaananW

3

Hi! Perfect, experimenting is the best way to learn :slight_smile:

So, it feels like the variable `hitTest was not initialized (or at least i can’t find its definition).
Are there any errors in the console?
Oh, and most important - are you sering the page using a secure (https) connection? XR will only work when used in a secure environment. I assume of course that you are trying to load this scene in an AR-enabled device (i.e. android device, for example)

1 Like
4

Thank you @RaananW for your most kind reply! I managed to make it work, I had to enclose all of the javascript in an async createScene() function and add an await before scene.createDefaultXRExperienceAsync(). Thank you very much for your help and sorry for my question!

2 Likes