Can AR.js be used to implement extended tracking in Augmented Reality on the web?

Currently, I am working on a web-based project using THREE.js and AR.js for augmented reality.

One issue I have encountered is that when the "marker" moves out of view of my camera, the augmented reality image either disappears or remains stuck on the edge of the screen.

I came across Vuforia version 2.8 which seems to have fixed this problem. You can watch the details here: Vuforia SDK 2.8: Now with Extended Tracking

I am curious if there is a similar solution available for web-based augmented reality using AR.js?

Answer №1

Regrettably, this cannot be achieved. A similar query was raised on the GitHub tracker for AR.js:

Frankly, the only viable alternative to having marker images constantly in view for AR content is SLAM-based AR. Examples include ARKit or ARCore (previously Tango). While these APIs are not accessible for browsers, those interested in WebAR without markers can explore:
https://github.com/google-ar/WebARonARCore
https://github.com/google-ar/WebARonARKit
Otherwise, your best option is to have markers in view of the camera at all times (if that's the query). As a side note, I have not experimented with AR.js with multi-marker images (I have since shifted to the options mentioned above).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a maximum size limit for the Fabric.js Path Array?

Has anyone tried plotting a line graph using Fabric.js and encountered issues with the fabric.Path? I've noticed that it stops drawing after 8 segments even though I have attempted different methods like loops and individually coding each segment. co ...

javascript svg fabricjs

Next.js Refresh Screen

Is there a way to refresh my client's web page from the server at a specific time? I need the client's page to be refreshed at 12pm, and although I'm using a scheduler, it doesn't seem to be automatically refreshing the web page on the ...

javascript web next.js web-applications next.js13

Passing a variable via routes using Express

app.js var express = require('express'); var app = express(); var textVariable = "Hello World"; var homeRoute = require('./routes/index'); app.use('/', homeRoute); index.js var express = require('express'); var ...

javascript node.js express

Developing user registration and authentication using Backbone.js in conjunction with Django Rest Framework

In the process of developing my app, I am utilizing backbone.js for the frontend and django-rest-framework for the backend. My goal is to enable user registration, login, logout functionality, and be able to verify whether a user is logged in using backbon ...

javascript django backbone.js django-rest-framework

Could this truly be jQuery in action?

Once more, here is some code snippet: audioElement.addEventListener('ended', function() { $('span#pause').fadeOut('slow'); $('span#play').delay(1500).fadeIn('slow'); }); I believe that "addEventLi ...

javascript jquery

Transferring files and information using the Fetch API

I am currently working on a React application and I have defined the state of my application as shown below: const [book, setBook] = useState({ title: '', cover: {} numberPages: 0, resume: '', date: date, }); The & ...

javascript json reactjs

Include a new class in the classList of an element at a specific index

Is it possible to add a class to a specific position in order to maintain a certain order, especially when it goes against the logic that targets the class based on its position? link.closest('item').classList.add('c-class') // Contrad ...

javascript html

Tips for positioning an advertisement at the center of a full-screen HTML5 game

I am struggling to find a way to perfectly center my advertisement in a fullscreen HTML5 game. The game automatically expands to fullscreen when played, and I want the advertisement to always be positioned in the center, regardless of whether the game is b ...

javascript css html

Store the selected checkbox values in an array when submitting in Ionic

One issue I am facing is that the checked checkboxes are returning true instead of the value of input (type="checkbox"). Array displaying responded checked or unchecked items I am unable to store this data in an array as needed. Additionally, I cannot sp ...

javascript angular typescript ionic-framework

Strategies for extracting methods and refactoring to a separate file for better reusability

Still relatively new to the JQuery/javascript realm, I've put together a functional jqgrid with a datepicker and custom control (using jquery auto complete) by piecing together code samples I came across online. This code has been added to a T4 templa ...

javascript jquery jqgrid refactoring jqgrid-asp.net

Stop processing the current websocket connection once a new websocket request is received

Currently, I am utilizing the npm ws module (or its wrapper named isomorphic-ws) for establishing a websocket connection. NPM Module: isomorphic-ws This setup allows me to retrieve an array of data from a websocket++ server situated on the same local mac ...

javascript npm websocket ws

Having issues with the environmental value not functioning properly within the .js file for Next.js

Currently, I am in the process of testing an app that features a widget which relies on an API key within a script. This script needs to be placed within my <head> tags. My .js file is located in my public folder and is being imported into my layout. ...

javascript next.js environment-variables

"Bringing in a Nunjucks Macro - How to Easily Use It

I've been working on a script that renders a nunjucks contact.html template with the following code: let fs = require('fs'); let nj = require('nunjucks'); var contact = fs.readFileSync('./src/contact.html',&a ...

javascript html node.js nunjucks

Ways to Soothe Long Polling

Currently, I am developing a basic chat feature using AJAX in a function that triggers a setTimeout call to itself upon successful execution. This occurs approximately every 30 seconds. While this setup serves its purpose, I am seeking a more immediate not ...

javascript jquery ajax long-polling

Syncing OrbitControls rotation with camera rotation for improved navigation

Currently utilizing @react-three/fiber to incorporate first person controls (WASD & cursor keys) along with OrbitControls for scene navigation. Mirroring PointerLockControls, I've successfully implemented the WASD controls by updating the target vecto ...

reactjs three.js react-three-fiber orbitcontrols

What is the best way to hide the input field when there are multiple parent classes present?

I am currently implementing dynamic fields with jQuery and everything is functioning correctly. The problem arises when I attempt to remove these fields. After searching on Google and browsing past questions on StackOverflow, I noticed that everyone seems ...

javascript jquery html

When trying to implement a dark/light theme, CSS variables may not function properly on the body tag

Currently, I am in the process of developing two themes (light and dark) for my React website. I have defined color variables for each theme in the main CSS file as shown below: #light{ --color-bg: #4e4f50; --color-bg-variant: #746c70; --color-primary: #e2 ...

javascript html css reactjs

Confirming the existence of a folder with AngularJS

Currently, I am attempting to determine if a folder exists so that I can make decisions on which files to include using ng-include. This is what I have so far: $scope.isVisible = { buttons: checkForClientOverwride('buttons'), it ...

javascript angularjs directory

Encountering a JavaScript runtime error while trying to access and interpret JSON

Currently, I'm facing a challenge with converting a C# list of string types into a JSON object. The issue arises when trying to read this JSON object later in JavaScript. On the other hand, the process seems to work fine when dealing with a C# list of ...

javascript c#json razor

Modifying a section of the source name using jQuery continues to occur repeatedly when the window is resized

I have written a piece of code that is designed to identify the src attribute of all images within a specific div and modify the src name when the window width is less than 900 pixels. The code works perfectly when the page is refreshed, but I encounter an ...

javascript jquery html css

JavaScripter Q&A