How does Babylon.js get pointer events working?

[ozRocker]

When I try to use pointer events in my own code they don't work.  The events are undefined.  But somehow they work in a Babylon.js environment.

I'm testing with this code:

	if (window.PointerEvent) {
		alert("pointer events DEFINED");
	} else {
		alert("pointer events UNDEFINED");
	}

Its undefined in my environment, but in this playground http://playground.babylonjs.com/#R9Z7I its defined.  Is there something really basic that I'm missing to be able to use those events?

[NasimiAsl]

http://playground.babylonjs.com/#R9Z7I#1

 

you r before load i think

[ozRocker]

10 minutes ago, NasimiAsl said:

you r before load i think

Its undefined for me even if I run it after my scene has loaded.  I also tried after a 10 second delay.

[ozRocker]

I'm trying to get my customised virtual joystick happening in 2.4 and its not showing anything.  When I check the console I can see the pointermove event isn't firing, but if I change it to mousemove it will fire.

I just noticed that this works http://playground.babylonjs.com/#OORFZ#5  in 2.4 but it doesn't show the joystick circles

[Kesshi]

Did you include PEP  in your project? This polyfill is necessary for some browsers.

[ozRocker]

28 minutes ago, Kesshi said:

Did you include PEP  in your project? This polyfill is necessary for some browsers.

I don't know anything about PEP, but I added it to my project and the pointer events work now. Yay!   Thank you for the magic answer

[ozRocker]

I can't get the circles to show up in 2.4

http://playground.babylonjs.com/#OORFZ#5

That's actually @Wingnut's code

[davrous]

Pointer Events was created by Microsoft, is an official W3C spec: http://www.w3.org/TR/pointerevents/ and a lot of people in the industry think it's the best spec for touch on the web.

Still, it's currently only supported natively by IE11 and Edge. To support other browsers, you need to write what we call a polyfill library. The idea is to mimic the spec in JavaScript. For Chrome, Firefox, Safari & other, you need to bind to Touch Events invented by Apple.

The first polyfill library we've been using with Babylon.js was hand.js written by @Deltakosh . But then, jQuery finally wrote their own polyfill (we had some early discussions with them to use hand.js but they didn't like our approach to simulate the css propery touch-action). After further discussions, we agreed that having several polyfills could be confusing for the developers / users and decided as the Babylon.js core team to support jQuery. The name of their polyfill is named PEP.

Conclusion: to make pointer events (and thus anything related like the Virtual Joystick) needs a polyfill (PEP or Hand.hs) to work in all browser otherwise it will work only in IE11 and Edge.

Further details:

- to have the best support with hand.js, you need to set the CSS propery touch-action: none on the babylon.js canvas
- to have the best behavior with jQuery PEP, you need to set it on the canvas as a html property: like <canvas id="renderCanvas" touch-action="none"></canvas>

More documentation on PEP: https://github.com/jquery/PEP

An article I've written on Pointer Events: https://www.davrous.com/2015/08/10/unifying-touch-and-mouse-how-pointer-events-will-make-cross-browsers-touch-support-easy/

[ozRocker]

oh right, so it was hand.js that was making it work.  Thanks for the knowledge bro!

Now I just gotta get the graphics of the joystick to show up in Babylon 2.4

[Wingnut]

Oz... there were some updates to smartCollection (it was removed from BJS)  since that demo.  Come on up to the latest, and your rings will work again...

http://playground.babylonjs.com/#OORFZ#12

(thanks to @Nockawa for the repair).  Some info here and below.

[ozRocker]

Ok cool.  I got it working now.  I'm using Stringdictionary instead of Smartcollection.

Also my touch object is a number for some reason.  touch.id is undefined, but touch has a number which I guess is the ID since it comes up as one. I'm not sure what that changed suddenly but it fixed it.

[Dal]

@davrous Since PEP is under a permissive license, why not make it part of the core build? I can't think of many cases where we wouldn't need it? The typescript compiler can inline JS libs these days I believe.

[max123]

As JQuery becomes less and less relevant, I don't understand the decision to use a JQuery plugin. I would be very reluctant (read "will never") include JQuery library, or for that matter, any library, just for one feature. 

Would be fantastic if BJS team included touch support in its core library!

 

Cheers

[max123]

I mean, these days mobile devices drive around 60% of web traffic and the trend is up-up-up

[GameMonetize]

Jquery PEP is not linked to ANY code from jQuery. It is only done by jQuery foundation.

 

If you don't like it, you can use our own implementation: https://github.com/deltakosh/handjs

[max123]

Thanks, Deltakosh. So, I don't need to include jQuery, just PEP?

[GameMonetize]

correct!

[MrPancakes]

Having a look at BabylonJS and I have a questions regaring the PEP polyfill and @davrous last post in this thread May 2016.

Seems this polyfill is not needed for the current latest major browsers exept Safari?  is this correct?

And if that is the case anyone know what versions PointerEvents became available in Firefox, Chrome?

And is PointerEvents stable in how it operates between Firefox, Chrome and Edge?

[GameMonetize]

Hey

As long as the browser support Pointer events you are good to go without PEP

There is no version but only a web standard which **should** work everywhere flawlessly

 

https://caniuse.com/#feat=pointer