AR-js-org / AR.js

Image tracking, Location Based AR, Marker tracking. All on the Web.
MIT License
5.46k stars 927 forks source link

Content 'sticking to' camera on certain devices #278

Open nickw1 opened 3 years ago

nickw1 commented 3 years ago

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

This issue is to discuss the behaviour originally documented in issue #265, and possibly elsewhere. Namely, on some devices, location-based content specified with gps-entity-place appears to 'stick' to the camera even if you move around.

If the current behavior is a bug, please provide the steps to reproduce.

Try going to this URL: (265 was the original issue number)

https://hikar.org/265/

What this is supposed to do, is automatically create two boxes a short distance to your north as soon as it gets a GPS position (wherever in the world you are)

If you walk away from your original position in directions other than north, the boxes should get smaller, but if you walk north, they should get bigger.

On some devices, this behaviour is not seen and instead the two boxes 'stick' to the camera.

As an initial step to try and diagnose the problem, could you report:

Phone model
OS and version
Browser and version
Approximate location (at country level)

if the expected behaviour is not occurring.

What would be also good is if you could (if using Chrome on the mobile device) setup Chrome Developer Tools and see if any errors are reported: https://developer.chrome.com/docs/devtools/remote-debugging/

Thanks.

Please note that this is a new version of issue #275 which was closed due to clutter.

Please only use this issue to report this bug, or suggest ideas to resolve it. Please use the Discussions if you would like general support. Any irrelevant posts will be deleted (sorry, but this issue needs to be focused).

yedianyang commented 3 years ago

https://github.com/AR-js-org/AR.js/issues/275#issuecomment-852179498

Hi Just want to let you know there might be some problem that this function not working well in China( not sure). I try this on three devices. The dialogue box pops out successfully every time when I refresh the site and got the right GPS reading. But all the box sizes are not changed corrsponding when I walking. It moves at the same time when I move.

Three devices are: 1. iPhone 12 pro max IOS 14.3 Chrome for IOS 86.0.4240.93 / Firefox Daylight 34.0(4920)

  1. iPhone 6s IOS 13.6.1 Safari

  2. iPad Pro 11 inch 2019 cellular (with GPS) ipadOS 14.4 Chrome for ipadOS 90.0.4430.216 / Firefox Daylight 34.0(4920)

Best.

acommend commented 3 years ago

I experience this issue when deploying a modified version of the source of the location based tutorial Build your Location-Based Augmented Reality Web App. In my modifications I embed the iframe within an Ionic Framework component and add an a-image with static gps-entity-place to the a-scene within the iframe after the iframe 'load' event received. When deployed to my device the image "sticks" to the device as I move from the static position. My device information is listed below:

Phone model: Samsung Galaxy S10+ OS and version: Android 11 Browser and version: Android System WebView 94.0.4606.85 Approximate location (at country level): Hawaii, USA

raywu commented 3 years ago

Why use iframe? In Ionic why not just load AR js through npm?

On Wed, Oct 27, 2021 at 4:05 PM Tony C @.***> wrote:

I experience this issue when deploying a modified version of the source https://github.com/jeromeetienne/AR.js/tree/master/aframe/examples/click-places of the location based tutorial Build your Location-Based Augmented Reality Web App https://medium.com/chialab-open-source/build-your-location-based-augmented-reality-web-app-c2442e716564. In my modifications I embed the iframe within an Ionic Framework component and add an a-image with static gps-entity-place to the a-scene within the iframe after the iframe 'load' event received. When deployed to my device the image "sticks" to the device as I move from the static position. My device information is listed below:

Phone model: Samsung Galaxy S10+ OS and version: Android 11 Browser and version: Android System WebView 94.0.4606.85 Approximate location (at country level): Hawaii, USA

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/AR-js-org/AR.js/issues/278#issuecomment-953345389, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAETNMODW6UD3UK5NQFNDJDUJBZSTANCNFSM45KPLMYA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

acommend commented 3 years ago

Thanks for the suggestion @raywu but I can't seem to find a tutorial that details how to do it in the way that you suggest with one of the popular javascript frameworks, e.g., Vue, Angular, React, etc., and one of the popular UI component frameworks, e.g., Ionic Framework, Vuetify, etc. Most tutorials either use an iframe or don't use a UI component framework and add the script imports from the iframe html into the main app index.html like in this codebase. I've tried the latter using a-scene, etc., in a Vue template within ion-content component but experienced an issue where a-scene is always a vertical strip like in this post.

drewish commented 2 years ago

Phone model: iPhone 12 Pro OS and version: iOS 15.1 Browser and version: Safari Approximate location: Denver Colorado

raywu commented 2 years ago

@acommend check out this: https://github.com/AR-js-org/AR.js/issues/234

leonardoazzi commented 2 years ago

Phone model: iPhone 12 OS and version: iOS 15.0.2 Browser and version: Safari Approximate location: Porto Alegre, Brazil Status: content sticking since initialization https://www.youtube.com/watch?v=rEe_g1lQLeo

leonardoazzi commented 2 years ago

Phone model: iPhone XR OS and version: iOS 14.8 Browser and version: Safari Approximate location: Porto Alegre, Brazil Status: everything okay, content not sticking https://youtu.be/tv1ihRY1V7w

leonardoazzi commented 2 years ago

Phone model: iPhone XR OS and version: iOS 15.1 Browser and version: Safari Approximate location: Florianópolis, Brazil Status: everything okay, content not sticking

nickw1 commented 2 years ago

@leonardoazzi ok many thanks. Wonder if it's anything to do with the iPhone 12? Not being an iPhone expert I'm not sure, but if anyone has any ideas please share them :-)

leonardoazzi commented 2 years ago

@leonardoazzi ok many thanks. Wonder if it's anything to do with the iPhone 12? Not being an iPhone expert I'm not sure, but if anyone has any ideas please share them :-)

@nickw1 that's my hypothesis too. And I hope that's just with the 12. I asked some colleagues to test with different iPhones and different iOS versions. We'll be happy to share with you to help solve the issue. :handshake:

leonardoazzi commented 2 years ago

Phone model: iPhone 12 OS and version: iOS 15.1.1 Browser and version: Safari Approximate location: Porto Alegre, Brazil Status: after updating from 15.0.2 to 15.1.1, everything okay, content not sticking anymore. :open_mouth: https://www.youtube.com/watch?v=i9ZPHaW8xxk

drewish commented 2 years ago

Upgrading to 15.1.1 didn’t make any difference for me.

leonardoazzi commented 2 years ago

@drewish could you test if it's still sticking using our app? https://d1z9m593h18c12.cloudfront.net/camera?mode=sim

leonardoazzi commented 2 years ago

Phone model: iPhone X OS and version: iOS 15.1.1 Browser and version: Safari Approximate location: Porto Alegre, Brazil Status: everything okay, content not sticking.

leonardoazzi commented 2 years ago

Phone model: iPhone SE OS and version: iOS 15.1 Browser and version: Safari Approximate location: Porto Alegre, Brazil Status: everything okay, content not sticking.

nickw1 commented 2 years ago

@leonardoazzi ok many thanks. Wonder if it's anything to do with the iPhone 12? Not being an iPhone expert I'm not sure, but if anyone has any ideas please share them :-)

@nickw1 that's my hypothesis too. And I hope that's just with the 12. I asked some colleagues to test with different iPhones and different iOS versions. We'll be happy to share with you to help solve the issue. handshake

nickw1 commented 2 years ago

Sorry, didn't mean to close, pressed wrong key

nickw1 commented 2 years ago

@leonardoazzi ok many thanks. Wonder if it's anything to do with the iPhone 12? Not being an iPhone expert I'm not sure, but if anyone has any ideas please share them :-)

@nickw1 that's my hypothesis too. And I hope that's just with the 12. I asked some colleagues to test with different iPhones and different iOS versions. We'll be happy to share with you to help solve the issue. handshake

@leonardoazzi many, many thanks :-) Thanks for your input so far, very useful.

nickw1 commented 2 years ago

Hi @leonardoazzi and others, do you want to try this new build of AR.js to see if it resolves this problem?

https://hikar.org/loc-fix/aframe-ar-nft.js

l have made some fixes with the way the Web Mercator coordinates are handled. It no longer stores them relative to the original position, but as absolute world coordinates.

I have also turned off the maximumAge setting when watching the position, which has caused problems before. This may help.

Try using https://hikar.org/loc-fix/aframe-ar-nft.js as your AR.js source, and see if that works. Note you will need to use gps-projected-camera and gps-projected-entity-place, not gps-camera and gps-entity-place.

Tonic3 commented 2 years ago

Do you have a sample you have been testing against? I tried the above in some of my projects and still no luck getting geo to work. @nickw1. - might help if you could drop a glitch or codepen with an example.

I'm providing a bit more context. The model show sup but when regardless of if I use the proper GEO coordinate or not.

I've tested on iPhone 13 pro device safari & chrome

Here is what I noticed:

  1. Chrome will adhere to the position geo (meaning it will show the object near geo location) - albeit a bit jumpy
  2. Safari: Does not appear to work the object always appears regardless of location.

Hopefully we are getting close to solving this.

https://pmtest.glitch.me/test.html

Here is my code in case someone else wants to try it...

` <!DOCTYPE html>

GeoAR.js demo

`

nickw1 commented 2 years ago

Hi @Tonic3 this application is a good test: https://hikar.org/265/locfix.html

Download https://hikar.org/265/locfix.html and https://hikar.org/265/index.js, install these to your server, and then try out the example. It will use the 'loc-fix' version of AR.js which I mentioned above.

Wherever you are in the world (you do not need to provide your GPS coordinates), this will place a red box and a yellow box a short distance to your north. This is done dynamically using JavaScript.

To be honest I'm not too sure what the situation on Safari is: I don't have access to an iPhone or a Mac and I've heard rather variable reports for Safari. I think you need to agree to use the device sensors before it will work properly.

If you look at the location-based docs online https://ar-js-org.github.io/AR.js-Docs/ there is info on how to reduce 'shaking' effects, see https://ar-js-org.github.io/AR.js-Docs/location-based/#reducing-shaking-effects, but note the gpsMinTime parameter will not work in this version as it's a little unreliable.

brunoshine commented 2 years ago

Hi all

I've tested: Samsung Note 8 with Chrome and I get the sticky boxes :( iPhone 13 Pro Max wih 15.2 on Edge and Safari and I get the sticky boxes :(

Tonic3 commented 2 years ago

I too couldn't get this working yet :(

CarloCattano commented 2 years ago

This is still present , no matter what example I use . None of the provided examples seem to do what they are supposed to do , even AR js studio , content either sticks to the camera or it doesnt scale

nickw1 commented 2 years ago

@CarloCattano if you checkout the latest dev version of AR.js and try out the three.js location based example, does that work for you? It should show four boxes, a short distance to the north, south, east and west of you.

craze3 commented 2 years ago

Guys is there any update? This is still a problem on iPhone 13!

nickw1 commented 2 years ago

Have you tried the new-location-based components in AR.js 3.4.0? Have a look at the new-location-based example and try this on your device. It should add four cubes a short distance to the north, south, east and west of your current position.

orhanemree commented 2 years ago

it still does not work!

Phone model: Samsung Galaxy M12 OS and version: Android 11 Browser and version: Chrome Approximate location: Ankara, Turkey Status: with location-based, content sticking to camera position. with new-location-based, nothing displaying in scene

igorriti commented 1 year ago

Any news? Im having the same problem Phone model: Moto G9 OS and version: Android 11 Browser and version: Chrome Approximate location: Buenos Aires, Argentina Status: with location-based, content sticking to camera position. with new-location-based, nothing displaying in scene

orhanemree commented 1 year ago

I guess I found the problem with my device. It has neither gyro nor magnetic field sensor. So it can't get my cameras direction. (https://www.phonebunch.com/phone/samsung-galaxy-m12-4067/) image AR.js works fine devices which has those sensors.

Twissi commented 1 year ago

@CarloCattano if you checkout the latest dev version of AR.js and try out the three.js location based example, does that work for you? It should show four boxes, a short distance to the north, south, east and west of you.

This works for me, thanks!

Phone model: Samsung Galaxy M20 OS and version: Android 10 Browser and version: Chrome

brynbeaudry commented 1 year ago

Aframe Example from documentation still doesn't work

In this codePen where the object is added directly north: https://codepen.io/brynbeaudry/pen/qBMKjMN

3d Object cannot be seen. Phone model: iPhone 7 (All sensors supported) OS and version: iOs 15+ Browser and version: Chrome and Safari

Does this work on your phone outside?

nickw1 commented 1 year ago

@brynbeaudry not sure if this is an issue with the way Codepen works?

With your code on codepen, I get a message stating that deviceorientationabsolute and WebXR are disallowed. I do not get this on standalone AR.js apps, e.g. https://hikar.org/webapp.

nickw1 commented 1 year ago

... this is only on a mobile device. On desktop your codepen example works fine.

Platform-Group commented 1 year ago

I guess I found the problem with my device. It has neither gyro nor magnetic field sensor. So it can't get my cameras direction. (https://www.phonebunch.com/phone/samsung-galaxy-m12-4067/) image AR.js works fine devices which has those sensors.

Not in my experience, I have a poko f5 with all of those: https://www.phonebunch.com/phone/xiaomi-poco-f5-5021/

And yet AR.js / my phone seems to get true north wrong constantly so nothing is ever correctly aligned.

juanRabaa commented 1 year ago

I'm having the same problem. Objects appear to be placed relatively to where the camera is looking when opening the application. In my case, i have to turn the phone 90º over where the Y axis was at the beggining to find the objects. And they are stuck to the phone position.

I tried the aframe/examples/new-location-based/hello-world/index.html and I also tried adding an object north dynamically based on the first GPS position usin the code from the codepen left by brynbeaudry (note, I did not test it in the codepen, I've just grabbed the js from there and test it in my local deploy), got the same results. Also had a similar result with the ThreeJS example.

In this codePen where the object is added directly north: https://codepen.io/brynbeaudry/pen/qBMKjMN

Phone model: Samsung S23 OS and version: Android 13 Browser and version: Chrome (latest stable) Approximate location: Buenos Aires, Argentina

Platform-Group commented 1 year ago

So for me this was a mix of

I'm using look controls for manual calibration, which is a shame but it is what it is.

      <a-camera
        fov-change
        id="camera"
        gps-new-camera="gpsMinDistance: 5; simulateLatitude: 51.5; simulateLongitude: -0.08; simulateAltitude: 400;"
        far="1000000"
        look-controls-enabled="true"
        look-controls="enabled: true; magicWindowTrackingEnabled: true; touchEnabled: true; mouseEnabled: true"
      >
vizsatiz commented 1 year ago

I just raised an issue which is slightly different from this issue, but very much could be the same reason https://github.com/AR-js-org/AR.js/issues/566 Can someone check if its the same ?