Git Product home page Git Product logo

Comments (11)

AdaRoseCannon avatar AdaRoseCannon commented on May 25, 2024

This looks like the expected behaviour, the system seemed to update the anchor position to restore to the correct position at the end.

Just so you know aframe already has a built in hit-test component: https://aframe.io/docs/1.3.0/components/ar-hit-test.html

from webxr-samples.

latifs avatar latifs commented on May 25, 2024

Hi @AdaRoseCannon,
wouldn't you want the red and blue boxes to be inside the constraints of the tape on the ground at all times?
it is kind of disturbing that they are somehow closer to you at the start and then slowly drift into place as you get closer.

When I try the "same" experiment with the IKEA Place app and some random furniture, the drift is not noticeable.
So my thought was that I was doing something wrong with my position update.

Does it mean that if I use webXR and threeJS only, I'd see the same thing happen?

from webxr-samples.

AdaRoseCannon avatar AdaRoseCannon commented on May 25, 2024

Were the red and blue box anchors created from hit test results?

from webxr-samples.

latifs avatar latifs commented on May 25, 2024

The red and blue boxes are anchors but are created relative to the main anchor.
The main anchor was itself created by hit test results at the beginning of the video.

Once I place the main anchor I use its anchorPose and XRRigidTransform to place the other anchors at a certain distance from it.

The main idea with this is to try to spin up a world by placing objects (obstacles) relative to the main anchor.
These objects could be existing in the real world which is why accurate placement at all times is important.

from webxr-samples.

AdaRoseCannon avatar AdaRoseCannon commented on May 25, 2024

Right that's your issue, the system's understanding of the scene itself doesn't maintain consistent size as it learns more about the environment so you need multiple anchors so the system can track those points as the system evolves.

from webxr-samples.

bialpio avatar bialpio commented on May 25, 2024

One more thing to try: before placing main anchor, can you walk around to the fixture markers and back? I wonder if the system didn't have enough data at the time you created the fixture anchors (fixtures seem to be rendered as if they are below ground, but w/o depth-based occlusion w/ the real world it's hard to tell).

from webxr-samples.

latifs avatar latifs commented on May 25, 2024

@AdaRoseCannon Do you mean multiple anchors from hit test results?

Because I thought of that and

Option1:
one idea was to position real life anchors (tape on the ground) at each corner of the room and hit test results them to compute a master anchor position to use for placement of the boxes.
These 4 real life anchors would map the room to help better positioning. (probably overkill).

Option2:
Walk around the room (as @bialpio suggested) and every time you get a hit-test-result object just place anchors there to again map out the room better. Then when you are ready to place your main anchor (by clicking the screen) you have a better understanding of the room. (which I suspect is what IKEA place is doing).

Thanks for helping guys, much appreciated.

from webxr-samples.

bialpio avatar bialpio commented on May 25, 2024

Option2: Walk around the room (as @bialpio suggested) and every time you get a hit-test-result object just place anchors there to again map the room better.

I think you can try the existing code w/o any changes - I'm mostly curious if the current issue is because when you are placing the fixture anchors, the part of the environment that they are supposed to be in is not yet very well understood by the underlying system. I re-watched the video, and yup, all the anchors seem to initially be below the ground - main anchor gets fixed up at the end of the video, but others aren't (since they were not created based off of a hit-test result so they don't know they should "track" the ground).

from webxr-samples.

AdaRoseCannon avatar AdaRoseCannon commented on May 25, 2024

Thanks @bialpio for putting it so well. I am on my phone.

from webxr-samples.

klausw avatar klausw commented on May 25, 2024

In short, using a single anchor to place objects throughout a large space would only work if the AR system has a rigid global coordinate system, but that's not how ARCore (or other similar tracking systems) work.

Think of the AR system's world model as being made of rubber, and that model gets deformed and stretched during a session as it receives additional data and improves its understanding. Anchors based on hit test results correspond to pins placed where the hit test happened. These points will move along with their local piece of the rubber model. That's why it's important to use anchors close to where you are placing augmented objects. If you use a distant anchor to place an object, imagine that the object is connected to that anchor's pin with a long stick, and that will obviously wobble around as the rubber model deforms.

I guess this analogy is a bit of a stretch (pun intended), but I hope it helps build a better mental model of what's happening.

from webxr-samples.

latifs avatar latifs commented on May 25, 2024

Hey Guys,

this is another attempt at trying to map the space better.
From what you guys were saying an understanding of the space is important in order to get the most accurate placement of the boxes.
I keep referencing the IKEA Place app (I don't work there, I promise) because it doesn't require you to walk around, scan areas of the room, or anything like that.
So my guess was that in the background some Anchors were put on the ground to map the space better and improve the future positioning of furniture pieces.

This is what I try to do in the video below (all the way down). I drop 400 anchors as I get a HitTestResults object (to map the space better).
And then go back to my main anchor position and hit the screen to get its placement.

Then I use this piece of code to place my boxes relative to the main anchor position.
Basically, the main anchor becomes my origin and I just add to the position of the fixture to the position of the main anchor (using XRRigidTransform).

createOffsetAnchor: async function (frame, fixtureData) {
  const { fx, fy, fz } = fixtureData.origin;
  const { x: ax, y: ay, z: az } = this.mainAnchorPose.position;
  const { x, y, z } = { x: ax + fx, y: ay, z: az + fz };

  let anchorFixture = await frame.createAnchor(
    new XRRigidTransform({ x, y, z }, { x: 0, y: 0, z: 0, w: 1 }),
    this.refSpace
  );
  
  this.anchoredObjects.push({
    id: fixtureData.id,
    anchor: anchorFixture,
  });
}

so either:

  • XRRigidTransform is doing something funky in the background. (it could also not be the correct way to place my boxes
  • I need to find a way for anchors not created from a hitTestResults to track the ground better as @bialpio hinted at (right now they are placed at the level the main anchor was placed at on click of the screen, see code above)
  • Create multiple master anchors and place the fixtures using the closest hit test results placed master anchors (as @klausw
  • suggested)

I'm willing to try other options.
Thanks all for the tips and the knowledge drops

Screen_Recording_20221006-120959_Chrome.mp4

from webxr-samples.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.