Content 'sticking to' camera on certain devices

[nickw1]

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]

#275 (comment)

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)
2.
iPhone 6s
IOS 13.6.1
Safari
3.
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]

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]

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 <#278 (comment)>, 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]

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]

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

[raywu]

@acommend check out this: #234

[leonardoazzi]

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]

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]

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]

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

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

[leonardoazzi]

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. 😮
https://www.youtube.com/watch?v=i9ZPHaW8xxk

[drewish]

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

[leonardoazzi]

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

[leonardoazzi]

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]

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]

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

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

[nickw1]

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

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]

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

`

<title>GeoAR.js demo</title> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <script src="https://hikar.org/loc-fix/aframe-ar-nft.js"></script>

  <!--
    <a-box color="yellow" 
      
    gps-projected-entity-place="latitude: 32.96706792228464; longitude: -96.80711206054076;"/>
  
  
  -->
  
  
  
  <a-entity
    gltf-model="https://cdn.glitch.me/64716dab-c558-4c50-8986-087bcff80957/hat.glb"
    scale="5 5 5"
    position="0 0 0"
            
   gps-projected-entity-place="latitude: 62.96706792228464; longitude: -96.80711206054076;"         
            
  >
  </a-entity>

  
  
  <a-camera gps-projected-camera  rotation-reader> </a-camera>
</a-scene>

`

[nickw1]

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]

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]

I too couldn't get this working yet :(

[CarloCattano]

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]

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

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

[nickw1]

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]

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]

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]

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/)

AR.js works fine devices which has those sensors.

[Twissi]

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

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]

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

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

[Platform-Group]

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/) 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]

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]

So for me this was a mix of

• The compass being objectively terrible and never having quite the right direction
• If using simulated latitude and longitude, the compass isn't used at all and aligns with the direction you're pointing the device instead

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]

I just raised an issue which is slightly different from this issue, but very much could be the same reason
#566
Can someone check if its the same ?