search

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

NFT Image Tracking size and position problem #192

Open suxscribe opened 4 years ago

suxscribe commented 4 years ago

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

What is the current behavior? When using NFT Image Tracking the augmented object (video) is not positioned within the borders of the marker. It could be near the NFT marker, it could be aside, sometimes it could be off the screen borders.

The size and position of augmented object is different on each device with different camera / screen resolution. It makes Image Tracking totally unusable, because there will not be consistent result on each and every device. If the current behavior is a bug, please provide the steps to reproduce. Use the official NFT example:

  1. Open https://ar-js-org.github.io/AR.js/aframe/examples/image-tracking/nft-video/ with camera device
  2. Scan this image: https://ar-js-org.github.io/AR.js/aframe/examples/image-tracking/nft-video/pinball.jpg

My results:

  1. Scanned with my webcam from smartphone screen. Here the video object is aside the marker and it is relatively small. nft-screen-webcam

  2. Scanned with smartphone from PC monitor. The video object is huge and is positioned different than in other example 2020-11-05 10-11-48

Please mention other relevant information such as the browser version, Operating System and Device Name Also tested on my local server with AR.JS 1.0.4. Windows 10, Firefox 82. Xiaomi MI A2, Opera 62, Google Chrome 86

What is the expected behavior? I expect the augmented object to be the same size and position on each and every device this example is used.

For now i haven't found any information in docs or anywhere on how to correctly position the object according to NFT marker size and position.

If this is a feature request, what is motivation or use case for changing the behavior?

JamesBotterill commented 4 years ago

This is a known issue and is currently in development, hopefully @kalwalt will be able to provide an update on his progress soon

ragavendranbala commented 3 years ago

@JamesBotterill @kalwalt is this fixed? i'm still facing the issue. tested on 3.0.0 version still i'm facing that issue. is there is any other working build?Thanks in advance

everythingability commented 3 years ago

I think I'm having the same problem, but don't know how to describe. It's like the pixel density is all wrong (he guesses).

It's like the camera is on zoom x 4... and so when trying to scan the T.Rex using my phone from Laptop screen, I'm like only seeing a few keys rather than the whole laptop, and the dino model loads and shows but because it's so zoomed in, it sort of flies about too fast to locate...

Here's a video grab from my OnePlus 6T phone. https://photos.app.goo.gl/LhNNAY8L2GaZz6p4A

everythingability commented 3 years ago

When I load my file with a browser I get this in the console... don't know if it helps.

AR.js 3.3.1 - trackingBackend: artoolkit
aframe-ar-nft.js:2149 ARjs.Anchor - changeMatrixMode: modelViewMatrix / markersAreaEnabled: false
aframe-ar-nft.js:396 THREEx.ArMarkerControls: 'markersAreaEnabled' is not a property of this material.
setParameters @ aframe-ar-nft.js:396
aframe-ar-nft.js:2 [info] Allocated videoFrameSize 1228800
put_char @ aframe-ar-nft.js:2
aframe-ar-nft.js:2 [info] Pattern detection mode set to 1.
put_char @ aframe-ar-nft.js:2
aframe-ar-nft.js:2 [info] Pattern ratio size set to 0.500000.

The last line looks suspicious to me...

suxscribe commented 3 years ago

@everythingability

It's like the camera is on zoom x 4... and so when trying to scan the T.Rex using my phone from Laptop screen, I'm like only seeing a few keys rather than the whole laptop, and the dino model loads and shows but because it's so zoomed in, it sort of flies about too fast to locate...

I had same issue in Opera on Android. Try to add this to the head: <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

everythingability commented 3 years ago

Thank you that worked, but apart from a few sizing issues, it now doesn't trigger the model anymore.

everythingability commented 3 years ago

It did load the media, but at close-up/distance I couldn't get the dino to show.

suxscribe commented 3 years ago

@everythingability check the console for "[info] Tracked page ....." messages. Now it looks like you're facing the issue i described in the first post

JamesBotterill commented 3 years ago

@JamesBotterill @kalwalt is this fixed? i'm still facing the issue. tested on 3.0.0 version still i'm facing that issue. is there is any other working build?Thanks in advance

@kalwalt is still working on it, it's a bit update to the underlying lib to enable it to centre it too the image marker. you can see the PR on here if you'd like more information.

danielok1993 commented 3 years ago

@kalwalt & @JamesBotterill it would be fantastic to achieve something like this with upcoming PR: https://www.8thwall.com/8thwall/magic-photos-aframe

JamesBotterill commented 3 years ago

@danielok1993 agreed, not seen any updates on this in a while not sure if @kalwalt or @nicolocarpignoli are able to provide anything as it's been quiet for a while.

kalwalt commented 3 years ago

@danielok1993 @JamesBotterill it would be fantastic, but at the moment i haven't find a efficient solution. I haven't do any progress. I have limited free time, i am also more involved in our github organization and i find difficult to work in both project. Anyway we are trying to improve this issue in our projects, I am sure if we find a good one we can implement also in Jsartoolkit5 and AR.js.

Adolar13 commented 3 years ago

Hey @kalwalt, any update on this?

foqueiroz commented 3 years ago

Any previous versions that could be used?

rainerlonau commented 3 years ago

Just tried out nft for the past hours. Used vuforia, wikitude and metaio before. Happy that I found this thread here! I mean basically "Image Tracking totally unusable" sums it up. To position an object correctly (centered) on the image is the main requirement for image tracking. No offense, but this should be a big prio or it should be mentioned that nft (image tracking) is WIP or beta or something.

jrDev1 commented 3 years ago

Currently messing around with this on day 2 with issues and stumbled upon this thread now after searching google. Is this really not working the way it should? I thought this feature was in a condition for development use but the positions are WAY off. Is this abandoned now?

Thanks, jrDev

suxscribe commented 3 years ago

I've switched to another library by @kalwalt, https://github.com/webarkit/Arnft. Works like charm, positioning is correct.

jrDev1 commented 3 years ago

I've switched to another library by @kalwalt, https://github.com/webarkit/Arnft. Works like charm, positioning is correct.

Thanks! Was using Ar.js because the community added Unity Engine support. This looks cool but I wouldn't know how to convert to Unity support. Found Zapworks; it's not free but the hobby account gives everything and it works like a charm so far to test everything through Unity! Their native app is quite awesome too! I am planning to do something with my projects so I might be going this route since it's this easy with support and no hassle.

Thanks, jrDev

mobcoder-ashu commented 3 years ago

Hello @suxscribe, how you are determining image width / height ? pls suggest something to me

suxscribe commented 3 years ago

Hello @suxscribe, how you are determining image width / height ? pls suggest something to me

Take a look at https://github.com/webarkit/Arnft. It's possible to set width / height with it

mobcoder-ashu commented 3 years ago

yeah, but how you find the width/height of the object

Hello @suxscribe, how you are determining image width / height ? pls suggest something to me

Take a look at https://github.com/webarkit/Arnft. It's possible to set width / height with it

Yeah, but its not accurate... how you find the width/height of the image, that you are seeing through camera, I mean in order to superimpose video over that image, we need exact height and width of the image after that only we can draw/play something over it

RBOSAMIYA9 commented 3 years ago

Hey, I faced same issue while trying ar.js, @kalwalt any updates on this?

wstyler commented 3 years ago

Same issue here, position of video hover marker is not simple and really unstable. Any solutions for get result similar to 8th example posted ? Isn't possible to set 4 corner as "container" of video playback? Thanks

suxscribe commented 3 years ago

yeah, but how you find the width/height of the object

No need to know exact size of the image. The final size of your augmented image is related to resolution of NFT marker, resolution of video streamed from your camera and size of the image itself. So I guess for know it's just trial and error to get correct size

Bobbianss commented 1 year ago

Hello, any updates?

foqueiroz commented 1 year ago

Hello, any updates?

I'm not sure it will solve your problem, but I found mindar.js works quite well on image tracking: https://hiukim.github.io/mind-ar-js-doc/

Bobbianss commented 1 year ago

Hello, any updates?

I'm not sure it will solve your problem, but I found mindar.js works quite well on image tracking: https://hiukim.github.io/mind-ar-js-doc/

Hey, thanks! I already know a fair bit about MindAR. But right now, I'm hustling to create a list of all the augmented reality libraries on the web that exist. I also want to see how effective they are, one after another. So, I'm looking for anything that involves augmented reality on the web. If you know of any others, bring it on! 😄

xinru-liu commented 1 month ago

Just want to provide a solution I used: detect device type & screen aspect ratio. for different device types, camera fov is different, so modify the fov parameter accordingly. for example I have iPhone fov =60, and android fov=70