Anchors Feature in Babylon using WebXR

Questions
1

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

<head>

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

    <title> </title>

    <script src = https://cdn.babylonjs.com/babylon.max.js> </script>

    

    <style>

        #canvas{

        width:100%;

        height:100%;

        }

    </style>

</head>

<body>

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

    <script>

        window.addEventListener("DOMContentLoaded",function(){

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

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

            //scene

            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();

                //box

                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);

                camera.attachControl(canvas,true);

                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;

            //XR

                          

            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(() => {

            model.setEnabled(false);

            })

            //hitTest

            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;

                }

            });

            //Anchors

            if (anchors) {

                anchors.onAnchorAddedObservable.add(anchor => {

                    model.setEnabled(true);

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

                    model.setEnabled(false);

                })

                anchors.onAnchorRemovedObservable.add(anchor => {

                    if (anchor) {

                        anchor.attachedNode.isVisible = false;

                        anchor.attachedNode.dispose();

                    }

                });

            }

            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();

                    anchors.addAnchorAtPositionAndRotationAsync(tpos,rot);

                    //anchors.addAnchorPointUsingHitTestResultAsync(hitTest);

                }

                else

                console.log("error")

            });

            return scene;

        };

        var scene = createScene();

        engine.runRenderLoop(function(){

            scene.render();

        });

        });
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.
2

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.