(4.1.0) Touch input is broken when using multiple canvases

Hello, I am experimenting with a pattern using the Babylon 4.1 beta inside a Vue application where a component creates a canvas element and hooks up a camera view to it when mounted. This works wonderfully on a desktop browser. The mouse input control is great.

However when I view the application on a mobile device the touch input is very buggy and unresponsive. Almost like it is mishandling the touchend event, but I am not sure as I have not been able to inspect remotely for technical reasons.

This issue is still present as of the most recent beta (4.1.0-beta.22), and can be demonstrated by visiting the demo page on a mobile device and interacting with the top left canvas element.

If I can figure out why I can’t connect to my android to inspect I’ll try to figure out more detail about what’s going on, but for now I was hoping to just bring attention to it. Thanks for all the hard work!

1 Like

Something to do with camera.attachControl maybe?

We are not supporting touch events but pointer events and you may need to add a reference to jQuery PEP to get a polyfill?

Thank you both for the replies.

Possibly, that seems to be an important aspect to this implementation. I will take a look at what’s going on in that process.

I see. Thanks for clarifying, I was guessing it was touch due to my inexperience with the engine.

I don’t think a polyfill is appropriate in this case? I believe this is an implementation issue rather than something specific to my project. This is why I linked the demo page, as it is something written by the authors to show proof of concept. The issue is that it doesn’t exhibit expected behavior on mobile.

BabylonJS works very well on mobile using a single canvas and the same pointer events. I think it is in the EngineView implementation that the pointer events seem to break on mobile? I managed to fix my inspector connectivity issue so here are two videos, one demonstrating the problem behavior and the other demonstrating the expected behavior:

Problem Behavior:

Expected Behavior:

Both cases use pointer events as shown in the Event Listeners pane.

I am still poking around to see what I can find. I am unfamiliar with the internals of BabylonJS.

Actually after checking it more closely I can repro…Let me check what is wrong here

OK! It was a bug but on the demo page :wink:

We forgot (somehow) to add:

<script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
1 Like

Beautiful! Works as expected now. Thank you for looking into this. I understand how these are supposed to fit together now and including PEP certainly did the trick for my project too.

1 Like

This is always the problem with web specs :wink: Implementation are sometimes unreliable (or absent)