Sign in to follow this  
ozRocker

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://babylonjs-playground.azurewebsites.net/#R9Z7I its defined.  Is there something really basic that I'm missing to be able to use those events?

Share this post


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://babylonjs-playground.azurewebsites.net/#OORFZ#5  in 2.4 but it doesn't show the joystick circles

Share this post


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

Share this post


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/

Share this post


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.

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.