Does needle recognize vertical planes in ar mode?

🌵 Needle Engine
1

Hi guyss, hope u r doing well :smile:
I have another question, if I deploy to glitch and use ar mode, is it possible to track vertical planes to place something like a painting on a wall?

Original Post on Discord

by user 771724594846367796

2

Hello, currently WebXR plane detection is not implemented by default so we don’t have support for planes right now. GitHub - immersive-web/real-world-geometry: Additions to WebXR Device API for exposing real world data (Lead: Piotr Bialecki). Plane detection: https://immersive-web.github.io/real-world-geometry/plane-detection.html

But what you can do is get the XRSession and use hit testing to detect “vertical” surfaces. Have a look at the WebXR.ts script at line 561 (this is where the AR reticle is updated)

3

hi @marcel :cactus:

by user 771724594846367796

4

Here’s some code that you need to add it:

first get the hit test source for the viewer

session.requestReferenceSpace('viewer').then((referenceSpace) => {
            session.requestHitTestSource({ space: referenceSpace }).then((source) => {
                this.hitTestSource = source;
            });
        });

then you can use that to hit test (the XRFrame is the first argument in onBeforeRender(xrFrame)

const hitTestResults = frame.getHitTestResults(this.hitTestSource);
        if (hitTestResults.length) {
            const hit = hitTestResults[0];
            const referenceSpace = this.webxr.context.renderer.xr.getReferenceSpace();
            if (referenceSpace) {
                const pose = hit.getPose(referenceSpace);
                this.sessionRoot?.onUpdate(this.webxr.Rig, session, pose);

                if (this.reticle) {
                    this.reticle.visible = this.reticleActive;
                    if (this.reticleActive) {
                        if (pose) {
                            const matrix = pose.transform.matrix;
                            this.reticle.matrix.fromArray(matrix);
                            if (this.webxr.Rig)
                                this.reticle.matrix.premultiply(this.webxr.Rig.matrix);
                        }
                    }
                }
            }

        }
5

hope that helps to get you started. And hello @erik_scant :slightly_smiling_face:

6

to look at the script you can just click this blue link
unknown.png

7

ty very much @marcel :cactus: i’m gonna take a look at it in my free time :smile:

by user 771724594846367796