ar-js-org/ar.js

Image tracking, Location Based AR, Marker tracking. All on the Web.

ar.js's Issues

Use NFT descriptors url relative to .html of (as it works for other assets used by the web app)

View width and height not correct. But if you resize it gets fixed.

Do you want to request a feature or report a bug?
Possible bug

What is the current behavior?
Sometimes, not always, when I open in the browser, the camera view will be small. If I open and close the console, then it will cover the whole browser (as it was supposed to). A small fix that works some times, is to set a timer, around 2 seconds, and resize after the 2 seconds.

If the current behavior is a bug, please provide the steps to reproduce.
I am using wamp as a server. By opening the browser it happens.

What is the expected behavior?
It is expected that the camera view will be the size of the complete view width and height from the beginning.

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

Please mention other relevant information such as the browser version, Operating System and Device Name
Chrome Version 80.0.3987.132
Windows 10.
Also tried in Mozilla latest version and it happens the same.

Web Assembly support for NFT

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

Enhancement request

What is the current behavior?

AR.js (jsartoolkit5 to be precise) can use Web Assembly for NFT (image tracking).
It has better performances: https://docs.google.com/spreadsheets/u/1/d/1FykKO1dkPz0zUVuJCOPA2tHIs0Zs3nUybjLJcKihfs4/edit#gid=0

We should think of using it as default, in the future @kalwalt

Hiro pattern not found in aframe example

Do you want to request a feature or report a bug?
It's a bug: hiro pattern is not loaded see the error reported in the section below.

What is the current behavior?
Open the marker-events.html example in the console you will see:
aframe-ar.js:1622 GET http://localhost:3000/examples/marker-training/examples/pattern-files/pattern-hiro.patt 404 (Not Found)
This happens running on localhost, not tested on codepen or other env.
If the current behavior is a bug, please provide the steps to reproduce.
See the comment above.

Please mention other relevant information such as the browser version, Operating System and Device Name
Tested on Desktop Ubuntu 18.04.03
What is the expected behavior?
Pointing the Hiro marker to the camera, it should be showed a cube and a rotating torus.
If this is a feature request, what is motivation or use case for changing the behavior?
No feature request, only fixing a bug.

Pre-processing of camera image

see: jeromeetienne/AR.js#630

Detect when the user points the camera to a specific location to trigger an event

jeromeetienne/AR.js#733

[Android : Chrome, Firefox] navigator.mediadevices not present ( fixed format )

Do you want to request a feature or report a bug?
reporting a bug probably

What is the current behavior?
After serving the template index locally and checking on the mobile browser im getting a message that my browser doestn have navigator mediadevices ( tested on chrome and firefox )
If the current behavior is a bug, please provide the steps to reproduce.

• copy and paste the example into index.html
• serve locally
• check on android

Using the template from readme so thats plausible.
Please mention other relevant information such as the browser version, Operating System and Device Name
Android Chrome and Firefox
What is the expected behavior?
It actually starts and shows feed from camera after asking for permissions
If this is a feature request, what is motivation or use case for changing the behavior?

Add possibility to choose which Camera use for AR for multi-camera devices

There were several issues opened on AR.js old repository, about problems on Chrome auto-detection of camera to user for web ar. No issues on Firefox that let you choose the camera, as a prompt. I think also Safari give problems.

See:

jeromeetienne/AR.js#661
jeromeetienne/AR.js#369
jeromeetienne/AR.js#619
jeromeetienne/AR.js#581
jeromeetienne/AR.js#558
jeromeetienne/AR.js#86
jeromeetienne/AR.js#631

Test examples for Aframe, three.js, all features (GPS + marker + NFT)

Because the file structure is changed, all the examples need to be tested (Aframe and Three.js).
We will report here if we found some bug or issue.
Note: test the master branch !
Thank you!

Raycaster is off center or scaled based on window size

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

What is the current behavior?
OnClick events and the raycaster will give the wrong scaling of the model depending on the size of the screen resulting in missing the target when it should hit or hitting the target when it should miss.
If the current behavior is a bug, please provide the steps to reproduce.
add a mouse down event in the basic example then click next the torus knot or just above/below it

	function mousedown( event ) {
		var raycaster = new THREE.Raycaster();
		var mouse = new THREE.Vector2();
		mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1
		mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1
		event.stopPropagation(); 
		raycaster.setFromCamera( mouse, camera );
		var intersects =raycaster.intersectObjects([mesh],true);
		console.log(intersects);
		if (intersects.length>0) {
			alert("clicked");
		}
	}
	window.addEventListener( 'mousedown', mousedown, false );

Please mention other relevant information such as the browser version, Operating System and Device Name
Chrome on PC and Phone
What is the expected behavior?
Accurate mousedown events causing the correct
If this is a feature request, what is motivation or use case for changing the behavior?

Keep content on screen even when not tracking marker

feature request from: jeromeetienne/AR.js#313

visual glitches in 3d objects on mobile chrome and firefox

Downloaded the latest one

Do you want to request a feature or report a bug?
Buggity

What is the current behavior?
Tried both on mobile chrome and firefox
Currently on Samsung Galaxy s8, 3d objects have weird flickering glitches probably caused by something in compositing of the scene on video feed.
Happens also on desktop and with the examples provided from readme ex with Trex model.

If the current behavior is a bug, please provide the steps to reproduce.
1.entered the codepen.io example on mobile browser.
2. Saw that

The one from the readme of ar.js

Yes on the Trex one.
Please mention other relevant information such as the browser version, Operating System and Device Name
Android Samsung Galaxy S8 Firefox and chrome.
What is the expected behavior?
The Tris on 3d objects shouldn't flicker
If this is a feature request, what is motivation or use case for changing the behavior?

Readme refactor for v3

Pass an HTML element to initialize AR.js container

from: jeromeetienne/AR.js#407

Check if mobile before activating camera.

see: jeromeetienne/AR.js#615

Cable centered position of content in NFT inside AR.js core

Content is placed at 0,0 position. Can be useful if it's present at the center of the marker. We have to understand if this has to be fixed on jsartoolkit5 side (better) or on AR.js core.

Mouse click/touch on object not working with Aframe 0.9.0 and later

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

What is the current behavior?
Aframe-ar issue: Mouse click/touch on objects using is not working with aframe v.0.9.0 and more (working okay with v0.8.0).

If the current behavior is a bug, please provide the steps to reproduce.
Use this code.
It is working okay with
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
but not with
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>

Please mention other relevant information such as the browser version, Operating System and Device Name
Tested on Laptop (Mac) with Chrome/Firefox and Mobile (iPhone), with Safari.

What is the expected behavior?
Click working.
If this is a feature request, what is motivation or use case for changing the behavior?

wrong path in cameraParametersUrl in threex-artoolkitcontext.js

Do you want to request a feature or report a bug?
Trying to fix another bug #43 i found this one.

What is the current behavior?
in threex-artoolkitcontext.js there is this line:

AR.js/three.js/src/threex/threex-artoolkitcontext.js

Line 21 in c2a780a

cameraParametersUrl: ARjs.Context.baseURL + 'parameters/camera_para.dat',

but it is wrong because point to non existent path.

If the current behavior is a bug, please provide the steps to reproduce.
Do this, in dev example comment out this line:

AR.js/three.js/examples/dev.html

Line 101 in c2a780a

cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',

in this way you will force to use the path from threex-artoolkitcontext.js, and you will receive this error:

artoolkit.api.js:1603 GET http://localhost:3000/three.js/parameters/camera_para.dat 404 (Not Found)
artoolkit.min.js:1 Error: supplied file does not appear to be an ARToolKit camera parameter file.
artoolkit.min.js:1 loadCamera(): Error loading parameter file /camera_param_0 for camera.
artoolkit.min.js:1 Allocated videoFrameSize 172800
artoolkit.min.js:18 Uncaught 
ExitStatus {name: "ExitStatus", message: "Program terminated with exit(0)", status: 0

to solve we need to change the path for cameraParametersUrl in this way:

cameraParametersUrl: ARjs.Context.baseURL + '../data/data/camera_para.dat',

Please mention other relevant information such as the browser version, Operating System and Device Name
Tested on Desktop localhost (ubuntu 18.04.03)
What is the expected behavior?
It should load the default camera parameters.

Self host Corsanywhere service

We are using corsanywhere service in order to handle cross-origin issues with codepens and similar. This happens when a web app based on AR.js is requesting external resource, from another server for example (e.g. codepen requesting stuff from Github).

There is a limit to the requests per hour for the free version of corsanywhere we used on codepen's examples.

This is the solution: to self host it on a server. See: https://github.com/Rob--W/cors-anywhere#demo-server

NFT on iPad not working

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

What is the current behavior?
Ar.js with NFT does not work on iPad

If the current behavior is a bug, please provide the steps to reproduce.
I tested AR.js with NFT on Andorid and everything works fine. On an iPad with the latest iOS Version, the Marker is loaded but cannot be detected. I used both NFT examples from the AR.js repository. The NFT examples also have a low Frame Rate or respectively they're very laggy.

Please mention other relevant information such as the browser version, Operating System and Device Name
Device: iPad
OS: iPadOS
Browser: Safari

What is the expected behavior?
It should work as on iPhone or Android Devices.

[Android : Chrome, Firefox] navigator.mediadevices not present

After serving the template index locally and checking on the mobile browser im getting a message that my browser doestn have navigator mediadevices ( tested on chrome and firefox )

libs from cdn

Cable smoothing on NFT inside the core

As for now, smoothing has to be defined by the user. This is not so bad, as the user can control it, but with current jsartoolkit5 technology a basic smooth has to be provided, otherwise content is flickering too much. We can think of cable it as an option, inside AR.js or directly on jsartoolkit5.

Object is jittery the first time when using Safari on an iOs Device

see: jeromeetienne/AR.js#621

Location-based AR Maximum Render Distance

see: jeromeetienne/AR.js#683

Import issues from old repository

Manually import (sigh! do not have permissions to automatically do that..) all issues that are still valid, on this repository.

Make aframe-ar work properly with aframe-physics

Do you want to request a feature or report a bug?
Feature

What is the current behavior?
aframe-ar and aframe-physics-system are not behaving well together. Here is an example (try with hiro marker) and the code.
I have a <a-scene physics> within a <a-marker preset="hiro">, the goal is to have a gravity applied to the objects of the scene, scene that is relative to the marker AND NOT relative to the outer <a-scene embedded arjs> scene. Thus, when I flip the marker 90degrees, objects are not "falling", unlike in this example.
It kinda work but the fact of having 2 with one camera result in an initial error message and a lot of instability, the camera seemingly jumping from one scene to another when the hiro marker is not visible.

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

Please mention other relevant information such as the browser version, Operating System and Device Name
Same behavior in Mobile (Safari) and Mac (Safari, Chrome)

What is the expected behavior?
There is no error message and the AR objects disappear when the marker is not visible.

If this is a feature request, what is motivation or use case for changing the behavior?
Having Physics will open a full new range of possibilities for aframe-ar: new games, new interactive applications,... I feel it would be a beautiful addition to the current framework.

(A-frame AR) Stream 3d Canvas/a-canvas, to share between 2 users

So far i was able to capture the video component and share it with the other user with the first code below.
But if i try to the same method with the canvas for the 3d stuff it simply return a trasparent image (PNG) or a black background(jpeg), you can see in the second code block.
I also tried to capture like a screen shoot, but it destroy the experience on the user that sends the data, as you can see in ther third code block.
Is there a way to do this?

Also asked in:
https://stackoverflow.com/questions/60544827/a-frame-ar-stream-3d-canvas-a-canvas-to-share-between-2-users

Also reported in:
aframevr/aframe#4512

A-Frame Version:1.0.4
Platform / Device:Windows
Reproducible Code Snippet or URL:

let videoComponent = $("video");
let restreamCanvas = $("#newCanvas")[0];
let context = restreamCanvas.getContext('2d');
context.drawImage(videoComponent[0],0,0, restreamCanvas.width, restreamCanvas.height);
let videoURL = restreamCanvas.toDataURL('image/jpeg', 0.5);
let socket = new WebSocket(url);//url defined in var, it will send text
socket.send(videoURL);

let canvasComponent = $(".a-canvas");
let URLGraphic = canvasComponent .toDataURL('image/png', 0.5);

//html
<a-scene embedded screenshot="width: 640; height: 320">
//javascript
let prespectiveCanvas = document.querySelector('a-scene').components.screenshot.getCanvas("perspective");
 let URLGraphic = prespectiveCanvas.toDataURL('image/png', 0.5);

Blurry marker sting produced by threex-arpatternfile.js (pr)

I want to add pull-request to fix blurry marker parts generated by threex-arpatternfile.js (will do it tomorrow if everything is ok with this change).

What is the current behavior?
i visualized marker string onto canvas and found that rotated versions are blurry.
here on screenshot first three small images are channels of unrotated marker image, and then goes rotated 90deg and it was blurry:

What is the expected behavior?

zoomed version:

Update base URL for artoolkit.worker.js

This is a bug?

Currently the base url in aframe-ar-nft points to the old repro, this needs to be updated to ensure file is downloaded from the new repro.

Current when attempt to use the aframe-ar-nft version you get a error due to file not being available

The file is loaded without error

Handle multiple NFT Markers

This is a placeholder for the issue that is in the jsartoolkit5 core: kalwalt/jsartoolkit5#40

Create a new AR.js package on NPM

Marker based and Location based elements does not work together

see: jeromeetienne/AR.js#702

NFT should work on desktop too

NFT has to work on desktop too. A matrix scaling issue is probably prevent this to work.

simulateLongitude/Latitude/Altitude does not seem to work

jeromeetienne/AR.js#752

Integrations with JS Framework

continuing discussion from: jeromeetienne/AR.js#537

Size attribute on <a-marker> does not have any effect

see: jeromeetienne/AR.js#720

Implement some kind of indoor positioning for location based feature

Some ideas at: jeromeetienne/AR.js#623

A-FRAME AR change webcam viewport size can't be changed

jeromeetienne/AR.js#750

5x5 markers not being recognised

see: jeromeetienne/AR.js#730

image tracking not working

I just tried the example in the readme, and got this error:

Image/Video sourceType not working as expected

Describe the bug

Using Image or Video as sourceType not rendering expected results.

To Reproduce

Try:

arjs="sourceType: image; sourceUrl: https://cdn.glitch.com/c9111e7d-1d31-41a0-8e15-78b57caa9816%2Fhiro.jpg?v=1569447311795;

and:

Expected behavior

A red box to appear on top of the image.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):
Chrome, Mac
https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js

Originally posted by @jonasjohansson in jeromeetienne/AR.js#593

Simulate heading

Feature request: jeromeetienne/AR.js#736

Reduce content (location markers) flickering

see: jeromeetienne/AR.js#721

Cordova integration

This issue is a placeholder to discuss efforts toward Cordova integration.

With the help of the A-Frame team, I have already (mostly) succeeded in getting A-Frame working in Cordova. I created a showcase app app with some basic A-Frame demos.

I will keep this ticket updated as I make progress on AR.js integration.

To-do list:

• Marker demo
• Location demo
• cordova-plugin-iosrtc polyfill testing
• Android compatibility?

Location Based also for three.js

see: jeromeetienne/AR.js#675

Add a `maxDistance` property, opposite to minDistance on Location Based

see: jeromeetienne/AR.js#727

Documentation outside Github

Interesting "feature" request: jeromeetienne/AR.js#754

@spartalisdigital Would you help in setting up the website for doc?

Shifted Position of 3D-Objects using NFT

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

What is the current behavior?
When i'm using AR.js with A-Frame and NFT, the 3D-Objects keep changing it's position when I move the camera.

If the current behavior is a bug, please provide the steps to reproduce.
1.) Run the NFT example in the A-Frame Folder of AR.js
2.) Move your Camera (phone) and keep an eye on the feet of the dinosaur.
3.) The Model won't be at the same position, as when it first was rendered.

As I mentioned, you can use the NFT example in the A-Frame Folder of this repo (https://github.com/AR-js-org/AR.js/tree/master/aframe/examples/image-tracking/nft)

I took two screenshots for comparison, first is after the markr was found and second after I moved the camera a bit:

Please mention other relevant information such as the browser version, Operating System and Device Name
Phone: Samsung Galaxy A3 2017
OS: Android 8.0.0
Browser: Chrome 80.0.3987.119

What is the expected behavior?
The Object stays at the same position, no matter if I move the camera or not.

AR.js as a module: discussion

starting from: jeromeetienne/AR.js#428

Location Based: content follows the camera when moving phone on y axis

see: jeromeetienne/AR.js#710