Jumps in onMultiTouch

Questions
1

Hi guys,

I am currently implementing my first application with BabylonJS and I want to use an ArcRotateCamera. On the desktop, it works quite fine. But on mobile, the zooming has jumps, i.e. the zoom suddenly changes by a big amount that is not reflected by the movement of the fingers. I tried to fix it by defining my own version of ArcRotateCameraPointersInput.onMultiTouch. There, I realized that already the raw input for the two pointers has these jumps. See for example the following list of pointer positions of consecutive calls:

grafik
grafik568×139 3.68 KB

The first pointer (pointerA) behaves consistent, but the second (pointerB) sometimes just suddenly jumps. The following calls then use this jumped location as the new base. So I can’t average that out or sth.

I found out now that this apparently just happens in Firefox, but not in e.g. Chrome.

Do you have any idea where this is coming from and how to fix it? Any help appreciated! :slight_smile:

2

cc @georgie / @amoebachant

3

Hi @Brokkoli3000 - thanks for reaching out! I’ll discuss this with some other members of the team, but in the meantime, could you share a playground link that includes the logging you were doing? Thanks!

4

I currently don’t have a playground link to share, sorry. I’ll share the code for the whole ArcRotateCameraPointersInput instead:

new class extends babylon.ArcRotateCameraPointersInput {
			zoomStartData: ZoomStartData | null = null;

			constructor() {
				super();
				this.panningSensibility = 0;
				this.multiTouchPanAndZoom = true;
				this.multiTouchPanning = false;
			}

			public override onMultiTouch(
				pointA: PointerTouch,
				pointB: PointerTouch,
				previousPinchSquaredDistance: number,
				pinchSquaredDistance: number,
				previousMultiTouchPanPosition: Nullable<PointerTouch>,
				multiTouchPanPosition: Nullable<PointerTouch>
			) {
				const zoomStartData = this.zoomStartData;
				if (zoomStartData) {
					if (pinchSquaredDistance === 0) {
						this.zoomStartData = null;
					} else {
						stateService.setZoom(zoomStartData.startZoom - (this.calculateDistance(pointA, pointB) - zoomStartData.startPinchDistance) * 0.01);
					}
				} else {
					this.zoomStartData = {
						startZoom: stateService.getZoom()!,
						startPinchDistance: this.calculateDistance(pointA, pointB)
					}
				}
				console.log(`${this.convertToString(pointA)} ${this.convertToString(pointB)} ${Math.sqrt(previousPinchSquaredDistance)} ${Math.sqrt(pinchSquaredDistance)} `)
			}

			private convertToString(point: PointerTouch): string {
				return `(${point.x.toFixed(0)}, ${point.y.toFixed(0)})`;
			}

			private calculateDistance(point1: PointerTouch, point2: PointerTouch) {
				return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
			}
		}

Does that suffice? I shared a little bigger section, just in case I made a crucial error somewhere else. The logging line is:

console.log(`${this.convertToString(pointA)} ${this.convertToString(pointB)} ${Math.sqrt(previousPinchSquaredDistance)} ${Math.sqrt(pinchSquaredDistance)} `)
5

Technically we need a PG to repro. Else we spend too much time doing the repro and other users will not be served as fast as we want

Please help us helping you

6

Hi @Brokkoli3000, it does look like this could be a browser specific issue. You could test that hypothesis by creating a simple test page that doesn’t even use Babylon, and logging the clientX, clientY, and pointerId that you see in pointermove events. If you do see that noise in that data, you should consider filing a bug with Firefox so they can go fix it.

If that doesn’t reproduce the issue, then please reproduce it in the Babylon playground and then send us the link and we’ll investigate further.

Thanks!