AR.js
AR.js copied to clipboard
AR-js-org
Content 'sticking to' camera on certain devices
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).
Hi @nickw1, @nicolocarpignoli Can you please add the ground surface detection feature to ar.js? I have been finding other web-based AR library and I found the WebXR. https://veiled-truthful-gemini.glitch.me/ Please try this on your Android phone. It has a problem that is working only on the ARcore supported devices. It's detecting the ground surface. If you try that, you can know it. If you combine this feature with your location-based AR, we can solve this issue.
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) 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.
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
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.
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.
Phone model: iPhone 12 Pro OS and version: iOS 15.1 Browser and version: Safari Approximate location: Denver Colorado
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
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
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
@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 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:
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 could you test if it's still sticking using our app? https://d1z9m593h18c12.cloudfront.net/camera?mode=sim
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.
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.
@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 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.
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.
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:
- Chrome will adhere to the position geo (meaning it will show the object near geo location) - albeit a bit jumpy
- 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...
`
<!--
<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>
`
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.
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 :(
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
@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.
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.
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
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
