# Multi Touch Events in WebXR

**URL:** <https://forum.babylonjs.com/t/multi-touch-events-in-webxr/26099>\
**Category:** Questions\
**Tags:** webxr\
**Created:** [December 15, 2021, 9:27pm UTC](https://forum.babylonjs.com/t/multi-touch-events-in-webxr/26099 "2021-12-15T21:27:42Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![xtxz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xtxz/32/19604_2.png) [@xtxz](https://forum.babylonjs.com/u/xtxz)\
**Post date:** [December 15, 2021, 9:27pm UTC](https://forum.babylonjs.com/t/multi-touch-events-in-webxr/26099/1 "2021-12-15T21:27:42Z")

</div>

Hi,  
Anyone can help me with getting panning events and multi-touch panning events in a mobile WebAR environment? For now, I can only get pointer down, up and move events but not sure how can I check or implement single touch panning and multi-touch panning. I’ve also tried to reimplement this [Babylon.js/arcRotateCameraPointersInput.ts at master · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/arcRotateCameraPointersInput.ts) and add controls to web XR camera but it seems not trigger `onMultiTouch` function when I test it. Any thoughts or help is highly appreciated!

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [December 16, 2021, 10:01am UTC](https://forum.babylonjs.com/t/multi-touch-events-in-webxr/26099/2 "2021-12-16T10:01:59Z")

</div>

@PolygonalSun might be able to help but I am not sure why the arcRotateInput you tried would not work.

Could you provide a repro Playground ?

---

<div class="post-metadata">

**Author:** ![xtxz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xtxz/32/19604_2.png) [@xtxz](https://forum.babylonjs.com/u/xtxz)\
**Post date:** [December 16, 2021, 6:04pm UTC](https://forum.babylonjs.com/t/multi-touch-events-in-webxr/26099/3 "2021-12-16T18:04:27Z")

</div>

Hey @sebavan I don’t have a playground example yet will try to get you one later. But just give you something to might be helpful to start with.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/a/5acd8400f58989f408ac5110cb90e7abd409ddb2.png)  
This is the pointerInfo I got from desktop  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/a/9a86d206fa9eaf53b962b50f08702fa7e734e8e5.png)  
This is the pointerInfo I got from android in WebXR session  
Seems like there are some info missing in the webxr pointerInfo(for example if I am multi touching, I guess the `buttons` in the pointerInfo callback should be something other than 0? )

---

<div class="post-metadata">

**Author:** ![xtxz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xtxz/32/19604_2.png) [@xtxz](https://forum.babylonjs.com/u/xtxz)\
**Post date:** [January 3, 2022, 4:52pm UTC](https://forum.babylonjs.com/t/multi-touch-events-in-webxr/26099/4 "2022-01-03T16:52:03Z")

</div>

Hi,  
I got a simple XR playground setup here [https://playground.babylonjs.com/#9K3MRA#692](https://playground.babylonjs.com/#9K3MRA#692), checking the pointer event callback I see the `button` and `buttons` all return 0. how would I implement multi-touch event in that case?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 3, 2022, 5:03pm UTC](https://forum.babylonjs.com/t/multi-touch-events-in-webxr/26099/5 "2022-01-03T17:03:16Z")

</div>

Thanks a lot for the repro, this will help @RaananW once he ll be back from his break to have a look as I unfortunately do not know XR enough for this part.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [January 4, 2022, 4:48pm UTC](https://forum.babylonjs.com/t/multi-touch-events-in-webxr/26099/6 "2022-01-04T16:48:02Z")

</div>

Our WebXR pointer event emulation will run different pointer events for both controllers, if this flag is set to true when enabling it:

[Babylon.js/WebXRControllerPointerSelection.ts at master · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/blob/master/src/XR/features/WebXRControllerPointerSelection.ts#L90)

the pointerId will be different between the two controllers. The button and buttons will return 0, since this is an emulated event, it is not the native event that webxr provides us (since webxr doesn’t work with pointer events).

Hope this helps!

---

<div class="post-metadata">

**Author:** ![xtxz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xtxz/32/19604_2.png) [@xtxz](https://forum.babylonjs.com/u/xtxz)\
**Post date:** [January 4, 2022, 5:05pm UTC](https://forum.babylonjs.com/t/multi-touch-events-in-webxr/26099/8 "2022-01-04T17:05:32Z")

</div>

okay, that makes sense, so what do you think is the best approach I should take if I want to implement gestures say panning and two-finger rotate in WebXR.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [January 5, 2022, 11:36am UTC](https://forum.babylonjs.com/t/multi-touch-events-in-webxr/26099/9 "2022-01-05T11:36:19Z")

</div>

You will need to measure the distance between the two controllers constantly, just like you implement a zoom gesture.

---

<div class="post-metadata">

**Author:** ![xtxz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xtxz/32/19604_2.png) [@xtxz](https://forum.babylonjs.com/u/xtxz)\
**Post date:** [January 5, 2022, 6:25pm UTC](https://forum.babylonjs.com/t/multi-touch-events-in-webxr/26099/10 "2022-01-05T18:25:10Z")

</div>

[https://playground.babylonjs.com/#9K3MRA#692](https://playground.babylonjs.com/#9K3MRA#692) okay still see this demo on PG, when I am on a mobile device and doing some two finger gesture I only see one pointer event with same pointerId

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [January 5, 2022, 7:36pm UTC](https://forum.babylonjs.com/t/multi-touch-events-in-webxr/26099/11 "2022-01-05T19:36:41Z")

</div>

As i wrote in my last comment, you need to enable `enablePointerSelectionOnAllControllers` in order for that to work:

[WebXR Pointer Event Test | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#9K3MRA#694)

---

<div class="post-metadata">

**Author:** ![xtxz](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xtxz/32/19604_2.png) [@xtxz](https://forum.babylonjs.com/u/xtxz)\
**Post date:** [January 6, 2022, 4:30pm UTC](https://forum.babylonjs.com/t/multi-touch-events-in-webxr/26099/12 "2022-01-06T16:30:52Z")

</div>

ohhh thanks! will give it a try
