Jump to content

How does Babylon.js get pointer events working?

Recommended Posts

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?

Link to post
Share on other sites

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

Link to post
Share on other sites
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

Link to post
Share on other sites

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/

Link to post
Share on other sites

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.

Link to post
Share on other sites
  • 3 months later...

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!



Link to post
Share on other sites
  • 1 month later...

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?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...