Unresolved issue from previous repository: Location-based marker always over phone

ediejm commented 3 years ago

Do you want to request a feature or report a bug? Bug/issue

What is the current behavior? Objects load in the centre of the scene rather than at specific gps location.

This was the previous question I came across but it appears to not have been answered: https://github.com/jeromeetienne/AR.js/issues/723

I think it has something to do with the objects loading before the GPS coordinates are found? Not sure how to resolve this.

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

I have used the exact example code here under "Location Based Example": https://ar-js-org.github.io/AR.js-Docs/

And added this:

<a-box material="color: yellow" gps-entity-place="latitude: <your-latitude>; longitude: <your-longitude>" position="0 30 0"/>

From here:

https://ar-js-org.github.io/AR.js-Docs/location-based/#gps-entity-place

I haven't made any changes of my own yet apart from inputting the correct lat and long for my current location.

Please mention other relevant information such as the browser version, Operating System and Device Name

Safari iPhone 6s iOS 14.3

What is the expected behavior?

The box appears in the place provided by the gps-entity-place property rather than on top of the camera.

Thanks!

Nanocontroller commented 3 years ago

I'm having the exact same issue. When I open the page in the phone, the augmented objects are fixed to the camera and not to a gps location.

Used the code sample and modified the GPS location to my own coordinates. Tested on iPhone 10 with iOS 14.4 Test Android gives same result.

<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>GeoAR.js demo</title>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src='../../../build/aframe-ar-nft.js'></script>

</head>

<body style='margin: 0; overflow: hidden;'>
    <a-scene
        vr-mode-ui="enabled: false"
        embedded
        arjs='sourceType: webcam; debugUIEnabled: false;'>

        <a-box scale="15 15 15" position="0 200 0" gps-entity-place="latitude: 37.4837983; longitude: -122.2280855;"></a-box>

        <a-sphere 
            gps-entity-place='latitude: 37.4837983; longitude: -122.2302742;'
            radius="1.25" color="#EF2D5E"></a-sphere>

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

I hope this provides enough information.

nicolocarpignoli commented 3 years ago

Hi guys. I tried your code and works perfectly on my iPhone 6 (old ios 12) and also Android 10.

Might be the GPS data? The other day, inside an office, I got the same problem and could not see anything. Now I'm also indoor but I can see the content, with the same code and same devices.

Try to go also outdoor where ideally GPS is working best.

nicolocarpignoli commented 3 years ago

To be clear, I also tested this and works (replace lat/long before using it):

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>GeoAR.js demo</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

</head>

<body style='margin: 0; overflow: hidden;'>
    <a-scene
        vr-mode-ui="enabled: false"
        embedded
        arjs='sourceType: webcam; debugUIEnabled: false;'>

        <a-box scale="15 15 15" look-at="[gps-camera]" position="0 0 0" gps-entity-place="latitude: <your-lat>; longitude: <your-long>;"></a-box>
        <a-camera gps-camera rotation-reader>
        </a-camera>
    </a-scene>
</body>

smosgasbord commented 3 years ago

Hi, @nicolocarpignoli I'm having a related problem with this, I'm using this last code you posted. The problem we got is it updates the side of model in a harsh way, when trying to see the model from another viewpoint (side-back or front). When you move the camera to see the model from the side, it disappears and then appears back. Also, the object is not still on an unmovable(? place, it stays on a minimal radius (is this expected?) moving with the user through this area, you can see it shrinking or getting bigger as soon as you move further or closer, but the place is never the same. The bug issued that describes the camera zooming still occurs when changing the meta viewport to 0.6 or 1 or eliminating the embedded attribute in the a-scene (as suggested on the issue).

Details:

phone: huawei p20 pro chrome 89.0.4389.105 android 10 hosted on glitch and custom

Interaction- recording:

https://drive.google.com/file/d/17fCMgNlIKgqnKSsJAFjqEMI1nT9Reb6G/view?usp=sharing

Here the code:

https://jsfiddle.net/m316xrbf/

Thanks in advance :)

AR-js-org / AR.js