Anchors Feature in Babylon using WebXR

Hi Everyone,
I’m fairly new to Babylon JS. I am currently working on setting up anchors in Babylon.

The following code is what I have so far


    <meta name = "viewport" content = "user-scalable=0,initial-scale"

    <title> </title>

    <script src => </script>










    <canvas id = "canvas"> </canvas>



            var canvas = document.getElementById("canvas");

            var engine = new BABYLON.Engine(canvas,true);


            var createScene = function(){

                var scene = new BABYLON.Scene(engine);

            //       try {

            // const xrHelper = await WebXRExperienceHelper.CreateAsync(scene);

            // } catch (e) {

            //     // no XR support

            //     console.log("error")

            // }

                scene.clearColor = new BABYLON.Color3.White();


                var box = BABYLON.Mesh.CreateBox("Box",4.0,scene);

                var camera = new BABYLON.ArcRotateCamera("arccamera",BABYLON.Tools.ToRadians(45),BABYLON.Tools.ToRadians(45),10.0,box.position,scene);


                var light = new BABYLON.PointLight("pointlight",new BABYLON.Vector3(0,10,0),scene);

                light.parent = camera;

                light.diffuse = new BABYLON.Color3(1,1,1);

                var material = new BABYLON.StandardMaterial("material1",scene);

                material.diffuseTexture = new BABYLON.Texture("flowers.jpg",scene);

                //material.bumpTexture = new BABYLON.Texture("flowers.jpg",scene);

                material.roughness = 0.5;


                box.material = material;



            const xr = await scene.createDefaultXRExperienceAsync({

                uiOptions: {

                    sessionMode: "immersive-ar",

                    referenceSpaceType: "local-floor",


                optionalFeatures: true,


            const fm = xr.baseExperience.featuresManager;

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

            const anchors = fm.enableFeature(BABYLON.WebXRAnchorSystem, 'latest');

            const xrBackgroundRemover = fm.enableFeature(BABYLON.WebXRBackgroundRemover.Name);

            xr.baseExperience.sessionManager.onXRSessionInit.add(() => {




            let hitTest;

            xrTest.onHitTestResultObservable.add((results) => {

                if (results.length) {

                    hitTest = results[0];

                    marker.isVisible = true;

                    hitTest.transformationMatrix.decompose(marker.scaling, marker.rotationQuaternion, marker.position);

                } else {

                    hitTest = undefined;

                    marker.isVisible = false;




            if (anchors) {

                anchors.onAnchorAddedObservable.add(anchor => {


                    anchor.attachedNode = model.clone('clone');



                anchors.onAnchorRemovedObservable.add(anchor => {

                    if (anchor) {

                        anchor.attachedNode.isVisible = false;





            placeBtn.onPointerUpObservable.add(function() {

                if (hitTest && anchors && xr.baseExperience.state === BABYLON.WebXRState.IN_XR) {

                    let matrix = hitTest.transformationMatrix;

                    let local_pos = new BABYLON.Vector3();

                    let tpos = BABYLON.Vector3.TransformCoordinates(local_pos, matrix);

                    let rot = new BABYLON.Quaternion();







            return scene;


        var scene = createScene();




I have tried running it in the Babylon playground and in my web browser using Node but had no luck. if you have any recommendations for the best way to run it I would greatly appreciate it.

Hi, I answered in a different thread, but I can access here as well :blush:

To use ar features you will have to use an across device, until now devices as support. Iphone won’t get it in the near future, hololens will highly get it soon with the new edge browser. Firefox reality doesn’t short those features, and is not being actively developed.

About serving - for test purposes the playground is more than enough. If you want to host it yourself you will need to serve this html files over https, as webxr is only supported on secured pages.