Ar.js: Rotation and Stretch problems ( iOs® and Android® )

[AndreaMonzini]

Hello,
i did some test and i see 3D Rotation and 3D Stretch problems on iOs® and Android® devices and it seems they related also to the orientation of the Devices in the space beside the portrait mode:

Tested on iPad® Air, iPhone® ( iOs® 11 ) and Android® Phone ( Firefox® 56 , Chrome® 61 )

• in portrait mode, if the iPAd®, iPhone® or Android® Phone are Vertical ( parallel to the wall) and the marker is on the wall: wrong rotation of the 3D content and 3D is also stretched.

• in portrait mode, if the iPAd®, iPhone® or Android® Phone are Horizontal ( Parallel to the table) and the marker is on the table: correct rotation of the 3D content but 3D is stretched.

• In landscape mode if the iPAd®, iPhone® or Android® Phone are Vertical ( parallel to the wall) and the marker is on the table: works well

• In landscape mode if the iPAd®,iPhone® or Android® Phone are Horizontal ( Parallel to the table) and the marker is on the table: works well

Conclusion:

• The 3D Rotation and 3D Stretch problems are related to iOs® and Android®
• We can reproduce the 3D Rotation problem with Portrait mode, vertical device ( parallel to the wall) and marker on the wall.
• We can reproduce the 3D Stretch problem with Portrait mode, vertical/horizontal device ( parallel to the wall or parallel to the table ), and markers on the wall or on the table.
  Related to:
  https://github.com/jeromeetienne/AR.js/issues/128 https://github.com/jeromeetienne/AR.js/issues/229 https://github.com/jeromeetienne/AR.js/issues/228 https://github.com/jeromeetienne/AR.js/issues/275
  https://github.com/jeromeetienne/AR.js/issues/289

Solutions:
https://github.com/jeromeetienne/AR.js/pull/212 https://github.com/jeromeetienne/AR.js/issues/246

[javismiles]

That's exactly right, I have been testing in both laptop PC and android/iOS and yes the stretching happens on mobile devices

[Adolar13]

Hey @javismiles I tried the changes from @pikilipita in #212. Works for me.
I attached the aframe-ar.js with the changes, while it's not merged in the main branch.
aframe-ar.zip

[javismiles]

@Adolar13 thank you very much, really appreciated, i wonder if this will fix all the distorsion issues i had found on android, thank you again

[AndreaMonzini]

Just tested it and the problems seem solved on Android ®! i will test it as soon as possibile on iOs®
Only the overlay elements position seems shifted.
Thank you @pikilipita and @Adolar13 !

[javismiles]

thank you again , this fix seems to work well, can you guys help with another issue related to clicks?

my marker when detected activates and shows a video (I use a-frame with ar.js, so aframe-ar),
I want to detect a click on that video element, not on the whole screen, for some reason yes I can detect a click but its detected in the entire whole screen, instead of just
in the video element itself, how can I make sure that it happens on the video element itself?

Also I am using onclick events now because this used to work:

AFRAME.registerComponent('javi1', {
init: function () {
var el = this.el;
el.addEventListener('click', function (evt) {... etc

but now its not working anymore for some reason,

what's your recommended way to detect a click on the specific video element?

btw, in console Im receiving these 2 warnings, do they have any relation to the issues with clicks?
"THREE.WebGLRenderer 87
pictoar1js.min.js:3 extras:primitives:warn Mapping keys should be specified in lower case. The mapping key minConfidence may not be recognized
pictoar1js.min.js:3 extras:primitives:warn Mapping keys should be specified in lower case. The mapping key hit-testing-renderDebug may not be recognized "

thanks a lot

[AndreaMonzini]

hello @javismiles I'm trying to test video with ios® using webkit-playsinline and playsinline but the video does not start, do you have a working project example ?
Thank you.

[javismiles]

hey Andrea, I dont have a small standalone example, but I extracted for you
that line from the large project Im working on, look:

class="video" webkit-playsinline playsinline width=1 height=1 position="0 0
0" rotation="0 0 2" autoplay="false">

that totally works for me on iOS no probs, but of course it has to be iOS
11,

make sure to also have:

on the metatags,

and also another thing, iOS will not allow the video to preload on mobile
devices, they dont allow it,
and you need to start it on a user click action,
so you gotta put a button somewhere, and when user clicks, onclick you
gotta do the .play() action, if not aint gonna work, iOS is super picky ;)

my problem now is to detect a click on the video itself, the click detection happens on the entire screen, I cant manage so far to detect a click just and only on the video element itself, the entire screen triggers the click

let me know if you manage to make that work, it should work with the things i told you

[AndreaMonzini]

@javismiles thank you ! tomorrow i will try video in AR.js again ;)

[lslzl3000]

Also working on the roataion and strech problem~
Is there a plan to fix this issue or merge into main branch?

[AndreaMonzini]

Waiting for main branch, we have these solutions:

https://github.com/jeromeetienne/AR.js/pull/212 https://github.com/jeromeetienne/AR.js/issues/246

[nicolocarpignoli]

closing as MR were merged