Immersive-ar (Webxr) Drag and Drop mesh

Questions
1

This is a simple PG - Babylon.js Playground
From WebXr demo and Drag’n’Drop demo.
In non-immersion mode, the mesh just drags along the ground, but when I do this in AR it doesn’t move. As I understand it, this is happening because the mesh is anchored to the anchor.

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

But this is necessary for the correct positioning of the mesh.

My PG uses ground for drag, in non-AR mode this is fine. But in AR mode this is not correct. Should I get ground knowledge from the hit test result?

What’s the correct approach to use for dragging a mesh in AR mode?

2

Pinging @RaananW

3

In AR you don’t have ground, because you don’t know where it is at the beginning of the experience. If you want the real-world ground to be used, you will need to run plane-detection and use the detected planes to drag the model (just like you do in non-VR).

Plane detection is documented here - WebXR Augmented Reality Features | Babylon.js Documentation . I hope this gets you started!

4

Thanks for the answer! I thought about it! But for use plane detection you need to enable flag in chrome (at the moment). Not everyone will do it. Or if device is not capable this features. What can i use?

5

you can create a plane yourself at the same hight as the hit-test, but that would be very inaccurate. Otherwise - there is no magic solution. These are the tools WebXR can offer ATM

6

I continuing the tests with drag ‘n’ drop. Decided not to use plane detection at the moment. And if i disable
an anchor system, drag ‘n’ drop functionality work. But an anchor system is essential for better positioning in the real world. Could you give me some information about this? :flushed:
How do I drag a mesh from anchor to an anchor? This was useful for future generations) :nerd_face:
PG - https://playground.babylonjs.com/#VUGXHM#1

7

Then I’m totally not sure what drag and drop off anymore :blush:

An anchor is just a tracked point in space. The underlying system (android in most cases) keeps this point updated as the world around it updates. As drifts are always expected in this kind of constant position calculations, anchors are a good way of keeping things in the right place.

Now, I’m not sure what you call drag and drop, because so far you are using the basic functionality from the demo in the docs. You can, of course, remove anchors, or create more than one. Anchors are, however, immutable. If you want another one, you’ll have to create another one.
My suggestion would be - when dragging, don’t use anchors, and when dropping, use them again.

8

It is not right for use?
I use basic examples as a starting point for learning about this technology.

I’m trying to do this but don’t know how to detach the mesh from the anchor or remove the anchor that my mesh is attached to.
For example, when i place the mesh i use this function:

anchors.addAnchorPointUsingHitTestResultAsync(hitTest);

In my anchors observable i do clone mesh and place it with anchor:

    anchors.onAnchorAddedObservable.add(anchor => {
                model.isVisible = true;
                anchor.attachedNode = model.clone('clone');
                model.isVisible = false;
    });

But I don’t understand how I can detach this cloned mesh from the anchor? What if I have multiple meshes? Can you help me to understand it?)

9

Of course, but there is no drag and drop there :slight_smile: So, all i said was that i don’t quite understand what you refer to.

An anchor is a simple concept. It is an updatable point in space that has a single node (mesh) attached to it. You can attach or detach a node to it simply by setting the anchor.attachedNode variable. If it is set, the mesh will update. if it isn’t, nothing will happen. If you want to attach more than one mesh, use the parenting system - attach a (transform) node to the anchor, and set this node to be the parent of the many meshes you want to attach to this single anchor.

Maybe try recreating your playground and documenting the information flow to understand what is actually going on. Share this, including a bit of documentation on what exactly you are trying to achieve, and I am sure we will be able to help you with it :slight_smile: