Run AR hit-test locally

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">
    <meta charset="utf-8" />
      canvas {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-size: 0;
    <script src=""></script>
    <script src=""></script>
     <script src=""></script>
     <script src=""></script>
    <script src=""></script>
    <canvas id="render-canvas"></canvas>
    const canvas = document.getElementById("render-canvas");
    const engine = new BABYLON.Engine(canvas);

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

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


    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;


cc @RaananW

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

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!