jeromeetienne / AR.js

Efficient Augmented Reality for the Web - 60fps on mobile!
MIT License
15.79k stars 2.22k forks source link

Display object when marker not within camera view #213

Closed Xdecosee closed 6 years ago

Xdecosee commented 6 years ago

Currently I'm working on an AR project. I have modified codes from three.js measure-it.html example and from this stackoverflow answer (https://tinyurl.com/threejsobjectpath).

This is the result that I have and you can view from here: https://goo.gl/kvgNgh

Based on what I have, when two markers within the camera view, a line will be formed between the two markers. When a marker is not within the camera view, all the AR content are gone. What I aim to have multiple static markers in a room and user can interact with these markers by moving their phone camera around. These static markers can be far apart from each other in a room.

The visual aim of my project is similar to this TCP/IP Networking Simulation that uses Unity/Vuforia Extended Tracking : https://youtu.be/0pHJWjG4-aQ (from 0:26-1.10)

My question is if THREE.js/AR.js is able to do similar stuff as the simulation above, such that when the camera moves away from any markers, the AR content (e.g. lines) generated previously do not all disappear away and kept in the environment while the user moves the camera around?

patricknelson commented 6 years ago

...such that when the camera moves away from any markers

This doesn't happen in your example video. Honestly, if you want to be able to have AR content without marker images constantly present within view of the camera, there's really only one alternative: SLAM-based AR. e.g. ARKit or ARCore (formerly Tango). These API's are not available for browser, but if you're interested in WebAR without markers, look into:

https://github.com/google-ar/WebARonARCore https://github.com/google-ar/WebARonARKit

Otherwise, this is your best option if you can handle having markers in view of the camera 100% of the time (if that's what you're asking about). p.s. I've not tried AR.js w/ multi-marker images yet (I've since moved away from it in favor of the above).