Location-based marker always over phone.

GitCLacey commented 4 years ago

When working with the magnemite example, no matter what geolocation is entered into the gps-entity-place, the magnemite is always located over the phone. I've tried version 1 and .9.2. Both were the same.

Phone: Samsung S8 also Ipad Using: Samsung Internet version 10.2.01.10

Here is my index.html code:

<!DOCTYPE html>
<html>
<head>

  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>GeoAR.js demo</title>
 <!-- <script src="aframe-master.min.js"></script>-->
  <script src='aframe-v0.9.2.min.js'></script>
<!--  <script src="aframe-look-at-component.js"></script>-->
  <script src='aframe-ar.js'></script>
  <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
  <script>
    THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
  </script>

</head>

<body style='margin: 0; overflow: hidden;'>

<a-scene
        vr-mode-ui="enabled: false"
        embedded
        arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'>

  <a-entity gltf-model="assets/magnemite/scene.gltf" rotation="90 90 90" scale="0.10 0.10 0.10" gps-entity-place="longitude:33.169536; latitude:-96.646072;" animation-mixer/>
  <a-camera gps-camera rotation-reader>
  </a-camera>
</a-scene>
</body>

index.txt

nicolocarpignoli commented 4 years ago

Hi, try with another browser like Chrome or Safari on iPAD. Please specify also every device and browser and OS versions.

GitCLacey commented 4 years ago

It won't access the camera in Chrome, even though I have Chrome set to ask permission.

wosevision commented 4 years ago

I can confirm this issue also occurs in Chrome, using a Google Pixel 2 (Chrome version 80.0.3987.87).

Tried with AFrame version 0.9.2, 1.0.3 and others between, same issue on all. Marker seems to be responding to some kind of location change (it jitters around sometimes when I walk, and still rotates appropriately) but it always appears absolutely positioned directly over the camera.

nicolocarpignoli commented 4 years ago

can I see a video of this? Works perfectly for me with aframe 0.9.2, chrome 80, android (huawei). @wosevision

wosevision commented 4 years ago

Sure @nicolocarpignoli, here's a fresh upload: https://youtu.be/kN4BVkEB-Bw Let me know when you're done with it so I can remove the video of my living room 😄

This is using:

<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.1.8/aframe/build/aframe-ar.js"></script>

nicolocarpignoli commented 4 years ago

Ok I got it. It should be a problem of timing, I think the element is rendered before the gps has been initialized and all data calculated. You can try adding the gps-entity-place by Javascript, so not directly on the HTML, and use a setTimeout of 1000 (to start) and see if it works. I thought I fixed that :/ Try and let me know (if 1000 is not enough, try more)

wosevision commented 4 years ago

I am currently adding the markers via JS, using the example material that provides both a 'static' and dynamically rendered set of markers – currently I have it set to just use the static markers, so:

    method = 'static';
    if (method === 'static') {
      // setTimeout(() => {
        let places = staticLoadPlaces(); // this just returns a plain array of markers
        return renderPlaces(places);
      // }, 1000)
    }

The setTimeout is where I tried putting it, with 1000 and 3000 as the time value, and both seemed to have no effect. Is this where you would suggest setting this timeout?

GitCLacey commented 4 years ago

I implemented it like this and there was no change. I also noticed that scale and rotation do not seem to change anything either.


<!DOCTYPE html>
<html>
<head>

  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>GeoAR.js demo</title>
 <!-- <script src="aframe-master.min.js"></script>-->
  <script src='aframe-v0.9.2.min.js'></script>
<!--  <script src="aframe-look-at-component.js"></script>-->
  <script src='aframe-ar.js'></script>
  <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
  <script>
    THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
    setTimeout(
            function(){ document.getElementsByTagName("a-entity")[0].setAttribute("gps-entity-place","longitude:33.169433; latitude:-96.646497;");
            }, 8000);
    //document.getElementsByTagName("a-entity")[0].setAttribute("gps-entity-place","longitude:33.169536; latitude:-96.646072;");
  </script>

</head>

<body style='margin: 0; overflow: hidden;'>

<a-scene vr-mode-ui="enabled: false" embedded arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'>
  <a-assets>
    <a-asset-item id="magnemite" src="assets/magnemite/scene.gltf" rotation="180 180 180"></a-asset-item>
  </a-assets>
  <!--  <a-entity gltf-model="balloonAni.gltf" rotation="0 0 0" scale="0.05 0.05 0.05" gps-entity-place="longitude:33.16; latitude:-96.07;" animation-mixer/>-->
  <a-entity gltf-model="#magnemite" animation-mixer/>
  <a-camera gps-camera rotation-reader>
  </a-camera>
</a-scene>
</body>ù

wosevision commented 4 years ago

Just had a chance to test this on an iPhone as well – iPhone 7, iOS 13.3.1. Same behaviour on both Safari and Chrome, latest versions of each.

nicolocarpignoli commented 4 years ago

@wosevision please provide full code so I can try (both js and html)

wosevision commented 4 years ago

Sure, it's all in one file for simplicity:

<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.1.8/aframe/build/aframe-ar.js"></script>

<script>
  window.onload = () => {
    // setTimeout(() => {
    let places = staticLoadPlaces();
    return renderPlaces(places);
    // }, 3000)

    function staticLoadPlaces() {
      return [{
        name: "Your place name",
        location: {
          lat: 43.903165, // change here latitude if using static data
          lng: -78.947519, // change here longitude if using static data
        }
      }];
    }

    function renderPlaces(places) {
      let scene = document.querySelector('a-scene');

      places.forEach((place) => {
        let latitude = place.location.lat;
        let longitude = place.location.lng;

        // add place name
        let text = document.createElement('a-link');
        text.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude};`);
        text.setAttribute('title', place.name);
        text.setAttribute('href', 'http://www.example.com/');
        text.setAttribute('scale', '15 15 15');

        text.addEventListener('loaded', () => {
          window.dispatchEvent(new CustomEvent('gps-entity-place-loaded'))
        });

        scene.appendChild(text);
      });
    }
  }
</script>

<body style='margin : 0px; overflow: hidden;'>
  <a-scene vr-mode-ui="enabled: false" embedded arjs>
    <a-camera gps-camera rotation-reader></a-camera>
  </a-scene>
</body>

</html>

nicolocarpignoli commented 4 years ago

that code works great for me. It's difficult to tell if I can't reproduce. I may try with some Apple's device, not sure if I will be able to.

Are you sure the GPS is retrieved correctly?

you can try to add this on the JS code somewhere, before doing anything, and see if it works:

var error = function(err){alert(JSON.stringify(err)};
var success = function(data){alert(JSON.stringify(data)};
 navigator.geolocation.getCurrentPosition(success, error);

manojahuja11 commented 4 years ago

Hi @nicolocarpignoli
I am having the same issue.

var error = function(err){alert(JSON.stringify(err)}; var success = function(data){alert(JSON.stringify(data)}; navigator.geolocation.getCurrentPosition(success, error);

Where should I put this code?

I have also attached a video showing the issue.

https://drive.google.com/file/d/160g9rgxgzHM_ARZqGpjHZy5YSoagsjkQ/view?usp=sharing

Thanks

nicolocarpignoli commented 4 years ago

please feel free to re open the issue on new AR.js repository: https://github.com/AR-js-org/AR.js/

jeromeetienne / AR.js

Location-based marker always over phone. #723