Survey of PointerEvents and gesture libraries

Tutorials and tips
, ,
1

@georgie, this might be relevant as you look into genericised camera inputs. It might be interesting to allow a user to create a CameraInputs class heavily using one or more of the libraries mentioned below. At minimim, I think this provides insight to the types of possible gestures that current input classes don’t cover (multipointer multitaps, rotate, swipe, press). And there are PointerEvent properties that go unused (width, height, “pen”, pressure, tilt, twist, and many others).

PointerEvent

JavaScript provides PointerEvents while additional libraries convert those events into more complex gestures, simplifying the logic in code that uses those gestures. These libraries could provide a model for Camera Inputs and/or InputManagers.

Here is a summary from looking around the web at PointerEvemts and four different gesture libraries.

Events from JavaScript

To support both touch and mouse across all types of devices, use pointer events instead.

Note: It’s important to note that in many cases, both pointer and mouse events get sent (in order to let non-pointer-specific code still interact with the user). If you use pointer events, you should call preventDefault() to keep the mouse event from being sent as well.

Properties

PointerEvent.pointerType (“mouse”, “pen”, “touch”)
PointerEvent.isPrimary
PointerEvent.persistentDeviceId
PointerEvent.pointerId
PointerEvent.altitudeAngle
PointerEvent.azimuthAngle
PointerEvent.width
PointerEvent.height
PointerEvent.pressure
PointerEvent.tangentialPressure
PointerEvent.tiltX
PointerEvent.tiltY
PointerEvent.twist

Events

type: pointer___, enter/leave, down/up, move, cancel, over/out (stylus hover range),
over/leave - described as opposites, though over/out would make more sense
enter/out - described as opposites, though enter/leave would make more sense
gotpointercapture, lostpointercapture, pointerrawupdate

Survey of libraries

These take the Pointer Events and process them to recognize various common “gestures” and generate events. Libraries usually make parameters (e.g. timing, direction) available for fine-grained configuration.

type thefinger.dev hammerjs zingtouch deeptissuejs
tap Y Y Y Y
double tap Y taps numInputs? Y
press Y Y tap hold
long press Y time
flick / swipe drag:speed Y Y swipe (u/d/l/r)
drag / pan drag/pan pan pan move (h/v)
pinch & spread Y Y distance scale
rotate Y Y Y Y
two finger tap Y pointers numInputs?
double tap & drag Y taps & pointers
License ISC MIT MIT Apache License 2.0

Feature list from docs

• tap
• double tap
• press
• long press
• flick / swipe
• drag
• pinch & spread
• rotate
• pan
• two finger tap
• double tap & drag

The default set contains tap, doubletap, pan, swipe, press, pinch [spread] and rotate recognizer instances.

press: Recognized when the pointer is down for x ms without any movement.
swipe: Recognized when the pointer is moving fast (velocity), with enough distance in the allowed direction.

tap, rotate, pinch/expand, pan, swipe

tap, double tap, tap hold, move (h/v), swipe (u/d/l/r), rotate, scale

1 Like
2

If we are talking input systems, I also quite like GitHub - brianchirls/game-input that is very flexible and support touch, virtual joysticks, keyboard, gamepad and mouse (demo: Misc. - Simple Movement)

1 Like
3

Good point! It occurs to me that some controls, gestures, and input mechanisms need to be at the scene level and not just camera level.

From looking at how camera attaches to events, it seems camer input attaches to scene._.inputManager._addCameraPointerObserver(), and scene.onKeyboardObservable(). I haben’t fullytraced through those scene methods to figure out how/when the added observers from camera inputManager or CameraInputs are notified.

I haven’t fully wrapped my head around how inputs are relly handled at the scene level and how those notifications flow through the framework.

Something like virtual gamepad probably needs to be integrated at the scene level so that the difference between camera movement and mesh movement can be distinguished and treated seperately. (With some events propagating to the camera and some not?)

@georgie is plowing ahead with various changes throughout the framework to support the work-in-progress GeocentricCamera and I’m just trying to keep up!

1 Like